Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Output CSS in /static/css and switch to using stylus directly #2544

Merged
merged 2 commits into from
Sep 29, 2019
Merged

Output CSS in /static/css and switch to using stylus directly #2544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
433907c
Output CSS in `/static/css`
XhmikosR Aug 25, 2019
5238577
Switch to using stylus directly.
XhmikosR Sep 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 33 additions & 30 deletions build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,26 @@

// BUILD.JS: This file is responsible for building static HTML pages

const fs = require('fs')
const path = require('path')
const Metalsmith = require('metalsmith')
const autoprefixer = require('autoprefixer-stylus')
const collections = require('metalsmith-collections')
const feed = require('metalsmith-feed')
const discoverHelpers = require('metalsmith-discover-helpers')
const discoverPartials = require('metalsmith-discover-partials')
const layouts = require('metalsmith-layouts')
const markdown = require('metalsmith-markdown')
const prism = require('metalsmith-prism')
const stylus = require('metalsmith-stylus')
const permalinks = require('metalsmith-permalinks')
const pagination = require('metalsmith-yearly-pagination')
const defaultsDeep = require('lodash.defaultsdeep')
const autoprefixer = require('autoprefixer-stylus')
const marked = require('marked')
const path = require('path')
const fs = require('fs')
const stylus = require('stylus')
const ncp = require('ncp')
const junk = require('junk')

const navigation = require('./scripts/plugins/navigation')
const filterStylusPartials = require('./scripts/plugins/filter-stylus-partials')
const anchorMarkdownHeadings = require('./scripts/plugins/anchor-markdown-headings')
const loadVersions = require('./scripts/load-versions')
const latestVersion = require('./scripts/helpers/latestversion')
Expand Down Expand Up @@ -238,33 +237,37 @@ function githubLinks (options) {
}

// This function builds the layouts folder for all the Stylus files.
function buildLayouts () {
console.log('[metalsmith] build/layouts started')
const labelForBuild = '[metalsmith] build/layouts finished'
function buildCSS () {
console.log('[stylus] static/css started')
const labelForBuild = '[stylus] static/css finished'
console.time(labelForBuild)

fs.mkdir(path.join(__dirname, 'build'), () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you consider the { recursive: true } option of fs.mkdir() to avoid the nested callbacks below? As described by docs;

// Creates /tmp/a/apple, regardless of whether `/tmp` and /tmp/a exist.
fs.mkdir('/tmp/a/apple', { recursive: true }, (err) => {
  if (err) throw err;
});

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, but I thought this change should be made separately after all the other changes have settled :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, this requires Node.js 10, another reason I didn't make this change yet.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is that requirement a problem though?

As far as I see it, we're running Node.js 10 in CI and $latest when building on the hosting server nodejs/build/setup/www/resources/scripts/build-site.sh.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No problem for me, it's just that such change should be a clear patch IMO and not sneaked in in other patches, that is all.

fs.mkdir(path.join(__dirname, 'build', 'layouts'), () => {
const metalsmith = Metalsmith(__dirname)
metalsmith
// Sets the build source as /layouts/css.
.source(path.join(__dirname, 'layouts', 'css'))
// Deletes Stylus partials since they'll be included in the main CSS
// file anyways.
.use(filterStylusPartials())
.use(stylus({
compress: process.env.NODE_ENV !== 'development',
paths: [path.join(__dirname, 'layouts', 'css')],
use: [autoprefixer()]
}))
// Pipes the generated files into /build/layouts/css.
.destination(path.join(__dirname, 'build', 'layouts', 'css'))
fs.mkdir(path.join(__dirname, 'build/static'), () => {
fs.mkdir(path.join(__dirname, 'build/static/css'), () => {
fs.readFile(path.join(__dirname, 'layouts/css/styles.styl'), 'utf8', (err, data) => {
if (err) {
throw err
}

stylus(data)
.set('compress', process.env.NODE_ENV !== 'development')
.set('paths', [path.join(__dirname, 'layouts/css')])
.use(autoprefixer())
.render((error, css) => {
if (error) {
throw error
}

// This actually executes the build and stops the internal timer after
// completion.
metalsmith.build((err) => {
phillipj marked this conversation as resolved.
Show resolved Hide resolved
if (err) { throw err }
console.timeEnd(labelForBuild)
fs.writeFile(path.join(__dirname, 'build/static/css/styles.css'), css, (err) => {
if (err) {
throw err
}

console.timeEnd(labelForBuild)
})
})
})
})
})
})
Expand Down Expand Up @@ -313,8 +316,8 @@ function fullBuild (opts) {
const { selectedLocales, preserveLocale } = opts
// Build static files.
copyStatic()
// Build layouts
buildLayouts()
// Build CSS
buildCSS()
getSource((err, source) => {
if (err) { throw err }

Expand Down
2 changes: 1 addition & 1 deletion layouts/partials/html-head.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&display=fallback">
<link rel="stylesheet" href="/layouts/css/styles.css">
<link rel="stylesheet" href="/static/css/styles.css">

<meta name="author" content="{{ site.author }}">
<meta name="robots" content="{{#if robots}}{{ robots }}{{else}}index, follow{{/if}}">
Expand Down
9 changes: 0 additions & 9 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@
"metalsmith-metadata": "0.0.4",
"metalsmith-permalinks": "^2.2.0",
"metalsmith-prism": "^3.1.1",
"metalsmith-stylus": "^3.0.0",
"metalsmith-yearly-pagination": "^4.0.0",
"ncp": "^2.0.0",
"node-version-data": "^1.1.0",
Expand All @@ -63,7 +62,8 @@
"require-dir": "^1.2.0",
"semver": "^6.3.0",
"st": "^1.2.2",
"strftime": "^0.10.0"
"strftime": "^0.10.0",
"stylus": "^0.54.7"
},
"devDependencies": {
"cross-env": "^6.0.0",
Expand Down
16 changes: 0 additions & 16 deletions scripts/plugins/filter-stylus-partials.js
View file
Open in desktop

This file was deleted.