Replies: 2 comments
-
@danlaush were you able to resolve this? and can you share your rollup config? |
Beta Was this translation helpful? Give feedback.
0 replies
-
I'm trying to solve a similar problem and am coming up short on ideas as well. @danlaush do you mind sharing the direction you ended up going? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello and thanks for the great plugin. I have a question about whether something is possible or if you have suggestions for how to get where I'm trying to go. If there's a better venue for asking than Issues or think this is outside the scope of the plugin feel free to close this one.
In an ESM rollup config with multiple inputs, can I extract styles to one CSS file per input?
I have a library of React components. I use multiple inputs in my rollup config to specify the top-level exports, and they generate an ESM build so shared sub-components can be re-used.
I'd like to make it easy for library consumers to get all the required CSS for one of the top-level exports. Consumers
import { oneComponent } from 'mylibrary'
to get a tree-shakeable JS module, so they should be able toimport 'mylibrary/dist/oneComponent.css'
and get everything they need to display it.I configured
rollup-plugin-styles
withextract: true
, which generatesoneComponent.css
.The challenge is that sub-components have their styles extracted in standalone CSS files with hashed filenames.
Now if a library consumer wants
oneComponent
to display correctly, they need to import 2 CSS files (and the shared component's CSS filename will likely change in the future). Even if the hash is removed, as the component's complexity grows it's not a good solution for consumers to have to know all the right sub-component style files to import themselves.I can see that that I can set
mode
with a filename like['extract', 'totalBundle.css']
but this doesn't seem to work with multiple imports. Should I be able to say ``['extract', '[name].css']`? I tried that with no luck.Is my wish fundamentally at odds with ES Modules? As I write this, I realise my request sounds a lot like a UMD bundle—"make a big blob that's able to handle itself completely". It's just tricky with CSS (and maybe doubly so with CSS Modules) because they don't import their own dependencies like an ESM JS file will.
Again, thanks for the plugin and appreciate your thoughts.
Beta Was this translation helpful? Give feedback.
All reactions