From 788ef1dc8d945851daa69eafa50694943ddc5adb Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@noreply.git.cloud.haska.me>
Date: Wed, 28 May 2025 17:00:37 -0700
Subject: [PATCH] feat: update entire css pipeline

The goal of this change was to speed up my CSS pipeline. Previously
builds would take up to 30s because it had to rebuild the CSS for every
page (I inlined the CSS).

This updates the pipeline to remain somewhat the same, but offloads the
busywork of computing my theme CSS (my design system in other words),
and is replaced by a mostly static file (`css/global/lilypad.css`),
which I can update as my design system changes.

I also offloaded several of my utility classes as I know I will want to
use them in other sites I design, so it made sense to move them as well.

The new pipeline makes use of 11ty's bundle feature (newly included in
11ty v3), which allows me to bundle all my CSS together into one file.
Since I know my core styles like `lilypad.css` will always remain the
same, I decided to keep that inline. I use the `transforms` feature for
bundling to run a PostCSS transform on the bundled output, which
resolves any imports and minifies the final output.

In order to cut down my build times even further, I removed my XML
minifier - it was taking upwards of 3 seconds to minify XML to probably
a small benefit to end users.
---
 config/bundles/css.js                         | 13 +++++
 config/bundles/index.js                       |  5 ++
 config/design-tokens/colors.js                | 22 -------
 config/design-tokens/spacing.js               | 11 ----
 config/filters/index.js                       |  2 -
 config/filters/postcss/index.js               |  5 --
 config/filters/postcss/postcss.js             | 32 ----------
 config/filters/postcss/utils/colors.js        | 34 -----------
 config/filters/postcss/utils/font-family.js   | 58 -------------------
 .../filters/postcss/utils/font-variables.js   | 57 ------------------
 .../filters/postcss/utils/helper-classes.js   | 43 --------------
 config/filters/postcss/utils/spacing.js       | 51 ----------------
 config/transforms/index.js                    |  3 +-
 config/transforms/xml-config.js               | 12 ----
 eleventy.config.js                            |  9 ++-
 package.json                                  |  2 -
 src/includes/css/global/lilypad.css           |  1 +
 src/includes/css/styles.css                   | 22 +++++--
 src/includes/css/utilities/flex.css           | 32 ----------
 src/includes/css/utilities/flow.css           |  8 ---
 src/includes/css/utilities/fonts.css          | 20 -------
 src/includes/css/utilities/list.css           | 11 ----
 .../css/utilities/visually-hidden.css         | 15 -----
 src/includes/layouts/base.html                | 25 ++++----
 24 files changed, 57 insertions(+), 436 deletions(-)
 create mode 100644 config/bundles/css.js
 create mode 100644 config/bundles/index.js
 delete mode 100644 config/design-tokens/colors.js
 delete mode 100644 config/design-tokens/spacing.js
 delete mode 100644 config/filters/postcss/index.js
 delete mode 100644 config/filters/postcss/postcss.js
 delete mode 100644 config/filters/postcss/utils/colors.js
 delete mode 100644 config/filters/postcss/utils/font-family.js
 delete mode 100644 config/filters/postcss/utils/font-variables.js
 delete mode 100644 config/filters/postcss/utils/helper-classes.js
 delete mode 100644 config/filters/postcss/utils/spacing.js
 delete mode 100644 config/transforms/xml-config.js
 create mode 100644 src/includes/css/global/lilypad.css
 delete mode 100644 src/includes/css/utilities/flex.css
 delete mode 100644 src/includes/css/utilities/flow.css
 delete mode 100644 src/includes/css/utilities/list.css
 delete mode 100644 src/includes/css/utilities/visually-hidden.css

diff --git a/config/bundles/css.js b/config/bundles/css.js
new file mode 100644
index 0000000..a4ced20
--- /dev/null
+++ b/config/bundles/css.js
@@ -0,0 +1,13 @@
+import postcss from "postcss";
+import postcssImport from "postcss-import";
+
+export default {
+  transforms: [
+    async function (content) {
+      const css = await postcss([postcssImport])
+        .process(content, { from: "src/includes/css/styles.css" })
+        .then((result) => result.css);
+      return css;
+    },
+  ],
+};
diff --git a/config/bundles/index.js b/config/bundles/index.js
new file mode 100644
index 0000000..8367564
--- /dev/null
+++ b/config/bundles/index.js
@@ -0,0 +1,5 @@
+import css from "./css.js";
+
+export default {
+  css,
+};
diff --git a/config/design-tokens/colors.js b/config/design-tokens/colors.js
deleted file mode 100644
index 73e0695..0000000
--- a/config/design-tokens/colors.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
-  light: {
-    primary: "oklch(0.6 0.1025 212.16)",
-    secondary: "oklch(0.61 0.2232 31.48)",
-    background: "oklch(0.98 0 0)",
-    surface: "oklch(0.96 0.0078 207.9)",
-    border: "oklch(0.87 0.045077 207.8465)",
-    text: "oklch(0.15 0 0)",
-    fadeText: "oklch(0.45 0.0214 207.84)",
-    shadow: "oklch(0.39 0.0688 212.35)",
-  },
-  dark: {
-    primary: "oklch(0.57 0.0991 213.4)",
-    secondary: "oklch(0.55 0.1982 31.52)",
-    background: "oklch(0.2 0 0)",
-    surface: "oklch(0.26 0.0106 233.21)",
-    border: "oklch(0.27 0.0238 245.26)",
-    text: "oklch(0.98 0 0)",
-    fadeText: "oklch(0.78 0.018 207.85)",
-    shadow: "oklch(0.39 0.0688 212.35)",
-  },
-};
diff --git a/config/design-tokens/spacing.js b/config/design-tokens/spacing.js
deleted file mode 100644
index 13f8dbe..0000000
--- a/config/design-tokens/spacing.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  0: 0,
-  0.25: 4,
-  0.5: 8,
-  1: 16,
-  1.5: 24,
-  2: 32,
-  3: 48,
-  4: 64,
-  5: 80,
-};
diff --git a/config/filters/index.js b/config/filters/index.js
index c1f2b3b..d8da84b 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -2,7 +2,6 @@ import collection from "./collection.js";
 import date from "./date.js";
 import feed from "./feed.js";
 import general from "./general.js";
-import postcss from "./postcss/index.js";
 import tag from "./tag.js";
 
 export default {
@@ -10,6 +9,5 @@ export default {
   ...date,
   ...feed,
   ...general,
-  ...postcss,
   ...tag,
 };
diff --git a/config/filters/postcss/index.js b/config/filters/postcss/index.js
deleted file mode 100644
index 92051d3..0000000
--- a/config/filters/postcss/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import postcss from "./postcss.js";
-
-export default {
-  ...postcss,
-};
diff --git a/config/filters/postcss/postcss.js b/config/filters/postcss/postcss.js
deleted file mode 100644
index 0fc1a6f..0000000
--- a/config/filters/postcss/postcss.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Implementation sourced from eleventyone starter kit
- * https://github.com/philhawksworth/eleventyone
- * ---
- * https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
- */
-import { default as postcssBase } from "postcss";
-import postcssImport from "postcss-import";
-import postcssImportExtGlob from "postcss-import-ext-glob";
-import autoprefixer from "autoprefixer";
-import cssnano from "cssnano";
-
-import colors from "./utils/colors.js";
-import fontFamily from "./utils/font-family.js";
-import fontVariables from "./utils/font-variables.js";
-import spacing from "./utils/spacing.js";
-
-const postcss = async (rawCss) => {
-  const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
-  return await postcssBase([
-    postcssImportExtGlob,
-    postcssImport,
-    autoprefixer,
-    cssnano,
-  ])
-    .process(css, { from: "src/includes/css/styles.css" })
-    .then((result) => result.css);
-};
-
-export default {
-  postcss,
-};
diff --git a/config/filters/postcss/utils/colors.js b/config/filters/postcss/utils/colors.js
deleted file mode 100644
index 2383db2..0000000
--- a/config/filters/postcss/utils/colors.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import colorSchemes from "../../../design-tokens/colors.js";
-import { helperClassesToCss } from "./helper-classes.js";
-
-const lightScheme = colorSchemes.light;
-const darkScheme = colorSchemes.dark;
-
-const colorToCss = (key, value) => `--color-${key}: ${value};`;
-
-const colorSchemeToCss = (scheme) =>
-  Object.entries(scheme).reduce(
-    (css, [key, value]) => css + colorToCss(key, value),
-    ``,
-  );
-
-const lightCss = colorSchemeToCss(lightScheme);
-const darkCss = colorSchemeToCss(darkScheme);
-
-const colorSchemeToHelperClassesCss = (scheme, helperClasses) => {
-  return Object.entries(scheme).reduce((css, [key]) => {
-    return css + helperClassesToCss(helperClasses, key, `var(--color-${key})`);
-  }, ``);
-};
-
-const helperClasses = [
-  ["text", ["color"]],
-  ["bg", ["background-color"]],
-];
-
-const helperClassesCss = colorSchemeToHelperClassesCss(
-  lightScheme,
-  helperClasses,
-);
-
-export default `:root{${lightCss}}${helperClassesCss}@media (prefers-color-scheme: dark) {:root{${darkCss}}}`;
diff --git a/config/filters/postcss/utils/font-family.js b/config/filters/postcss/utils/font-family.js
deleted file mode 100644
index 4facde2..0000000
--- a/config/filters/postcss/utils/font-family.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import path from "path";
-
-import fonts from "../../../design-tokens/fonts.js";
-
-const getFontUrl = (src) => path.join("/assets/fonts", src);
-
-const fontsToCss = (fonts) => {
-  return Object.entries(fonts).reduce((css, [, fontProperties]) => {
-    const family = fontProperties.family;
-    const format = fontProperties.format;
-    const styles = fontProperties.styles;
-
-    return (
-      css +
-      Object.entries(styles).reduce((css, [variant, fontFamily]) => {
-        const url = getFontUrl(fontFamily.path);
-        const style = fontFamily.fontStyle;
-        const weight = fontFamily.fontWeight;
-        const stretch = fontFamily.fontStretch;
-        const postScriptName = [family, variant].join("-").replaceAll(" ", "");
-
-        return (
-          css +
-          fontFamilyToCss(
-            family,
-            style,
-            weight,
-            stretch,
-            url,
-            family,
-            postScriptName,
-            format,
-          )
-        );
-      }, ``)
-    );
-  }, ``);
-};
-
-const fontFamilyToCss = (
-  family,
-  style,
-  weight,
-  stretch,
-  url,
-  localName,
-  postScriptName,
-  format,
-) => `@font-face {
-    font-family: ${family};
-    font-style: ${style};
-    font-weight: ${weight};
-    font-stretch: ${stretch};
-    font-display: swap;
-    src: local("${localName}"), local("${postScriptName}"), url("${url}") format("${format}")
-}\n`;
-
-export default fontsToCss(fonts);
diff --git a/config/filters/postcss/utils/font-variables.js b/config/filters/postcss/utils/font-variables.js
deleted file mode 100644
index fcb3586..0000000
--- a/config/filters/postcss/utils/font-variables.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * Fallbacks from Modern Font Stacks.
- * https://modernfontstacks.com/
- */
-
-import fonts from "../../../design-tokens/fonts.js";
-
-const displayFallbacks = [
-  "ui-monospace",
-  "Cascadia Code",
-  "Source Code Pro",
-  "Menlo",
-  "Consolas",
-  "DejaVu Sans Mono",
-  "monospace",
-];
-
-const bodyFallbacks = [
-  "ui-monospace",
-  "Cascadia Code",
-  "Source Code Pro",
-  "Menlo",
-  "Consolas",
-  "DejaVu Sans Mono",
-  "monospace",
-];
-
-const monoFallbacks = [
-  "ui-monospace",
-  "Cascadia Code",
-  "Source Code Pro",
-  "Menlo",
-  "Consolas",
-  "DejaVu Sans Mono",
-  "monospace",
-];
-
-const fallbacks = {
-  display: displayFallbacks,
-  body: bodyFallbacks,
-  monospace: monoFallbacks,
-};
-
-const fontsToCss = (fonts) => {
-  return Object.entries(fonts).reduce((css, [fontType, fontProperties]) => {
-    const family = fontProperties.family;
-
-    const fontTypeCss = fontFamilyToCss(fontType, family);
-
-    return css + fontTypeCss;
-  }, ``);
-};
-
-const fontFamilyToCss = (type, value) =>
-  `--font-family-${type}: ${value},${fallbacks[type].join(",")};`;
-
-export default `:root{${fontsToCss(fonts)}}`;
diff --git a/config/filters/postcss/utils/helper-classes.js b/config/filters/postcss/utils/helper-classes.js
deleted file mode 100644
index 08871ad..0000000
--- a/config/filters/postcss/utils/helper-classes.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Given an array of CSS properties, output css properties
- * with each property equal to `value`
- */
-export const cssPropertiesToCss = (cssProperties, value) => {
-  return cssProperties.reduce((css, cssProp) => {
-    return css + `${cssProp}:${value};`;
-  }, ``);
-};
-
-/**
- * Given a helperClass (string) and array of cssProperties,
- * will generate a css class named helperClass that has
- * all cssProperties mapped to value.
- */
-export const helperClassToCss = (helperClass, cssProperties, value) => {
-  const cssProps = cssPropertiesToCss(cssProperties, value);
-  return `.${helperClass}{${cssProps}}`;
-};
-
-/**
- * Given an array of helperClasses that map to cssProperties,
- * output a string of CSS that maps the helperClass (with variant modifier)
- * to the array of css properties with each css property equal to
- * value
- *
- * e.g.
- * helperClasses = [["text", ["color"]]],
- * variant = "primary",
- * value = "#000"
- *
- * Will output the following:
- * .text-primary {
- *    color: #000;
- * }
- */
-export const helperClassesToCss = (helperClasses, variant, value) => {
-  return helperClasses.reduce((css, [helperClass, cssProperties]) => {
-    return (
-      css + helperClassToCss(`${helperClass}-${variant}`, cssProperties, value)
-    );
-  }, ``);
-};
diff --git a/config/filters/postcss/utils/spacing.js b/config/filters/postcss/utils/spacing.js
deleted file mode 100644
index 22ae220..0000000
--- a/config/filters/postcss/utils/spacing.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import spacing from "../../../design-tokens/spacing.js";
-import { helperClassesToCss } from "./helper-classes.js";
-
-const spacingToCss = (variant, value) =>
-  `--spacing-${variant.replace(".", "\\.")}: ${value}px;`;
-
-const spacingToHelperClassesCss = (spacingValues, helperClasses) => {
-  return Object.entries(spacingValues).reduce((css, [spacingVariant]) => {
-    const variant = spacingVariant.replace(".", "\\.");
-    return (
-      css +
-      helperClassesToCss(helperClasses, variant, `var(--spacing-${variant})`)
-    );
-  }, ``);
-};
-
-const helperClasses = [
-  ["m", ["margin"]],
-  ["my", ["margin-block-start", "margin-block-end"]],
-  ["mx", ["margin-inline-start", "margin-inline-end"]],
-  ["ml", ["margin-inline-start"]],
-  ["mr", ["margin-inline-start"]],
-  ["mt", ["margin-block-start"]],
-  ["mb", ["margin-block-end"]],
-  ["p", ["padding"]],
-  ["py", ["padding-block-start", "padding-block-end"]],
-  ["px", ["padding-inline-start", "padding-inline-end"]],
-  ["pl", ["padding-inline-start"]],
-  ["pr", ["padding-inline-start"]],
-  ["pt", ["padding-block-start"]],
-  ["pb", ["padding-block-end"]],
-  ["w", ["width"]],
-  ["h", ["height"]],
-  ["size", ["width", "height"]],
-  ["radius", ["border-radius"]],
-  ["gap", ["gap"]],
-  ["row-gap", ["row-gap"]],
-  ["column-gap", ["column-gap"]],
-  ["flow-space", ["--flow-space"]],
-];
-
-const spacingVariablesCss = Object.entries(spacing).reduce(
-  (css, [variant, value]) => css + spacingToCss(variant, value),
-  ``,
-);
-
-const helperCss = spacingToHelperClassesCss(spacing, helperClasses);
-
-const css = `:root{${spacingVariablesCss}}${helperCss}`;
-
-export default css;
diff --git a/config/transforms/index.js b/config/transforms/index.js
index 769f3b9..ee66425 100644
--- a/config/transforms/index.js
+++ b/config/transforms/index.js
@@ -1,4 +1,3 @@
 import htmlConfigTransform from "./html-config.js";
-import xmlConfigTransform from "./xml-config.js";
 
-export default { htmlConfigTransform, xmlConfigTransform };
+export default { htmlConfigTransform };
diff --git a/config/transforms/xml-config.js b/config/transforms/xml-config.js
deleted file mode 100644
index e4e6d4e..0000000
--- a/config/transforms/xml-config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import minifyXML from "minify-xml";
-
-export default function (eleventyConfig) {
-  eleventyConfig.addTransform("xml-minify", (content, path) => {
-    if (path && path.endsWith(".xml")) {
-      return minifyXML(content, {
-        shortenNamespaces: false,
-      });
-    }
-    return content;
-  });
-}
diff --git a/eleventy.config.js b/eleventy.config.js
index 2ff0db7..6c23efc 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,15 +1,13 @@
 import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
 import { collectionByTag } from "./config/collections/index.js";
+import bundles from "./config/bundles/index.js";
 import filters from "./config/filters/index.js";
 import markdown from "./config/plugins/markdown.js";
 import shortcodes from "./config/shortcodes/index.js";
 import transforms from "./config/transforms/index.js";
 
 export default function (eleventyConfig) {
-  // 	--------------------- Watch Targets -----------------------
-  eleventyConfig.addWatchTarget("./src/includes/css");
-
   // 	--------------------- Passthrough File Copy -----------------------
   ["src/assets/fonts/", "src/assets/images"].forEach((path) =>
     eleventyConfig.addPassthroughCopy(path),
@@ -18,6 +16,11 @@ export default function (eleventyConfig) {
   // 	--------------------- Markdown -----------------------
   eleventyConfig.setLibrary("md", markdown);
 
+  // 	--------------------- Bundles -----------------------
+  Object.keys(bundles).forEach((bundleName) => {
+    eleventyConfig.addBundle(bundleName, bundles[bundleName]);
+  });
+
   // 	--------------------- Collections -----------------------
   eleventyConfig.addCollection("postsByTag", (collection) =>
     collectionByTag(collection, "post"),
diff --git a/package.json b/package.json
index a3e76e8..dce2e6e 100644
--- a/package.json
+++ b/package.json
@@ -31,11 +31,9 @@
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-image-figures": "^2.1.1",
     "markdown-it-prism": "^2.3.0",
-    "minify-xml": "^4.5.2",
     "pluralize": "^8.0.0",
     "postcss": "^8.5.3",
     "postcss-import": "^16.1.0",
-    "postcss-import-ext-glob": "^2.1.1",
     "upload-to-bunny": "^1.4.0"
   }
 }
diff --git a/src/includes/css/global/lilypad.css b/src/includes/css/global/lilypad.css
new file mode 100644
index 0000000..cf282f0
--- /dev/null
+++ b/src/includes/css/global/lilypad.css
@@ -0,0 +1 @@
+@font-face{font-display:swap;font-family:Atikinson Hyperlegible Next;font-stretch:75% 125%;font-style:normal;font-weight:125 950;src:local("Atikinson Hyperlegible Next"),local("AtikinsonHyperlegibleNext-Regular"),url(assets/fonts/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2) format("woff2")}@font-face{font-display:swap;font-family:Atikinson Hyperlegible Mono;font-stretch:75% 125%;font-style:normal;font-weight:125 950;src:local("Atikinson Hyperlegible Mono"),local("AtikinsonHyperlegibleMono-Regular"),url(assets/fonts/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2) format("woff2")}:root{--font-family-display:Atikinson Hyperlegible Next,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-family-body:Atikinson Hyperlegible Next,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-family-monospace:Atikinson Hyperlegible Mono,ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;--color-primary:oklch(0.6 0.1025 212.16);--color-secondary:oklch(0.61 0.2232 31.48);--color-background:oklch(0.98 0 0);--color-surface:oklch(0.96 0.0078 207.9);--color-border:oklch(0.87 0.045077 207.8465);--color-text:oklch(0.15 0 0);--color-fadeText:oklch(0.45 0.0214 207.84);--color-shadow:oklch(0.39 0.0688 212.35)}.text-primary{color:var(--color-primary)}.bg-primary{background-color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.bg-secondary{background-color:var(--color-secondary)}.text-background{color:var(--color-background)}.bg-background{background-color:var(--color-background)}.text-surface{color:var(--color-surface)}.bg-surface{background-color:var(--color-surface)}.text-border{color:var(--color-border)}.bg-border{background-color:var(--color-border)}.text-text{color:var(--color-text)}.bg-text{background-color:var(--color-text)}.text-fadeText{color:var(--color-fadeText)}.bg-fadeText{background-color:var(--color-fadeText)}.text-shadow{color:var(--color-shadow)}.bg-shadow{background-color:var(--color-shadow)}@media (prefers-color-scheme:dark){:root{--color-primary:oklch(0.57 0.0991 213.4);--color-secondary:oklch(0.55 0.1982 31.52);--color-background:oklch(0.2 0 0);--color-surface:oklch(0.26 0.0106 233.21);--color-border:oklch(0.27 0.0238 245.26);--color-text:oklch(0.98 0 0);--color-fadeText:oklch(0.78 0.018 207.85);--color-shadow:oklch(0.39 0.0688 212.35)}}:root{--spacing-0:0px;--spacing-1:4px;--spacing-2:8px;--spacing-3:16px;--spacing-4:24px;--spacing-5:32px;--spacing-6:48px;--spacing-7:64px;--spacing-8:80px}.m-0{margin:var(--spacing-0)}.my-0{margin-block-end:var(--spacing-0);margin-block-start:var(--spacing-0)}.mx-0{margin-inline-end:var(--spacing-0)}.ml-0,.mr-0,.mx-0{margin-inline-start:var(--spacing-0)}.mt-0{margin-block-start:var(--spacing-0)}.mb-0{margin-block-end:var(--spacing-0)}.p-0{padding:var(--spacing-0)}.py-0{padding-block-end:var(--spacing-0);padding-block-start:var(--spacing-0)}.px-0{padding-inline-end:var(--spacing-0)}.pl-0,.pr-0,.px-0{padding-inline-start:var(--spacing-0)}.pt-0{padding-block-start:var(--spacing-0)}.pb-0{padding-block-end:var(--spacing-0)}.w-0{width:var(--spacing-0)}.h-0,.size-0{height:var(--spacing-0)}.size-0{width:var(--spacing-0)}.radius-0{border-radius:var(--spacing-0)}.gap-0{gap:var(--spacing-0)}.row-gap-0{row-gap:var(--spacing-0)}.column-gap-0{column-gap:var(--spacing-0)}.flow-space-0{--flow-space:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.my-1{margin-block-end:var(--spacing-1);margin-block-start:var(--spacing-1)}.mx-1{margin-inline-end:var(--spacing-1)}.ml-1,.mr-1,.mx-1{margin-inline-start:var(--spacing-1)}.mt-1{margin-block-start:var(--spacing-1)}.mb-1{margin-block-end:var(--spacing-1)}.p-1{padding:var(--spacing-1)}.py-1{padding-block-end:var(--spacing-1);padding-block-start:var(--spacing-1)}.px-1{padding-inline-end:var(--spacing-1)}.pl-1,.pr-1,.px-1{padding-inline-start:var(--spacing-1)}.pt-1{padding-block-start:var(--spacing-1)}.pb-1{padding-block-end:var(--spacing-1)}.w-1{width:var(--spacing-1)}.h-1,.size-1{height:var(--spacing-1)}.size-1{width:var(--spacing-1)}.radius-1{border-radius:var(--spacing-1)}.gap-1{gap:var(--spacing-1)}.row-gap-1{row-gap:var(--spacing-1)}.column-gap-1{column-gap:var(--spacing-1)}.flow-space-1{--flow-space:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.my-2{margin-block-end:var(--spacing-2);margin-block-start:var(--spacing-2)}.mx-2{margin-inline-end:var(--spacing-2)}.ml-2,.mr-2,.mx-2{margin-inline-start:var(--spacing-2)}.mt-2{margin-block-start:var(--spacing-2)}.mb-2{margin-block-end:var(--spacing-2)}.p-2{padding:var(--spacing-2)}.py-2{padding-block-end:var(--spacing-2);padding-block-start:var(--spacing-2)}.px-2{padding-inline-end:var(--spacing-2)}.pl-2,.pr-2,.px-2{padding-inline-start:var(--spacing-2)}.pt-2{padding-block-start:var(--spacing-2)}.pb-2{padding-block-end:var(--spacing-2)}.w-2{width:var(--spacing-2)}.h-2,.size-2{height:var(--spacing-2)}.size-2{width:var(--spacing-2)}.radius-2{border-radius:var(--spacing-2)}.gap-2{gap:var(--spacing-2)}.row-gap-2{row-gap:var(--spacing-2)}.column-gap-2{column-gap:var(--spacing-2)}.flow-space-2{--flow-space:var(--spacing-2)}.m-3{margin:var(--spacing-3)}.my-3{margin-block-end:var(--spacing-3);margin-block-start:var(--spacing-3)}.mx-3{margin-inline-end:var(--spacing-3)}.ml-3,.mr-3,.mx-3{margin-inline-start:var(--spacing-3)}.mt-3{margin-block-start:var(--spacing-3)}.mb-3{margin-block-end:var(--spacing-3)}.p-3{padding:var(--spacing-3)}.py-3{padding-block-end:var(--spacing-3);padding-block-start:var(--spacing-3)}.px-3{padding-inline-end:var(--spacing-3)}.pl-3,.pr-3,.px-3{padding-inline-start:var(--spacing-3)}.pt-3{padding-block-start:var(--spacing-3)}.pb-3{padding-block-end:var(--spacing-3)}.w-3{width:var(--spacing-3)}.h-3,.size-3{height:var(--spacing-3)}.size-3{width:var(--spacing-3)}.radius-3{border-radius:var(--spacing-3)}.gap-3{gap:var(--spacing-3)}.row-gap-3{row-gap:var(--spacing-3)}.column-gap-3{column-gap:var(--spacing-3)}.flow-space-3{--flow-space:var(--spacing-3)}.m-4{margin:var(--spacing-4)}.my-4{margin-block-end:var(--spacing-4);margin-block-start:var(--spacing-4)}.mx-4{margin-inline-end:var(--spacing-4)}.ml-4,.mr-4,.mx-4{margin-inline-start:var(--spacing-4)}.mt-4{margin-block-start:var(--spacing-4)}.mb-4{margin-block-end:var(--spacing-4)}.p-4{padding:var(--spacing-4)}.py-4{padding-block-end:var(--spacing-4);padding-block-start:var(--spacing-4)}.px-4{padding-inline-end:var(--spacing-4)}.pl-4,.pr-4,.px-4{padding-inline-start:var(--spacing-4)}.pt-4{padding-block-start:var(--spacing-4)}.pb-4{padding-block-end:var(--spacing-4)}.w-4{width:var(--spacing-4)}.h-4,.size-4{height:var(--spacing-4)}.size-4{width:var(--spacing-4)}.radius-4{border-radius:var(--spacing-4)}.gap-4{gap:var(--spacing-4)}.row-gap-4{row-gap:var(--spacing-4)}.column-gap-4{column-gap:var(--spacing-4)}.flow-space-4{--flow-space:var(--spacing-4)}.m-5{margin:var(--spacing-5)}.my-5{margin-block-end:var(--spacing-5);margin-block-start:var(--spacing-5)}.mx-5{margin-inline-end:var(--spacing-5)}.ml-5,.mr-5,.mx-5{margin-inline-start:var(--spacing-5)}.mt-5{margin-block-start:var(--spacing-5)}.mb-5{margin-block-end:var(--spacing-5)}.p-5{padding:var(--spacing-5)}.py-5{padding-block-end:var(--spacing-5);padding-block-start:var(--spacing-5)}.px-5{padding-inline-end:var(--spacing-5)}.pl-5,.pr-5,.px-5{padding-inline-start:var(--spacing-5)}.pt-5{padding-block-start:var(--spacing-5)}.pb-5{padding-block-end:var(--spacing-5)}.w-5{width:var(--spacing-5)}.h-5,.size-5{height:var(--spacing-5)}.size-5{width:var(--spacing-5)}.radius-5{border-radius:var(--spacing-5)}.gap-5{gap:var(--spacing-5)}.row-gap-5{row-gap:var(--spacing-5)}.column-gap-5{column-gap:var(--spacing-5)}.flow-space-5{--flow-space:var(--spacing-5)}.m-6{margin:var(--spacing-6)}.my-6{margin-block-end:var(--spacing-6);margin-block-start:var(--spacing-6)}.mx-6{margin-inline-end:var(--spacing-6)}.ml-6,.mr-6,.mx-6{margin-inline-start:var(--spacing-6)}.mt-6{margin-block-start:var(--spacing-6)}.mb-6{margin-block-end:var(--spacing-6)}.p-6{padding:var(--spacing-6)}.py-6{padding-block-end:var(--spacing-6);padding-block-start:var(--spacing-6)}.px-6{padding-inline-end:var(--spacing-6)}.pl-6,.pr-6,.px-6{padding-inline-start:var(--spacing-6)}.pt-6{padding-block-start:var(--spacing-6)}.pb-6{padding-block-end:var(--spacing-6)}.w-6{width:var(--spacing-6)}.h-6,.size-6{height:var(--spacing-6)}.size-6{width:var(--spacing-6)}.radius-6{border-radius:var(--spacing-6)}.gap-6{gap:var(--spacing-6)}.row-gap-6{row-gap:var(--spacing-6)}.column-gap-6{column-gap:var(--spacing-6)}.flow-space-6{--flow-space:var(--spacing-6)}.m-7{margin:var(--spacing-7)}.my-7{margin-block-end:var(--spacing-7);margin-block-start:var(--spacing-7)}.mx-7{margin-inline-end:var(--spacing-7)}.ml-7,.mr-7,.mx-7{margin-inline-start:var(--spacing-7)}.mt-7{margin-block-start:var(--spacing-7)}.mb-7{margin-block-end:var(--spacing-7)}.p-7{padding:var(--spacing-7)}.py-7{padding-block-end:var(--spacing-7);padding-block-start:var(--spacing-7)}.px-7{padding-inline-end:var(--spacing-7)}.pl-7,.pr-7,.px-7{padding-inline-start:var(--spacing-7)}.pt-7{padding-block-start:var(--spacing-7)}.pb-7{padding-block-end:var(--spacing-7)}.w-7{width:var(--spacing-7)}.h-7,.size-7{height:var(--spacing-7)}.size-7{width:var(--spacing-7)}.radius-7{border-radius:var(--spacing-7)}.gap-7{gap:var(--spacing-7)}.row-gap-7{row-gap:var(--spacing-7)}.column-gap-7{column-gap:var(--spacing-7)}.flow-space-7{--flow-space:var(--spacing-7)}.m-8{margin:var(--spacing-8)}.my-8{margin-block-end:var(--spacing-8);margin-block-start:var(--spacing-8)}.mx-8{margin-inline-end:var(--spacing-8)}.ml-8,.mr-8,.mx-8{margin-inline-start:var(--spacing-8)}.mt-8{margin-block-start:var(--spacing-8)}.mb-8{margin-block-end:var(--spacing-8)}.p-8{padding:var(--spacing-8)}.py-8{padding-block-end:var(--spacing-8);padding-block-start:var(--spacing-8)}.px-8{padding-inline-end:var(--spacing-8)}.pl-8,.pr-8,.px-8{padding-inline-start:var(--spacing-8)}.pt-8{padding-block-start:var(--spacing-8)}.pb-8{padding-block-end:var(--spacing-8)}.w-8{width:var(--spacing-8)}.h-8,.size-8{height:var(--spacing-8)}.size-8{width:var(--spacing-8)}.radius-8{border-radius:var(--spacing-8)}.gap-8{gap:var(--spacing-8)}.row-gap-8{row-gap:var(--spacing-8)}.column-gap-8{column-gap:var(--spacing-8)}.flow-space-8{--flow-space:var(--spacing-8)}.w-full{width:100%}.h-full{height:100%}.w-fit{width:fit-content}.w-max{width:max-content}.w-min{width:min-content}.flex{display:flex}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.flow>*+*{margin-block-start:var(--flow-space,1em)}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.list-decimal{list-style-type:decimal}.visually-hidden{border:0;clip:rect(0 0 0 0);height:0;margin:0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
diff --git a/src/includes/css/styles.css b/src/includes/css/styles.css
index 526d45b..182c864 100644
--- a/src/includes/css/styles.css
+++ b/src/includes/css/styles.css
@@ -1,8 +1,22 @@
 @import "global/reset.css";
 @import "global/variables.css";
-
 @import "global/global-styles.css";
 
-@import-glob "blocks/*.css";
-@import-glob "compositions/*.css";
-@import-glob "utilities/*.css";
+@import "blocks/button.css";
+@import "blocks/card.css";
+@import "blocks/media-display.css";
+@import "blocks/media-grid.css";
+@import "blocks/pill.css";
+@import "blocks/posts.css";
+@import "blocks/prism.css";
+@import "blocks/site-header.css";
+@import "blocks/site-logo.css";
+@import "blocks/stars.css";
+
+@import "compositions/cluster.css";
+@import "compositions/repel.css";
+
+@import "utilities/fonts.css";
+@import "utilities/image.css";
+@import "utilities/table.css";
+@import "utilities/wrapper.css";
diff --git a/src/includes/css/utilities/flex.css b/src/includes/css/utilities/flex.css
deleted file mode 100644
index 8c28f8c..0000000
--- a/src/includes/css/utilities/flex.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  display: flex;
-  flex-direction: column;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.items-end {
-  align-items: flex-end;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-1 {
-  flex: 1;
-}
diff --git a/src/includes/css/utilities/flow.css b/src/includes/css/utilities/flow.css
deleted file mode 100644
index 23bdc32..0000000
--- a/src/includes/css/utilities/flow.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * FLOW UTILITY
- * Like the Every Layout stack: https://every-layout.dev/layouts/stack/
- * Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
- */
-.flow > * + * {
-  margin-block-start: var(--flow-space, 1em);
-}
diff --git a/src/includes/css/utilities/fonts.css b/src/includes/css/utilities/fonts.css
index fdc2576..c5c5d4f 100644
--- a/src/includes/css/utilities/fonts.css
+++ b/src/includes/css/utilities/fonts.css
@@ -2,22 +2,6 @@
   font-size: 1rem;
 }
 
-.font-size-m {
-  font-size: 1.125rem;
-}
-
-.font-size-l {
-  font-size: 1.5rem;
-}
-
-.font-size-xl {
-  font-size: 2rem;
-}
-
-.font-size-2xl {
-  font-size: 3rem;
-}
-
 .line-height-s {
   line-height: 0.8rem;
 }
@@ -29,7 +13,3 @@
 .line-height-l {
   line-height: 1.5rem;
 }
-
-.line-height-xl {
-  line-height: 2rem;
-}
diff --git a/src/includes/css/utilities/list.css b/src/includes/css/utilities/list.css
deleted file mode 100644
index f7845a7..0000000
--- a/src/includes/css/utilities/list.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.list-none {
-  list-style-type: none;
-}
-
-.list-disc {
-  list-style-type: disc;
-}
-
-.list-decimal {
-  list-style-type: decimal;
-}
diff --git a/src/includes/css/utilities/visually-hidden.css b/src/includes/css/utilities/visually-hidden.css
deleted file mode 100644
index 6a63f69..0000000
--- a/src/includes/css/utilities/visually-hidden.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * VISUALLY HIDDEN UTILITY
- * Info: https://piccalil.li/quick-tip/visually-hidden/
- */
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 0;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-}
diff --git a/src/includes/layouts/base.html b/src/includes/layouts/base.html
index 2f2357f..66e4e61 100644
--- a/src/includes/layouts/base.html
+++ b/src/includes/layouts/base.html
@@ -20,16 +20,17 @@
             <script type="module"
                     src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"></script>
         {% endif %}
-        {% set css %}
-            {% include "css/styles.css" %}
-        {% endset %}
-        <style>{{ css | postcss | safe }}</style>
-    </head>
-    <body class="flex-col">
-        {% include "partials/header.html" %}
-        <main id="main" class="flow flex-1 wrapper" tabindex="-1">
-            {{ content | safe }}
-        </main>
-        {% include "partials/footer.html" %}
-    </body>
+        <style>{% include "css/global/lilypad.css" %}</style>
+        {% css %}
+        {% include "css/styles.css" %}
+    {% endcss %}
+    <link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
+</head>
+<body class="flex flex-col">
+    {% include "partials/header.html" %}
+    <main id="main" class="flow flex-1 wrapper" tabindex="-1">
+        {{ content | safe }}
+    </main>
+    {% include "partials/footer.html" %}
+</body>
 </html>