Skip to content

Commit

Permalink
fix(build): Handle image bundling from css
Browse files Browse the repository at this point in the history 
`@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.
  • Loading branch information
@vigneshm
vigneshm committed May 24, 2021
1 parent c39f74d commit 3aa1702
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 4 deletions.
14 changes: 12 additions & 2 deletions packages/scripts/config/rollup.config.base.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
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');
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;
Expand Down Expand Up @@ -36,7 +38,15 @@ const plugins = [
noEmitOnError: !ROLLUP_WATCH,
}),
// import from .css, .less, and inject into the document <head></head>
postCss(),
postCss({
plugins: [
autoPrefixer(),
postCssNested(),
postCssUrl({
url: 'inline',
}),
],
}),
];

if (ROLLUP_MINIFY) {
Expand Down
3 changes: 2 additions & 1 deletion packages/scripts/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@spinnaker/scripts",
"version": "0.0.6",
"version": "0.0.7",
"description": "",
"main": "index.js",
"bin": {
Expand All @@ -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",
Expand Down
51 changes: 50 additions & 1 deletion packages/scripts/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 3aa1702

Please sign in to comment.