Closed tadhglewis closed 6 months ago
I don't see any reasons to load initial CSS using javascript, you will get only extra code, worse perf, style flashing, if you want to load CSS in async way you can use import(...)
, so what is the point?
@alexander-akait For context
import('main.css')
as the styles aren't expose and instead they come from our design system which uses a css-in-js approachI understand for a traditional web app where you control everything you definitely should load the initial css and js at the same time rather than what I'm proposing here - we do this for our other products where we control the host.
However in instances where you don't control the host/html where your JS is loading, I think there's an argument to be made that JS should load it's CSS.
Sorry, I don't want to change it, it is not good to change initial to async, it breaks a lot of things than you think, you can find the same questions here using search, if you want to be async, please write async code, changing the semantic is the worst idea, if you logic is very specific and you still want it (and you know what you do), you can fork a plugin and apply your changes, also you can disable runtime
generation (we have an option for this) and load CSS as you want
Fair enough, I had a feeling it might not be a common enough use case to fit within mini-css-extract-plugin
officially however I was thinking this could be more an option rather than a fundamental change in the package🤷
Awesome work on this package by the way, super useful ❤️
Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!
Regression? Isn't this a design decision?
It is a design solution for mini-css-extract-plugn, anyway we are working on built-in CSS support inside webpack https://github.com/webpack/webpack/pull/18126, and we will support it
Modification Proposal
In the readme
From my understanding, this is explicitly not supported because you'd expect the consumer to use
html-webpack-plugin
so that the main.js and main.css file requests load at the same time - instead of having to load and run the JS which then requests it's own CSS.Our use case is relatively unique where we're compiling a single JS file for use on 3rd party systems. For simplicity sakes, we want the JS file to load it's own CSS instead of the 3rd party company having to include a css tag as well as the js tag.
Expected Behavior / Situation
Initial chunk css is loaded by the JS - or at least an option/toggle is provided to enable this behaviour
Actual Behavior / Situation
Only async / non-initial chunk css is loaded
Workaround
We're currently using pnpm to patch mini-css-extract-plugin
"Object.keys(installedCssChunks).forEach(id => loadStylesheet(id))"
asinstalledCssChunks
defaults to the initial chunks as they're assumed to be loaded by the htmlThis isn't super elegant so in the long term, support for this would be much appreciated - or if you had other suggestions on how can accomplish this.