https://github.com/thoughtspile/mini-css-extract-plugin-order-repro

https://github.com/thoughtspile/mini-css-extract-plugin-order-repro

Last synced: 2 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/thoughtspile/mini-css-extract-plugin-order-repro
• Owner: thoughtspile
• Created: 2021-09-29T14:52:52.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-09-29T18:24:52.000Z (over 3 years ago)
• Last Synced: 2024-11-15T15:21:09.500Z (2 months ago)
• Language: JavaScript
• Size: 1.95 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
This repo reproduces mini-css-extract-plugin import ordering issue.

- `repro` is a fake node_module — it has a `package.json` with `"sideEffects": "*.css"`.

- `repro` exports 2 React components:

    - `Text` is `
`, `.Text` is black

    - `RedText` imports `Text` and passes ``, and `.RedText` overrides

- I expect the CSS bundle to be in depth-first order: `.Text { color: black } .RedText { color: red }`

- The CSS bundle is `.RedText { color: red } .Text { color: black }` instead.


To reproduce yourself:

- `yarn install`

- `yarn reproduce`

The issue magically disappears if I remove `sideEffects` from `repro`'s `package.json` (but not by setting it to `[]`, `["*.js"]` (anything not matching css) or `false`)

Adding an explicit `import '../Text/Text.css';` in `RedText.js` also does the trick.