Ideally, we’d just offer @parcel/css as a CSS processor choice right in our editors. We could absolutely do that, but we’re smack in the middle of a bunch of next-gen CodePen stuff, and we’re keeping our efforts focused there. Never fear, interesting new processors like this will be there along with it. But this CSS processor caught my eye especially because it’s a very fresh, modern, and interesting take on CSS processing. It handles vendor prefixing on its own (something you might otherwise use Autoprefixer for), it handles “syntax lowering” (love that term) for future-syntax CSS (like you’d use postcss-preset-env for), offers scoping, and even has its own built-in minifier, while being super fast. Nice!
So what if you do wanna try it on CodePen? Well, it’s actually possible because they have cleverly released the processor with a Wasm option, not just a backend-language-only thing. So here’s the plan:
- Load the processor in the browser as a script (go Wasm go!)
- Pull the CSS from the current Pen
- Pass that CSS to the in-browser processor we just loaded
- Get the transformed CSS
- Replace the CSS in the preview with the transformed CSS
Check it:
The post One Weird Trick to Try @parcel/css on CodePen appeared first on CodePen Blog.