-
-
Notifications
You must be signed in to change notification settings - Fork 66
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
Question about CSS modules #219
Comments
I started an experiment that was just like this a while back, but I never took it any further. I'd be super interested in getting CSS modules supported in Ultra. I'd be interested to see this esbuild plugin, and how they implemented it. |
I know you are referencing the prior implementation of CSS modules, but there is work being done in native-land as well, which I am incredibly excited for... |
Unfortunately would still have to wait for Safari to support it https://caniuse.com/mdn-api_document_adoptedstylesheets |
I would say that an approach which is as 'native' as possible to scoping styles to es components is preferable. In reflecting on the problem that css modules attempts to solve, I would not say that the standard approaches to css module plugins (inject an object as a map of original to hashed classes in the module scope and then transforming the css files in a separate pass) are necessarily the most pleasing, particularly with the fake I was thinking of making an esbuild plugin that would use of css module script style imports, which would hopefully get better support over time, and then, as a fallback depending on support in targeted browsers, inject the css string as a constructed stylesheet. I might have to wait esbuild to re-release the json equivalent, though. What are your thoughts on 2 different approaches to appending a hash to classes etc:
|
Did you see this is currently in Safari TP? |
First off, I think I really like Ultra so thanks a bunch for making it!
I was wondering whether there was guidance or plans or thoughts regarding CSS modules?
The handrolled solution for “server with streaming bundling / compilation of SSR Preact” I am involved with uses a custom esbuild plugin for LightningCSS. This allows the initial SSR view to ship only the CSS which is used for that view and to do:
const classes = cssModule(new URL('./card.module.css', import.meta.url))
wherecssModule
is the helper function,<div class={classes.card}>
to output<div class="jPBP8W_card">
. Thecard.module.css
file lives next to thecard.tsx
file.I feel like this is a fast and powerful solution which has pretty good ergonomics.
The text was updated successfully, but these errors were encountered: