Feature request: Optionally create single CSS file for all entry points

[markdalgleish]

Currently I'm able to generate a separate CSS file per entry point, but the tradeoff with esbuild's current approach is that any common styles are duplicated across these files. I'm looking into adding CSS Modules support to Remix and this tradeoff isn't great in our context because it would mean that navigating between routes would download the same common styles repeatedly.

Instead, I'm wondering if it would be possible to optionally generate a single CSS file for the entire build, regardless of the number of entry points.

[evanw]

Bundling several CSS files together with esbuild is pretty straightforward. You can create a file with one @import rule for each CSS file you want to bundle and then invoke esbuild with that CSS file as the entry point to bundle them all together. You could do this as a post-process after the initial JavaScript build.

Unfortunately esbuild's minifySyntax: true setting currently only removes duplicate rules within a single source file but not across multiple source files in the same bundle. I just added cross-file duplicate rule removal to esbuild, which will be part of the next release. With that, maybe using esbuild's CSS bundler for this with syntax minification on would work?

Keep in mind that import order is really weird in CSS. Imports do not work like they do in JavaScript where importing a JavaScript file twice only imports it the first time. Instead, importing a CSS file twice only imports it the last time, which means subsequent imports can reset overrides that were added over previous imports (details are in the link). I think in this situation you'd probably be expecting JavaScript-style imports, but that's not how CSS works.

[evanw]

Removal of duplicate rules across input files was released in version 0.15.15 so it should now be possible to use esbuild to merge (bundle) multiple CSS files into a single CSS file, as described above. You can control the ordering of those files in the bundled CSS file by controlling the order of the generated @import rules. Closing this issue as fixed.