Use lightningcss

package.json

@@ -7,21 +7,22 @@
     "license": "CC0-1.0",
     "devDependencies": {
         "@eslint/js": "^9.6.0",
-        "@stylistic/eslint-plugin": "^3.0.0",
+        "@stylistic/eslint-plugin": "^4.2.0",
         "eslint": "^9.7.0",
-        "globals": "^15.8.0",
+        "globals": "^16.0.0",
+        "lightningcss": "^1.29.3",
+        "lightningcss-cli": "^1.29.3",
         "stylelint": "^16.7.0",
-        "stylelint-config-standard": "^37.0.0"
+        "stylelint-config-standard": "^38.0.0"
     },
     "scripts": {
         "eslint": "eslint public/assets/js/*.js",
-        "stylelint": "stylelint public/assets/css/*.css",
+        "stylelint": "stylelint resources/css/*.css",
         "lint": "npm run eslint && npm run stylelint",
+        "lightningcss": "lightningcss --output-dir public/assets/css --sourcemap --bundle --minify resources/css/app.css",
+        "fix-sourcemap": "./scripts/fix-sourcemap.sh",
+        "build-css": "npm run lightningcss && npm run fix-sourcemap",
         "compress": "./scripts/compress.sh",
         "build": "npm run lint && npm run compress"
-    },
-    "dependencies": {
-        "@11ty/is-land": "^4.0.0",
-        "@zachleat/snow-fall": "^1.0.2"
     }
 }

public/assets/css/app.css

@@ -1,8 +1,2 @@
-@import url('variables.css');
+:root{--font-family-headings:"Rockwell","Rockwell Nova","Roboto Slab","DejaVu Serif","Sitka Small",serif;--font-family-body:"Charter","Bitstream Charter","Sitka Text","Cambria",serif;--font-family-monospace:ui-monospace,"Cascadia Code","Source Code Pro","Menlo","Consolas","DejaVu Sans Mono",monospace;--font-size-sm:.75rem;--font-size-base:1rem;--font-size-md:1.25rem;--font-size-lg:1.5rem;--font-size-xl:1.75rem;--font-size-xxl:2rem;--font-size-xxxl:2.25rem;--color-primary:oklch(36.8% .1 125.505);--color-secondary:oklch(96.3% .1 125.505);--color-link:oklch(48.09% .146 241.41);--color-link-visited:oklch(70.44% .21 304.41);--color-primary-shadow:oklch(19.56% .054 125.505/.4);--rss-color-link:oklch(67.59% .189 42.04);--color-danger:oklch(64.41% .281 23.29);--color-danger-shadow:oklch(64.41% .281 23.29/.1)}body{font-family:var(--font-family-body);font-size:var(--font-size-md)}code{font-family:var(--font-family-monospace)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-headings)}.grid{grid-template-rows:min-content 1fr min-content;grid-template-columns:5vw 1fr 5vw;row-gap:1rem;display:grid}#site-header{grid-area:1/2/2/3;& .rss-icon{& svg{width:auto;height:1rem}}}main{grid-area:2/2/3/3}.h-feed{flex-direction:column;gap:2rem;display:flex}.h-entry{& p:first-of-type,& h1:first-of-type{margin-block-start:0}}.pagination{margin-block-start:1rem}footer{grid-area:3/2/4/3;& .iwc-logo{max-width:85vw}& .footer-actions{flex-direction:row;gap:1rem;display:flex}}body{background-color:var(--color-secondary);color:var(--color-primary)}a{color:var(--color-link);&:visited{color:var(--color-link-visited)}&.auth:visited{color:var(--color-link)}}#site-header{& a:visited{color:var(--color-link)}& .rss-icon{& svg{color:var(--rss-color-link)}}}.hljs{border-radius:.5rem}.h-card{& .hovercard{z-index:100;box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);background-color:var(--color-secondary);opacity:0;border-radius:1rem;flex-direction:column;gap:.5rem;width:fit-content;padding:1rem;transition:opacity .5s ease-in-out;display:none;position:absolute;& .u-photo{max-width:6rem}& .social-icon{width:1rem;height:1rem}}&:hover{& .hovercard{opacity:1;display:flex}}}.h-entry{border-inline-start:1px solid var(--color-primary);padding-inline-start:.5rem;& .reply-to{font-style:italic}& .post-info{& a{text-decoration:none}}& .note-metadata{flex-direction:row;gap:1rem;display:flex;& .replies,& .likes,& .reposts{flex-direction:row;align-items:center;gap:.5rem;display:inline-flex}& .syndication-links{flex-flow:wrap;& a{text-decoration:none;& svg{width:1rem;height:1rem}}}}}.feather{stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;fill:none;width:24px;height:24px}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}main{&>.u-comment{border-inline-start:1px solid var(--color-primary);margin-block-start:2rem;margin-inline-start:2rem;padding-inline-start:.5rem;& .mini-h-card{flex-direction:row;align-items:baseline;display:inline-flex;& .u-photo{border-radius:50%;width:2rem;height:2rem;margin-block-end:.5rem}}}& .notes-subtitle{font-size:1.2rem;font-weight:600}& .webmentions-author-list{flex-flow:wrap;gap:1rem;display:flex;& img{border-radius:50%;width:4rem;height:4rem}}}.indieauth{& .error{color:var(--color-danger);background-color:var(--color-danger-shadow);border:1px solid var(--color-danger);border-radius:.5rem;width:fit-content;margin-block-end:1rem;padding-block:.5rem;padding-inline:1rem;display:flex}}
-@import url('fonts.css');
+/*# sourceMappingURL=/assets/css/app.css.map */
-@import url('layout.css');
-@import url('colours.css');
-@import url('code.css');
-@import url('content.css');
-@import url('notes.css');
-@import url('indieauth.css');

resources/css/app.css

@@ -0,0 +1,8 @@
+@import url('variables.css');
+@import url('fonts.css');
+@import url('layout.css');
+@import url('colours.css');
+@import url('code.css');
+@import url('content.css');
+@import url('notes.css');
+@import url('indieauth.css');

scripts/compress.sh

@@ -16,26 +16,6 @@ if ! (( $+commands[zstd] )) &> /dev/null; then
 fi
 
 # Make .br files
-fd --extension css --extension js --search-path ./public/assets --type f --exec brotli --force --best --output={}.br {}
+fd --extension css --extension js --extension map --search-path ./public/assets --type f --exec brotli --force --best --output={}.br {}
 # Make .zst files
-fd --extension css --extension js --search-path ./public/assets --type f --exec zstd --quiet --force --ultra -22 --exclude-compressed {} -o {}.zst
+fd --extension css --extension js --extension map --search-path ./public/assets --type f --exec zstd --quiet --force --ultra -22 --exclude-compressed {} -o {}.zst
-
-# Remove files that actually got bigger!
-fd --extension br --extension zst --search-path ./public/assets --type f --exec sh -c '
-for file; do
-  src="${file%.br}"
-  src="${src%.zst}"
-  if [ -f "$src" ]; then
-    # Get file sizes using stat with cross-platform compatibility
-    if [ "$(uname)" = "Darwin" ]; then
-      file_size=$(stat -f%z "$file")
-      src_size=$(stat -f%z "$src")
-    else
-      file_size=$(stat -c%s "$file")
-      src_size=$(stat -c%s "$src")
-    fi
-    # Compare sizes and rm compressed file if larger than the source
-    [ "$file_size" -ge "$src_size" ] && rm "$file"
-  fi
-done
-' _ {}

scripts/fix-sourcemap.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env zsh
+
+if ! (( $+commands[sd] )) &> /dev/null; then
+    echo "sd not installed"
+    exit 1
+fi
+
+sd 'sourceMappingURL=public' 'sourceMappingURL=' public/assets/css/app.css