WIP2

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/build-css.js

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+
+'use strict'
+
+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 Cleancss = require('clean-css')
+
+const postcssPlugins = [
+  autoprefixer({ cascade: false })
+]
+
+const FILES = [
+  'bootstrap',
+  'bootstrap-grid',
+  'bootstrap-reboot',
+  'bootstrap-utilities'
+]
+
+async function processFile(filename) {
+  const sassOptions = {
+    file: path.resolve(`./scss/${filename}.scss`),
+    outputStyle: 'expanded',
+    sourceMap: true,
+    sourceMapContents: true,
+    outFile: `./dist/css/${filename}.css`
+  }
+
+  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) => {
+  files.forEach(file => {
+    fs.readFile(file, (err, css) => {
+      postcss(postcssPlugins)
+        .process(css, { from: file, to: file })
+        .then(result => {
+          if (css.toString('utf8') !== result.css) {
+            fs.writeFile(file, result.css, () => true)
+          }
+        })
+    })
+  })
+})

build/postcss.config.js

@@ -1,19 +0,0 @@
-'use strict'
-
-module.exports = ctx => {
-  return {
-    map: ctx.file.dirname.includes('examples') ?
-      false :
-      {
-        inline: false,
-        annotation: true,
-        sourcesContent: true
-      },
-    plugins: {
-      autoprefixer: {
-        cascade: false
-      },
-      rtlcss: ctx.env === 'RTL' ? {} : false
-    }
-  }
-}

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/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-*",
@@ -71,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\"",