logo for Parcel 2
Programming

Parcel 2 – Inline CSS/JS

I’ve been tinkering with Parcel for a small mostly static html project recently, and I spent quite a bit of time trying to chase down how to inline the main CSS file into the final html page.

Parcel is a bundler for JS/CSS/HTML. It’s is really cool, and I found, mostly easier to grok than Webpack.

Parcel v2 is a bit more complicated than the original, with more config, which was one of the first stumbling points I ran into. There are a couple of plugins for PostHTML and Parcel v1 that would inline a tag to the page, but I wanted/needed Parcel v2 for PostCSS v8 support and TailwindCSS v2. I started an attempt to build my own plugin to do this, but found that it was more complicated than I wanted. For example, in Parcel v1, you just installed various plugins and you didn’t have to do anything for them to work. I had to extend the default config to get my plugin to load (and maybe this can be done in the plugin, I never got that far). I was having to spend way too much time in the internals sorting out how things work, for what I felt like was a pretty simple feature.

After some more searching around I finally found this issue for a new feature in Parcel 2, supporting @import statements in <style> and <script> tags in HTML documents. No plugins or post processing needed!

So I went from:

<link rel="stylesheet" href="./css/styles.css" />

To:

<style>
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./css/main.css";
@import "tailwindcss/utilities";
</style>

Which got me to the final result I was hoping for. You can check out the results in the most recent update to my consulting site: nullvariable.com

Thanks for reading!

Posted: 12 days ago

Updated: 7 hours ago