menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Parcel

📦🚀 Blazing fast, zero configuration web application bundler

Channels
Team

Static CSS-in-JS extraction - Help with Parcel2 plugin

August 20, 2019 at 10:27pm

Static CSS-in-JS extraction - Help with Parcel2 plugin

August 20, 2019 at 10:27pm
How can this be done in a Parcel 2 plugin? I have it sort of working here in Parcel 1, but it doesn't work entirely. If CSS is set to final: true, things work but the CSS is not processed by PostCSS. If the CSS is not set to final, the CSS is correctly processed but the JS does not make it into the bundle. It is not clear how to transform this into a Parcel 2 Transformer plugin as there is no documentation on what the type of the asset parameter is. I essentially need to transform the code before the normal babel transform and add the extracted CSS as a dependency to be further processed.
Any pointers and clarifications would be appreciated.

August 26, 2019 at 6:11pm
You would create a transformer that processes JS assets (and will indeed run before the default transformers). The default HTML transformer will soon support inline JS and CSS, I think that will be quite similar to your situation
yes. I have the transformer that processes the JS file. But my issue is that if this transformer adds extracted CSS as a dependency, Parcel 2 excludes the JS is the bundle. The only way I can get the JS to be included is to set final: true on the CSS, but then it is not sent through PostCSS.
Edited
updated my comment to make it more clear.