Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
juniorgarcia opened this issue Jun 8, 2023 · 0 comments

Comments

@juniorgarcia
Copy link

juniorgarcia commented Jun 8, 2023

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant