rollup-plugin-postcss icon indicating copy to clipboard operation
rollup-plugin-postcss copied to clipboard

On watch mode generated CSS sometimes is prepended when using multiple CSS files

Open juniorgarcia opened this issue 1 year ago • 0 comments

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:

  1. clone the following sample repository: git clone https://github.com/juniorgarcia/rollup-postcss-rebuild-error
  2. install deps: npm install
  3. open the project on VSCode or any other
  4. start the dev mode: npm run dev
  5. open the files src/index.js and dist/bundle.css and put them side by side
  6. on src/index.js, uncomment // import './foo.css' (here everything works as expected)
  7. now comment // import './foo.css' again
  8. 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)

juniorgarcia avatar Jun 08 '23 16:06 juniorgarcia