From 3aa1702236a6a47daa64076d6520e406cfc3c319 Mon Sep 17 00:00:00 2001 From: Vignesh Murugesan Date: Mon, 24 May 2021 15:31:55 -0700 Subject: [PATCH] fix(build): Handle image bundling from css `@rollup/plugin-url` only takes care of bundling images that are directly imported from ts/js files and ignores images that are imported from css files. So adding this new postcss plugin to handle bundling of images specified in css files. Additionally, this ensures that we do not rely on postcss.config.js to be present in the directory. NOTE: The `inline` option is chosen rather than `copy` since the latter expects the `assetPath` to be provided and rewrites the `url(..)` patterns with that asset path. This is not ideal since these assets will be moved over to a different location when bundled with a distribution like `deck-nflx` and will result in 404s. --- packages/scripts/config/rollup.config.base.js | 14 ++++- packages/scripts/package.json | 3 +- packages/scripts/yarn.lock | 51 ++++++++++++++++++- 3 files changed, 64 insertions(+), 4 deletions(-) diff --git a/packages/scripts/config/rollup.config.base.js b/packages/scripts/config/rollup.config.base.js index 4f79b1b533c..16bfba4d9c7 100644 --- a/packages/scripts/config/rollup.config.base.js +++ b/packages/scripts/config/rollup.config.base.js @@ -1,5 +1,4 @@ const { nodeResolve } = require('@rollup/plugin-node-resolve'); - const commonjs = require('@rollup/plugin-commonjs'); const json = require('@rollup/plugin-json'); const postCss = require('rollup-plugin-postcss'); @@ -7,6 +6,9 @@ const replace = require('@rollup/plugin-replace'); const { terser } = require('rollup-plugin-terser'); const typescript = require('@rollup/plugin-typescript'); const url = require('@rollup/plugin-url'); +const autoPrefixer = require('autoprefixer'); +const postCssNested = require('postcss-nested'); +const postCssUrl = require('postcss-url'); const { visualizer } = require('rollup-plugin-visualizer'); const ROLLUP_STATS = !!process.env.ROLLUP_STATS; @@ -36,7 +38,15 @@ const plugins = [ noEmitOnError: !ROLLUP_WATCH, }), // import from .css, .less, and inject into the document - postCss(), + postCss({ + plugins: [ + autoPrefixer(), + postCssNested(), + postCssUrl({ + url: 'inline', + }), + ], + }), ]; if (ROLLUP_MINIFY) { diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 296abfa9027..5877517d48b 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -1,6 +1,6 @@ { "name": "@spinnaker/scripts", - "version": "0.0.6", + "version": "0.0.7", "description": "", "main": "index.js", "bin": { @@ -22,6 +22,7 @@ "chalk": "^4.1.1", "ora": "^5.4.0", "postcss-nested": "^4.2.1", + "postcss-url": "9.0.0", "rollup": "^2.35.1", "rollup-plugin-auto-external": "^2.0.0", "rollup-plugin-external-globals": "0.6.1", diff --git a/packages/scripts/yarn.lock b/packages/scripts/yarn.lock index 694794c7430..27967a75119 100644 --- a/packages/scripts/yarn.lock +++ b/packages/scripts/yarn.lock @@ -616,6 +616,11 @@ csso@^4.0.2: dependencies: css-tree "^1.1.2" +cuint@latest: + version "0.2.2" + resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b" + integrity sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs= + deepmerge@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" @@ -1268,6 +1273,11 @@ merge-stream@^2.0.0: resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w== +mime@2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/mime/-/mime-2.3.1.tgz#b1621c54d63b97c47d3cfe7f7215f7d64517c369" + integrity sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg== + mime@^1.4.1: version "1.6.0" resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1" @@ -1283,18 +1293,30 @@ mimic-fn@^2.1.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== -minimatch@^3.0.2, minimatch@^3.0.4: +minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== dependencies: brace-expansion "^1.1.7" +minimist@0.0.8: + version "0.0.8" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" + integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0= + minimist@^1.2.0, minimist@^1.2.5: version "1.2.5" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== +mkdirp@0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12" + integrity sha1-HXMHam35hs2TROFecfzAWkyavxI= + dependencies: + minimist "0.0.8" + mkdirp@^0.5.1, mkdirp@~0.5.1: version "0.5.5" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def" @@ -1811,6 +1833,17 @@ postcss-unique-selectors@^4.0.1: postcss "^7.0.0" uniqs "^2.0.0" +postcss-url@9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/postcss-url/-/postcss-url-9.0.0.tgz#4e5ca0fd7afa0cdb4dd62f38cdd1fe9a3d7ab207" + integrity sha512-CIawaRPYL0YNMIrT+5Yj6ogDeBBFtfkEhZDFQl20Q+GkfzKD3k9B3fdbR3Y5V+qOjoOqPNKUU8wWyXKjJAKhsg== + dependencies: + mime "2.3.1" + minimatch "3.0.4" + mkdirp "0.5.0" + postcss "7.0.2" + xxhashjs "0.2.1" + postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3: version "3.3.1" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" @@ -1830,6 +1863,15 @@ postcss@6.0.1: source-map "^0.5.6" supports-color "^3.2.3" +postcss@7.0.2: + version "7.0.2" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.2.tgz#7b5a109de356804e27f95a960bef0e4d5bc9bb18" + integrity sha512-fmaUY5370keLUTx+CnwRxtGiuFTcNBLQBqr1oE3WZ/euIYmGAo0OAgOhVJ3ByDnVmOR3PK+0V9VebzfjRIUcqw== + dependencies: + chalk "^2.4.1" + source-map "^0.6.1" + supports-color "^5.4.0" + postcss@^6.0.1, postcss@^6.0.17: version "6.0.23" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" @@ -2389,6 +2431,13 @@ wrappy@1: resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= +xxhashjs@0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.1.tgz#9bbe9be896142976dfa34c061b2d068c43d30de0" + integrity sha1-m76b6JYUKXbfo0wGGy0GjEPTDeA= + dependencies: + cuint latest + y18n@^5.0.5: version "5.0.8" resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"