From 5e09b8b1e992320290773a3205d51cd102c139bd Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Thu, 26 Mar 2020 08:40:22 +0100 Subject: [PATCH 1/5] Optimize CSS build --- build/css.js | 43 +++++++++++++++++++++++++++++++++++++++++ build/postcss.config.js | 7 ------- package.json | 9 +-------- 3 files changed, 44 insertions(+), 15 deletions(-) create mode 100644 build/css.js diff --git a/build/css.js b/build/css.js new file mode 100644 index 000000000..b1d2d4506 --- /dev/null +++ b/build/css.js @@ -0,0 +1,43 @@ +const postcssConfig = require('./postcss.config') +const postcss = require('postcss') +const glob = require('glob') +const sass = require('node-sass') +const cleancss = require('clean-css') +const fs = require('fs') +const path = require('path') +const files = ['bootstrap', 'bootstrap-grid', 'bootstrap-reboot', 'bootstrap-utilities'] + +files.forEach(filename => { + sass.render({ + file: path.resolve(`./scss/${filename}.scss`), + outputStyle: 'expanded', + sourceMap: true, + sourceMapContents: true, + precision: 6, + outFile: `./dist/css/${filename}.css` + }, (error, css) => { + // Not sure what to do with css.map here + postcss(postcssConfig) + .process(css.css, { from: `./dist/css/${filename}.css` }) + .then(result => { + fs.writeFile(`./dist/css/${filename}.css`, result.css, () => true) + fs.writeFile(`./dist/css/${filename}.min.css`, new cleancss().minify(result.css).styles, () => true) + }) + }) +}) + +// Autoprefix examples +glob('./site/content/**/*.css', {}, (error, files) => { + files.forEach(file => { + fs.readFile(file, (err, css) => { + + postcss(postcssConfig) + .process(css, { from: file, to: file }) + .then(result => { + if (css.toString('utf8') !== result.css) { + fs.writeFile(file, result.css, () => true) + } + }) + }) + }) +}) diff --git a/build/postcss.config.js b/build/postcss.config.js index b179a0e77..b2b0e6c6f 100644 --- a/build/postcss.config.js +++ b/build/postcss.config.js @@ -2,13 +2,6 @@ module.exports = ctx => { return { - map: ctx.file.dirname.includes('examples') ? - false : - { - inline: false, - annotation: true, - sourcesContent: true - }, plugins: { autoprefixer: { cascade: false diff --git a/package.json b/package.json index 7d7e2d216..f437c6c96 100644 --- a/package.json +++ b/package.json @@ -20,18 +20,11 @@ "scripts": { "start": "npm-run-all --parallel watch docs-serve", "bundlewatch": "bundlewatch --config .bundlewatch.config.json", - "css": "npm-run-all css-compile css-prefix css-rtl css-minify", - "css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/", + "css": "node build/css.js", "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"", "css-lint": "npm-run-all --continue-on-error --parallel css-lint-*", "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd", "css-lint-vars": "fusv scss/ site/assets/scss/", - "css-minify": "npm-run-all --parallel css-minify-*", - "css-minify-main": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-utilities.min.css dist/css/bootstrap-utilities.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css", - "css-minify-rtl": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap.rtl.min.css dist/css/bootstrap.rtl.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.rtl.min.css dist/css/bootstrap-grid.rtl.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-utilities.rtl.min.css dist/css/bootstrap-utilities.rtl.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.rtl.min.css dist/css/bootstrap-reboot.rtl.css", - "css-prefix": "npm-run-all --parallel css-prefix-*", - "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"", - "css-prefix-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\"", "css-prefix-examples-rtl": "cross-env-shell NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"site/content/docs/$npm_package_version_short/examples/\" --ext \".rtl.css\" --base \"site/content/docs/$npm_package_version_short/examples/\" \"site/content/docs/$npm_package_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.css\" \"!site/content/docs/$npm_package_version_short/examples/{blog,carousel,dashboard,cheatsheet}/*.rtl.css\"", "js": "npm-run-all js-compile js-minify", "js-compile": "npm-run-all --parallel js-compile-*", From 3d3075e0ac9f750bf818f7df607e3576b30ef1ae Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 11 Nov 2020 10:12:07 +0200 Subject: [PATCH 2/5] Updates TODO: * restore RTL files processing * handle errors * switch to the promises fs API * update clean-css options * don't run postcss for the minified files * use the unminified files as clean-css source * make sure the map files still work * use __dirname so that the script works from root and the build dir --- build/{css.js => build-css.js} | 31 ++++++++++++++++++++----------- package-lock.json | 15 +++++++++++++++ package.json | 5 +++-- 3 files changed, 38 insertions(+), 13 deletions(-) rename build/{css.js => build-css.js} (74%) diff --git a/build/css.js b/build/build-css.js similarity index 74% rename from build/css.js rename to build/build-css.js index b1d2d4506..fabec32cf 100644 --- a/build/css.js +++ b/build/build-css.js @@ -1,36 +1,45 @@ -const postcssConfig = require('./postcss.config') -const postcss = require('postcss') -const glob = require('glob') -const sass = require('node-sass') -const cleancss = require('clean-css') +'use strict' + const fs = require('fs') const path = require('path') -const files = ['bootstrap', 'bootstrap-grid', 'bootstrap-reboot', 'bootstrap-utilities'] +const postcss = require('postcss') +const glob = require('glob') +const sass = require('sass') +const fiber = require('fibers') +const Cleancss = require('clean-css') + +const postcssConfig = require('./postcss.config') + +const files = [ + 'bootstrap', + 'bootstrap-grid', + 'bootstrap-reboot', + 'bootstrap-utilities' +] files.forEach(filename => { sass.render({ file: path.resolve(`./scss/${filename}.scss`), + fiber, outputStyle: 'expanded', sourceMap: true, sourceMapContents: true, - precision: 6, outFile: `./dist/css/${filename}.css` }, (error, css) => { - // Not sure what to do with css.map here + // Fix postcss to use and output sourcemaps postcss(postcssConfig) .process(css.css, { from: `./dist/css/${filename}.css` }) .then(result => { fs.writeFile(`./dist/css/${filename}.css`, result.css, () => true) - fs.writeFile(`./dist/css/${filename}.min.css`, new cleancss().minify(result.css).styles, () => true) + fs.writeFile(`./dist/css/${filename}.min.css`, new Cleancss().minify(result.css).styles, () => true) }) }) }) -// Autoprefix examples +// Prefix examples glob('./site/content/**/*.css', {}, (error, files) => { files.forEach(file => { fs.readFile(file, (err, css) => { - postcss(postcssConfig) .process(css, { from: file, to: file }) .then(result => { diff --git a/package-lock.json b/package-lock.json index 44f82765a..491ca2979 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3217,6 +3217,12 @@ "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", "dev": true }, + "detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", + "dev": true + }, "di": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz", @@ -4415,6 +4421,15 @@ "pend": "~1.2.0" } }, + "fibers": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/fibers/-/fibers-5.0.0.tgz", + "integrity": "sha512-UpGv/YAZp7mhKHxDvC1tColrroGRX90sSvh8RMZV9leo+e5+EkRVgCEZPlmXeo3BUNQTZxUaVdLskq1Q2FyCPg==", + "dev": true, + "requires": { + "detect-libc": "^1.0.3" + } + }, "figures": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", diff --git a/package.json b/package.json index f437c6c96..51a24a6bd 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "scripts": { "start": "npm-run-all --parallel watch docs-serve", "bundlewatch": "bundlewatch --config .bundlewatch.config.json", - "css": "node build/css.js", + "css": "node build/build-css.js", "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"", "css-lint": "npm-run-all --continue-on-error --parallel css-lint-*", "css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd", @@ -64,7 +64,7 @@ "test": "npm-run-all lint dist js-test docs-build docs-lint", "netlify": "cross-env-shell HUGO_BASEURL=$DEPLOY_PRIME_URL npm-run-all dist release-sri docs-build", "watch": "npm-run-all --parallel watch-*", - "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix\"", + "watch-css-main": "nodemon --watch scss/ --ext scss --exec \"npm-run-all css-lint css\"", "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"", "watch-css-docs": "nodemon --watch site/assets/scss/ --ext scss --exec \"npm run css-lint\"", "watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"", @@ -107,6 +107,7 @@ "eslint-config-xo": "^0.33.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-unicorn": "^25.0.0", + "fibers": "^5.0.0", "find-unused-sass-variables": "^3.0.0", "glob": "^7.1.6", "hammer-simulator": "0.0.1", From 15e33cd5014392e5131e28d072024149bc3bcdd6 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 11 Nov 2020 10:55:57 +0200 Subject: [PATCH 3/5] WIP --- build/build-css.js | 15 +++++++++++---- build/postcss.config.js | 12 ------------ 2 files changed, 11 insertions(+), 16 deletions(-) delete mode 100644 build/postcss.config.js diff --git a/build/build-css.js b/build/build-css.js index fabec32cf..0eff9c9b7 100644 --- a/build/build-css.js +++ b/build/build-css.js @@ -5,10 +5,13 @@ const path = require('path') const postcss = require('postcss') const glob = require('glob') const sass = require('sass') +const autoprefixer = require('autoprefixer') const fiber = require('fibers') const Cleancss = require('clean-css') -const postcssConfig = require('./postcss.config') +const postcssPlugins = [ + autoprefixer({ cascade: false }) +] const files = [ 'bootstrap', @@ -27,10 +30,14 @@ files.forEach(filename => { outFile: `./dist/css/${filename}.css` }, (error, css) => { // Fix postcss to use and output sourcemaps - postcss(postcssConfig) - .process(css.css, { from: `./dist/css/${filename}.css` }) + postcss(postcssPlugins) + .process(css.css, { + from: `./dist/css/${filename}.css`, + map: `./dist/css/${filename}.css.map` + }) .then(result => { fs.writeFile(`./dist/css/${filename}.css`, result.css, () => true) + fs.writeFile(`./dist/css/${filename}.css.map`, result.map.toString(), () => true) fs.writeFile(`./dist/css/${filename}.min.css`, new Cleancss().minify(result.css).styles, () => true) }) }) @@ -40,7 +47,7 @@ files.forEach(filename => { glob('./site/content/**/*.css', {}, (error, files) => { files.forEach(file => { fs.readFile(file, (err, css) => { - postcss(postcssConfig) + postcss(postcssPlugins) .process(css, { from: file, to: file }) .then(result => { if (css.toString('utf8') !== result.css) { diff --git a/build/postcss.config.js b/build/postcss.config.js deleted file mode 100644 index b2b0e6c6f..000000000 --- a/build/postcss.config.js +++ /dev/null @@ -1,12 +0,0 @@ -'use strict' - -module.exports = ctx => { - return { - plugins: { - autoprefixer: { - cascade: false - }, - rtlcss: ctx.env === 'RTL' ? {} : false - } - } -} From f333bd9a0b37923a2f3f366631ef74eb6d3b58ef Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 1 Jan 2021 12:54:42 +0200 Subject: [PATCH 4/5] Add missing shebang --- build/build-css.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/build/build-css.js b/build/build-css.js index 0eff9c9b7..8345af2db 100644 --- a/build/build-css.js +++ b/build/build-css.js @@ -1,3 +1,5 @@ +#!/usr/bin/env node + 'use strict' const fs = require('fs') From 70a8bf98c5c654c003bbf229badbd24f165f2d72 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 1 Jan 2021 13:09:39 +0200 Subject: [PATCH 5/5] WIP2 --- build/build-css.js | 50 +++++++++++++++++++++++++++------------------- package-lock.json | 15 -------------- package.json | 1 - 3 files changed, 30 insertions(+), 36 deletions(-) diff --git a/build/build-css.js b/build/build-css.js index 8345af2db..738b553a9 100644 --- a/build/build-css.js +++ b/build/build-css.js @@ -2,48 +2,58 @@ 'use strict' -const fs = require('fs') +const fs = require('fs/promises') const path = require('path') const postcss = require('postcss') const glob = require('glob') const sass = require('sass') const autoprefixer = require('autoprefixer') -const fiber = require('fibers') const Cleancss = require('clean-css') const postcssPlugins = [ autoprefixer({ cascade: false }) ] -const files = [ +const FILES = [ 'bootstrap', 'bootstrap-grid', 'bootstrap-reboot', 'bootstrap-utilities' ] -files.forEach(filename => { - sass.render({ +async function processFile(filename) { + const sassOptions = { file: path.resolve(`./scss/${filename}.scss`), - fiber, outputStyle: 'expanded', sourceMap: true, sourceMapContents: true, outFile: `./dist/css/${filename}.css` - }, (error, css) => { - // Fix postcss to use and output sourcemaps - postcss(postcssPlugins) - .process(css.css, { - from: `./dist/css/${filename}.css`, - map: `./dist/css/${filename}.css.map` - }) - .then(result => { - fs.writeFile(`./dist/css/${filename}.css`, result.css, () => true) - fs.writeFile(`./dist/css/${filename}.css.map`, result.map.toString(), () => true) - fs.writeFile(`./dist/css/${filename}.min.css`, new Cleancss().minify(result.css).styles, () => true) - }) - }) -}) + } + + const css = await sass.renderSync(sassOptions) + + // Fix postcss to use and output sourcemaps + const processedCss = await postcss(postcssPlugins) + .process(css.css, { + from: `./dist/css/${filename}.css`, + map: `./dist/css/${filename}.css.map` + }) + + const minifiedCss = await new Cleancss().minify(processedCss.css).styles + + await fs.writeFile(`./dist/css/${filename}.css`, processedCss.css) + await fs.writeFile(`./dist/css/${filename}.css.map`, processedCss.map.toString()) + await fs.writeFile(`./dist/css/${filename}.min.css`, minifiedCss) +} + +(async () => { + try { + await Promise.all(FILES.map(file => processFile(file))) + } catch (error) { + console.error(error) + process.exit(1) + } +})() // Prefix examples glob('./site/content/**/*.css', {}, (error, files) => { diff --git a/package-lock.json b/package-lock.json index 491ca2979..44f82765a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3217,12 +3217,6 @@ "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", "dev": true }, - "detect-libc": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", - "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", - "dev": true - }, "di": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz", @@ -4421,15 +4415,6 @@ "pend": "~1.2.0" } }, - "fibers": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/fibers/-/fibers-5.0.0.tgz", - "integrity": "sha512-UpGv/YAZp7mhKHxDvC1tColrroGRX90sSvh8RMZV9leo+e5+EkRVgCEZPlmXeo3BUNQTZxUaVdLskq1Q2FyCPg==", - "dev": true, - "requires": { - "detect-libc": "^1.0.3" - } - }, "figures": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", diff --git a/package.json b/package.json index 51a24a6bd..3bf674d63 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,6 @@ "eslint-config-xo": "^0.33.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-unicorn": "^25.0.0", - "fibers": "^5.0.0", "find-unused-sass-variables": "^3.0.0", "glob": "^7.1.6", "hammer-simulator": "0.0.1",