rollup-plugin-styles
rollup-plugin-styles copied to clipboard
Processing source as-is, without extraction/injection
With the latest postcss, it is possible (and quickly becoming common) to use a custom syntax to parse non-css files.
This means via the postcss cli and other "pure" integrations (source -> postcss -> output), it is as simple as executing postcss against your JS/TS sources in order to mutate the CSS contained within them.
Unfortunately, @rollup/plugin-postcss
is tied to the concept of "extraction" and "injection" (i.e. pulling CSS out and placing it elsewhere in the resulting bundle). As far as I can see, rollup-plugin-styles has gone down the same path.
Is there no way to tell this plugin "pass the sources through postcss and use the output"? For css-in-js syntaxes, we do not want any extraction or injection of style tags. We simply want to process our sources with postcss as-is.
The postcss webpack plugin does exactly this, and a separate plugin is then used if you want to split that CSS out into a separate file. It would be great if you could separate those concerns better here too.
If there's already a way, please do let me know
Hello @43081j,
Maybe what you are looking for is emitting CSS down the pipeline, which is already a part of this plugin.
For example using this plugin in conjunction with rollup-plugin-litcss, similar to what the README has as an example for turns these files into this.
Please let me know if this is what you were looking for or not.
i think that works in the example because the files are still separate, i.e. they are CSS files being processed.
i had no idea about the emit
mode though, so thats a step in the right direction i think.
i gave it a go, and got caught by this:
https://github.com/Anidetrix/rollup-plugin-styles/blob/46b73e65ecc2c672bed317c1011ed50322c8c07b/src/index.ts#L78-L81
our sources will be JS initially, but haven't yet been processed. so this check will always prevent us from passing it through postcss it seems
@Anidetrix could you possibly find time to take a look at this?
a fair amount of people are trying to use new postcss syntaxes with vite, which won't work since they use either this or rollup-plugin-postcss
. if you can help me fix this, they can at least tell vite to use this plugin instead and things will work
@Anidetrix any progress/insights regarding this problem yet? We would really appreciate some kind of solution because we are kind of stuck atm unfortunately.