From 6ac511448d13d71da30e241c2f86bcac418e50a8 Mon Sep 17 00:00:00 2001 From: NghiaPham Date: Thu, 6 Feb 2020 18:08:22 +0700 Subject: [PATCH] Fix: #102 - purge unused bulma styles from mono repo prod styles (#175) * poc * fix: typos * chore: add comments to scripts * rename file purifyOptions to purify-options --- .gitignore | 1 + packages/aml-checklist/package.json | 2 +- packages/aml-checklist/src/styles/index.scss | 2 -- packages/elements/purify-options.js | 30 ++++++++++++++++ packages/elements/rollup.config.js | 35 +++---------------- packages/geo-diary/package.json | 2 +- packages/geo-diary/src/styles/index.scss | 2 -- packages/lifetime-legal/package.json | 2 +- packages/lifetime-legal/src/styles/index.scss | 1 - packages/marketplace/package.json | 2 +- packages/marketplace/src/styles/index.scss | 2 -- packages/smb/package.json | 2 +- packages/smb/src/styles/index.scss | 2 -- scripts/webpack/constants.js | 1 + .../build-configuration.js} | 25 ++++--------- .../webpack-sass-prod/build-element-scss.js | 21 +++++++++++ scripts/webpack/webpack-sass-prod/index.js | 32 +++++++++++++++++ scripts/webpack/webpack.sass.dev.js | 17 ++++++++- 18 files changed, 117 insertions(+), 64 deletions(-) create mode 100644 packages/elements/purify-options.js rename scripts/webpack/{webpack.sass.prod.js => webpack-sass-prod/build-configuration.js} (73%) create mode 100644 scripts/webpack/webpack-sass-prod/build-element-scss.js create mode 100644 scripts/webpack/webpack-sass-prod/index.js diff --git a/.gitignore b/.gitignore index 9ce08d8f9b..515e135e3d 100644 --- a/.gitignore +++ b/.gitignore @@ -48,6 +48,7 @@ dist-cdn/ .Trashes ehthumbs.db Thumbs.db +.temp .rts2_cache* storybook-static diff --git a/packages/aml-checklist/package.json b/packages/aml-checklist/package.json index 8791774741..5b32a8362f 100644 --- a/packages/aml-checklist/package.json +++ b/packages/aml-checklist/package.json @@ -11,7 +11,7 @@ "author": "Reapit Ltd", "main": "./src/index.ts", "scripts": { - "build:prod": "webpack --color --mode production --config ../../scripts/webpack/webpack.sass.prod.js", + "build:prod": "node '../../scripts/webpack/webpack-sass-prod/index.js'", "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.sass.dev.js", "start:prod": "serve public/dist -s -l 8080", "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit", diff --git a/packages/aml-checklist/src/styles/index.scss b/packages/aml-checklist/src/styles/index.scss index 25b5cde983..55e5d005a1 100644 --- a/packages/aml-checklist/src/styles/index.scss +++ b/packages/aml-checklist/src/styles/index.scss @@ -17,5 +17,3 @@ @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); - -@import "../../../elements/src/styles/index.scss"; diff --git a/packages/elements/purify-options.js b/packages/elements/purify-options.js new file mode 100644 index 0000000000..24db09ea90 --- /dev/null +++ b/packages/elements/purify-options.js @@ -0,0 +1,30 @@ +// Other node scripts will used this file: webpack.sass.prod +module.exports = { + output: 'dist/index.css', + minify: true, + whitelist: [ + '*react-datepicker*', + '*mt*', + '*mb*', + '*ml*', + '*mr*', + '*mx*', + '*my*', + '*pt*', + '*pb*', + '*pl*', + '*pr*', + '*px*', + '*py*', + '*flex*', + '*justify*', + '*items-center*', + '*pin*', + '*absolute*', + '*relative*', + '*capitalize*', + 'mw-100', + ], + // Uncomment this line if you want to see the CSS purified from the package + // rejected: true +} diff --git a/packages/elements/rollup.config.js b/packages/elements/rollup.config.js index 6525091d11..90758a440e 100644 --- a/packages/elements/rollup.config.js +++ b/packages/elements/rollup.config.js @@ -1,6 +1,9 @@ import scss from 'rollup-plugin-scss' import purify from 'purify-css' +// import in rollup doesn't work with common.js +const purifyOpions = require('./purify-options.js') + export default [ { input: 'src/styles/index.scss', @@ -12,37 +15,7 @@ export default [ scss({ output: styles => { const content = ['./dist/elements.esm.js'] - const options = { - output: 'dist/index.css', - minify: true, - whitelist: [ - '*react-datepicker*', - '*mt*', - '*mb*', - '*ml*', - '*mr*', - '*mx*', - '*my*', - '*pt*', - '*pb*', - '*pl*', - '*pr*', - '*px*', - '*py*', - '*flex*', - '*justify*', - '*items-center*', - '*pin*', - '*absolute*', - '*relative*', - '*capitalize*', - 'mw-100', - ], - // Uncomment this line if you want to see the CSS purified from the package - // rejected: true - } - - purify(content, styles, options) + purify(content, styles, purifyOpions) }, }), ], diff --git a/packages/geo-diary/package.json b/packages/geo-diary/package.json index fb834e7788..7497f04e11 100644 --- a/packages/geo-diary/package.json +++ b/packages/geo-diary/package.json @@ -11,7 +11,7 @@ "author": "Author", "main": "./src/index.ts", "scripts": { - "build:prod": "webpack --color --mode production --config ../../scripts/webpack/webpack.sass.prod.js", + "build:prod": "node '../../scripts/webpack/webpack-sass-prod/index.js'", "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.sass.dev.js", "start:prod": "serve public/dist -s -l 8080", "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit", diff --git a/packages/geo-diary/src/styles/index.scss b/packages/geo-diary/src/styles/index.scss index 25b5cde983..55e5d005a1 100644 --- a/packages/geo-diary/src/styles/index.scss +++ b/packages/geo-diary/src/styles/index.scss @@ -17,5 +17,3 @@ @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); - -@import "../../../elements/src/styles/index.scss"; diff --git a/packages/lifetime-legal/package.json b/packages/lifetime-legal/package.json index 521e7f7d11..25f2d5f180 100644 --- a/packages/lifetime-legal/package.json +++ b/packages/lifetime-legal/package.json @@ -11,7 +11,7 @@ "author": "Reapit Ltd", "main": "./src/index.ts", "scripts": { - "build:prod": "webpack --color --mode production --config ../../scripts/webpack/webpack.sass.prod.js", + "build:prod": "node '../../scripts/webpack/webpack-sass-prod/index.js'", "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.sass.dev.js", "start:prod": "serve public/dist -s -l 8080", "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit", diff --git a/packages/lifetime-legal/src/styles/index.scss b/packages/lifetime-legal/src/styles/index.scss index 4080ec05f0..921237fc2f 100644 --- a/packages/lifetime-legal/src/styles/index.scss +++ b/packages/lifetime-legal/src/styles/index.scss @@ -1,6 +1,5 @@ @charset "utf-8"; @import './base/colors.scss'; -@import "../../../elements/src/styles/index.scss"; * { box-sizing: border-box !important; diff --git a/packages/marketplace/package.json b/packages/marketplace/package.json index 6467ce7c7d..233b5ce1cb 100644 --- a/packages/marketplace/package.json +++ b/packages/marketplace/package.json @@ -8,7 +8,7 @@ "license": "MIT", "private": true, "scripts": { - "build:prod": "webpack --color --mode production --config ../../scripts/webpack/webpack.sass.prod.js", + "build:prod": "node '../../scripts/webpack/webpack-sass-prod/index.js'", "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.sass.dev.js", "start:prod": "serve public/dist -s -l 8080", "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit", diff --git a/packages/marketplace/src/styles/index.scss b/packages/marketplace/src/styles/index.scss index 25b5cde983..55e5d005a1 100644 --- a/packages/marketplace/src/styles/index.scss +++ b/packages/marketplace/src/styles/index.scss @@ -17,5 +17,3 @@ @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); - -@import "../../../elements/src/styles/index.scss"; diff --git a/packages/smb/package.json b/packages/smb/package.json index 5635b472ff..63e9ed9599 100644 --- a/packages/smb/package.json +++ b/packages/smb/package.json @@ -11,7 +11,7 @@ "author": "reapit global", "main": "dist/index.ts", "scripts": { - "build:prod": "webpack --color --mode production --config ../../scripts/webpack/webpack.sass.prod.js", + "build:prod": "node '../../scripts/webpack/webpack-sass-prod/index.js'", "start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.sass.dev.js", "start:prod": "serve public/dist -s -l 8080", "test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit", diff --git a/packages/smb/src/styles/index.scss b/packages/smb/src/styles/index.scss index c5c377512d..a27aeed31f 100644 --- a/packages/smb/src/styles/index.scss +++ b/packages/smb/src/styles/index.scss @@ -19,5 +19,3 @@ @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); - -@import "../../../elements/src/styles/index.scss"; \ No newline at end of file diff --git a/scripts/webpack/constants.js b/scripts/webpack/constants.js index 3227854b1e..c472b37764 100644 --- a/scripts/webpack/constants.js +++ b/scripts/webpack/constants.js @@ -7,6 +7,7 @@ const PATHS = { logo: `${process.cwd()}/public/logo.png`, output: `${process.cwd()}/public/dist`, elementsSass: `${process.cwd()}/../elements/src/styles/**.scss`, + elementsIndexSass: `${process.cwd()}/../elements/src/styles/index.scss`, } module.exports = { diff --git a/scripts/webpack/webpack.sass.prod.js b/scripts/webpack/webpack-sass-prod/build-configuration.js similarity index 73% rename from scripts/webpack/webpack.sass.prod.js rename to scripts/webpack/webpack-sass-prod/build-configuration.js index ddfdee44a2..d1e825996e 100644 --- a/scripts/webpack/webpack.sass.prod.js +++ b/scripts/webpack/webpack-sass-prod/build-configuration.js @@ -1,24 +1,13 @@ -const webpackBase = require('./webpack.base.prod') -// const path = require('path') -// const glob = require('glob') +const webpackBase = require('../webpack.base.prod') const MiniCssExtractPlugin = require('mini-css-extract-plugin') -// const PurgecssWhitelister = require('purgecss-whitelister') -// const { PATHS } = require('./purgecss-loader') -// TODO: #102 Had to comment out as could not find a way to purge -// raw sass from elements project -// const PurgecssLoader = { -// loader: './purgecss-loader.js', -// options: { -// paths: glob.sync(`${PATHS.src}/**/*.{ts,tsx}`), -// whitelistPatterns: [/^(slick)/, /^(modal)/], -// whitelist: PurgecssWhitelister([ -// // Insert glob to purge Elements CSS here -// ]), -// }, -// } +const path = require('path') +const buildCssFilePath = path.resolve(__dirname, './.temp/index.css') module.exports = { - ...webpackBase, + ...{ + ...webpackBase, + entry: [...webpackBase.entry, buildCssFilePath], + }, plugins: [ ...webpackBase.plugins, new MiniCssExtractPlugin({ diff --git a/scripts/webpack/webpack-sass-prod/build-element-scss.js b/scripts/webpack/webpack-sass-prod/build-element-scss.js new file mode 100644 index 0000000000..0c308647ba --- /dev/null +++ b/scripts/webpack/webpack-sass-prod/build-element-scss.js @@ -0,0 +1,21 @@ +const nodeSass = require('node-sass') +const path = require('path') +const glob = require('glob') +const purifyCss = require('purify-css') +const purifyOptions = require(path.resolve(__dirname, '../../../packages/elements/purify-options.js')) + +/** + * build css from scss imported from elements + * then purge it by comparing it against all ts, tsx files in src/elements + */ +const buildElementScss = async () => { + const result = nodeSass.renderSync({ + file: path.resolve(__dirname, '../../../packages/elements/src/styles/index.scss'), + }) + const css = result.css.toString() + const globElementSrc = glob.sync(path.resolve(__dirname, '../../../packages/elements/src/**/*.{ts,tsx}')) + purifyOptions.output = path.resolve(__dirname, './.temp/index.css') + purifyCss(globElementSrc, css, purifyOptions) +} + +module.exports = buildElementScss diff --git a/scripts/webpack/webpack-sass-prod/index.js b/scripts/webpack/webpack-sass-prod/index.js new file mode 100644 index 0000000000..fc2e2fd11e --- /dev/null +++ b/scripts/webpack/webpack-sass-prod/index.js @@ -0,0 +1,32 @@ +// flows +// glob the tsx, ts of src of elements/src +// build elements scss-es in a single css +// purge it against contents of files in {1} +// webpack sass config's entry will be tweaked +// dev: include elements/src/styles/index.scss +// the prod script will: +// execute 1,2,3 +// collect CSS to scripts/webpack/webpack-sass-prod/.temp/index.css +// Add index.css to the entry of sass prod build script + +const webpack = require('webpack') +const buildConfiguration = require('./build-configuration') +const buildElementScss = require('./build-element-scss') + +// build multiple scss-es into a singlae css file in .temp/index.css +buildElementScss() + +// https://webpack.js.org/api/node/ +const compiler = webpack(buildConfiguration) + +compiler.run((err, stats) => { + if (err) { + throw err + } + + console.log( + stats.toString({ + colors: true, + }), + ) +}) diff --git a/scripts/webpack/webpack.sass.dev.js b/scripts/webpack/webpack.sass.dev.js index 3049dd8ee7..f7fff4b791 100644 --- a/scripts/webpack/webpack.sass.dev.js +++ b/scripts/webpack/webpack.sass.dev.js @@ -1,7 +1,22 @@ +// flows +// glob the tsx, ts of src of elements/src +// build elements scss-es in a single css +// purge it against contents of files in {1} +// webpack sass config's entry will be tweaked +// dev: include elements/src/styles/index.scss +// the prod script will: +// execute 1,2,3 +// collect CSS to scripts/webpack/webpack-sass-prod/.temp/index.css +// Add index.css to the entry of sass prod build script + const webpackBase = require('./webpack.base.dev') +const { PATHS } = require('./constants') module.exports = { - ...webpackBase, + ...{ + ...webpackBase, + entry: [...webpackBase.entry, PATHS.elementsIndexSass], + }, module: { rules: [ ...webpackBase.module.rules,