How the CSS works on hazelweakly.me

css-crimes-eleventy.md

But yeah, how the css works in my site:

https://github.com/hazelweakly/hazelweakly.me/blob/main/tailwind.config.js#L25

^-- This is the tailwind config and does some fun stuff in there to use like utopia "natively" in tailwind classes, n such.

https://github.com/hazelweakly/hazelweakly.me/blob/main/postcss.config.js#L17

^-- This configures all the CSS purging, minimizing, bundling, bla bla. Mostly so that you can put your entire design token setup and component lib into the site and only pay for what you use.

• https://github.com/hazelweakly/hazelweakly.me/blob/main/src/css/index.css

^-- This is the "main" css file. You'll notice all your favorite goodies and CUBE css here :) Import globs were funsies to debug, oi. You'll also notice I import a non-existant css file. Here's where the deranged bullshit starts.

• https://github.com/hazelweakly/hazelweakly.me/blob/main/src/_meta/transforms.js#L35
• https://github.com/hazelweakly/hazelweakly.me/blob/main/src/theme.njk

^-- This is where the build-step magic happens.

1. generateCSS runs before the rest of the eleventy build stuff via a "before" hook in the eleventy config.
2. generateCSS grabs the tailwind config and generates css custom props from it (I apparently lost the attribute of that wtf 😭)
3. Now custom-props.css exists. "theme.css" is a permalink from the theme.njk file, which runs postcss via a filter
4. Said filter "just" loads postcss manually and then processes the CSS file from src/css/index.css

critical-css and minifyhtml are used, pretty similar to the web.dev site (a lot of this is inspired from that, too)

One thing I'm particularly proud of, is I setup eleventy-helmet so that I can include one-off scripts n such in the page and have it in the head properly. But I ALSO do this fun and cursed thing where I transform the HTML.

https://github.com/hazelweakly/hazelweakly.me/blob/main/src/_meta/transforms.js#L121

What this a does is it takes every instance of italics, bold, and monospace, and then prepends a link right before that part. But since helmet is running, it deduplicates the link and dumps it into the head instead of keeping it in the body. The net result is that per-page fonts are only loaded if I use that font.

And because of how this works, I can do something really cool where if there's no italic on the page other than my footer with a copywrite on it, I just use the subsetted font that's super minimal. However, that script preload gets automatically overwritten by "load the full italic font" if there is any other italics on the page.