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:

rollup-plugin-styles/src/index.ts

Lines 78 to 81 in 46b73e6

    
           try { 
        
             this.parse(code, {}); // If it doesn't throw... 
        
             this.warn(`Skipping processed file ${humanlizePath(id)}`); 
        
             return null;

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.

	try {
	this.parse(code, {}); // If it doesn't throw...
	this.warn(`Skipping processed file ${humanlizePath(id)}`);
	return null;