Description
The Webpack configuration uses style-loader for CSS in development mode and MiniCssExtractPlugin.loader in production. These two loaders inject CSS into the page through fundamentally different mechanisms:
style-loader (dev): injects CSS as individual <style> elements into the DOM at runtime, one per import. Insertion order depends on JS module evaluation order.MiniCssExtractPlugin (prod): extracts and concatenates all CSS into a single .css file at build time, with order resolved statically from the module graph.
The different injection mechanisms can produce different source order for the same CSS rules. Since CSS cascade resolution depends on source order when specificity is equal, this means styling can resolve differently between dev and prod builds.
This is especially problematic with Tailwind v4's @layer directives: layer ordering is sensitive to how styles are inserted into the document, and inline <style> tags vs. a concatenated file can produce different layer resolution.
Additionally, the external CSS rule (exclude: frontend/src) always uses style-loader (even in production)meaning third-party CSS is never extracted to a file and is always injected via JS at runtime.
Impact
- Developers can introduce or miss UI bugs that only manifest in production because the CSS cascade resolves differently.
- Third-party CSS is never extracted in production, adding unnecessary JS bundle overhead and delaying paint.
Epic/Story
No response
Have you provided an initial effort estimate for this issue?
I have provided an initial effort estimate
Description
The Webpack configuration uses
style-loaderfor CSS in development mode andMiniCssExtractPlugin.loaderin production. These two loaders inject CSS into the page through fundamentally different mechanisms:style-loader(dev): injects CSS as individual<style>elements into the DOM at runtime, one per import. Insertion order depends on JS module evaluation order.MiniCssExtractPlugin(prod): extracts and concatenates all CSS into a single.cssfile at build time, with order resolved statically from the module graph.The different injection mechanisms can produce different source order for the same CSS rules. Since CSS cascade resolution depends on source order when specificity is equal, this means styling can resolve differently between dev and prod builds.
This is especially problematic with Tailwind v4's
@layerdirectives: layer ordering is sensitive to how styles are inserted into the document, and inline<style>tags vs. a concatenated file can produce different layer resolution.Additionally, the external CSS rule (
exclude: frontend/src) always usesstyle-loader(even in production)meaning third-party CSS is never extracted to a file and is always injected via JS at runtime.Impact
Epic/Story
No response
Have you provided an initial effort estimate for this issue?
I have provided an initial effort estimate