From 5e09b8b1e992320290773a3205d51cd102c139bd Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Thu, 26 Mar 2020 08:40:22 +0100 Subject: [PATCH] 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-*",