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