diff --git a/build/build-css.js b/build/build-css.js new file mode 100644 index 000000000..738b553a9 --- /dev/null +++ b/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) + } + }) + }) + }) +}) diff --git a/build/postcss.config.js b/build/postcss.config.js deleted file mode 100644 index b179a0e77..000000000 --- a/build/postcss.config.js +++ /dev/null @@ -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 - } - } -} diff --git a/package.json b/package.json index 7d7e2d216..3bf674d63 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/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\"",