New CSS pipeline based on @parcel/css #7538
Conversation
|
|
Great work 🎉 I am really looking forward to the release of parcel-bundler with more speedy CSS processing 😍 .
Is this “a new transformer plugin” is FYI: vercel/next.js#27664
IMHO, Since a user can also use user-specific plugins in the I love both |
|
@Shinyaigeek thanks for the feedback!
Right. This way, you can opt in by making a {
"extends": "@parcel/config-default",
"transformers": {
"*.css": ["@parcel/transformer-css2"] // or prepend @parcel/transformer-postcss if still needed
},
"optimizers": {
"*.css": ["@parcel/optimizer-css"]
}
}It's not the most ideal though because you'd need to change your config again once
A CLI flag is a bit more complex because it requires a change to Parcel core, when really this is only changing plugins. I thought of using an environment variable also, but that's a bit annoying. Not sure... |
|
Ok, renamed it to |
| @@ -3971,7 +3971,7 @@ describe('cache', function () { | |||
| let pluginContents = await overlayFS.readFile(plugin, 'utf8'); | |||
| await overlayFS.writeFile( | |||
| plugin, | |||
| pluginContents.replace('green', 'blue'), | |||
There was a problem hiding this comment.
@parcel/css prints this as #00f, so had to change the color to something that prints the same in both transformers
Benchmark ResultsKitchen Sink ✅
Timings
Cold Bundles
Cached BundlesNo bundle changes detected. React HackerNews ✅
Timings
Cold BundlesNo bundle changes detected. Cached BundlesNo bundle changes detected. AtlasKit Editor ✅
Timings
Cold BundlesNo bundle changes detected. Cached BundlesNo bundle changes detected. Three.js ✅
Timings
Cold BundlesNo bundle changes detected. Cached BundlesNo bundle changes detected. |
| @@ -58,7 +58,11 @@ export default (new Packager({ | |||
|
|
|||
| queue.add(() => { | |||
| // This condition needs to align with the one in Transformation#runPipeline ! | |||
There was a problem hiding this comment.
This condition needs to align with the one in Transformation#runPipeline
Probably not anymore with that change?
This replaces most of the CSS pipeline with a new version based on @parcel/css. In particular, CSS modules, dependency analysis, auto prefixing, preset-env style transpilation, tree shaking, and minification are handled. PostCSS can still be used to handle custom plugins etc. if needed.
It's mostly working, but we still need to determine is the exact rollout plan for this so we don't break existing setups. A few notes:
@parcel/transformer-cssbut ideally it would replace it if we determine the new version is stable enough. We could release them separately at first and let people opt in, or we could just go for it. I'm not sure...@parcel/css. In particular,@valueand the non-function:global/:localselector syntax. Otherwise, CSS modules are handled by the new transformer. If we want an interim rollout plan where the two CSS transformers exist separately for now, then we'll need to roll this back or have some other way to ensure that CSS modules still work in the meantime even without the new transformer.Please let me know your thoughts on the above questions!