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

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

Closed
markdalgleish opened this issue Nov 21, 2022 · 2 comments
Closed

Comments

@markdalgleish
Copy link

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
Copy link
Owner

evanw commented Nov 21, 2022

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
Copy link
Owner

evanw commented Dec 3, 2022

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.

@evanw evanw closed this as completed Dec 3, 2022
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

2 participants