rollup-plugin-postcss
rollup-plugin-postcss copied to clipboard
On watch mode generated CSS sometimes is prepended when using multiple CSS files
I've realized that something wrong was happening when changing imports on my .js files. For some reason, sometimes a content that should not be put on the final bundle is prepended to it instead.
How to reproduce:
- clone the following sample repository:
git clone https://github.com/juniorgarcia/rollup-postcss-rebuild-error
- install deps:
npm install
- open the project on VSCode or any other
- start the dev mode:
npm run dev
- open the files
src/index.js
anddist/bundle.css
and put them side by side - on
src/index.js
, uncomment// import './foo.css'
(here everything works as expected) - now comment
// import './foo.css'
again - the content of
bundle.css
is now generated wrongly:
body {
z-index: 2; /* this line is from `foo.css` which is prepended to the bundle.css instead of being removed */
}
@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
body {
z-index: 1;
}
I started to realize this when using Linaria in my stack. After thinking that Linaria plugins was causing this, I tried the simplest stack possible without anything other than PostCSS plugin and the erro persists.
My rollup.config.js:
const postcss = require('rollup-plugin-postcss')
const path = require('path')
/** @type {import('rollup').RollupOptions} */
module.exports = {
input: './src/index.js',
output: [
{
file: './dist/bundle.js',
format: 'cjs',
},
],
plugins: [
postcss({
extract: path.resolve(__dirname, 'dist/bundle.css'),
})
]
}
My package.json:
{
"name": "postcss-rollup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "rollup -c rollup.config.js -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"postcss": "^8.4.24",
"rollup": "^3.24.0",
"rollup-plugin-postcss": "^4.0.2"
}
}
System information: Node: v18.15.0 NPM: v9.6.2 OS: macOS Ventura 13.3.1 (a)