feat: minify + bundle css

.eleventy.js

@@ -6,6 +6,7 @@ import markdownItFootnote from 'markdown-it-footnote'
 import filters from './config/filters/index.js'
 import { copyErrorPages } from './config/events/index.js'
 import { processContent, albumReleasesCalendar } from './config/collections/index.js'
+import { cssConfig } from './config/plugins/css-config.js'
 import { DateTime } from 'luxon'
 
 // load .env
@@ -20,6 +21,7 @@ const appVersion = require('./package.json').version
 export default async function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight)
   eleventyConfig.addPlugin(tablerIcons)
+  eleventyConfig.addPlugin(cssConfig)
 
   // quiet build output
   eleventyConfig.setQuietMode(true)

config/plugins/css-config.js

@@ -0,0 +1,33 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import postcss from 'postcss'
+import postcssImport from 'postcss-import'
+import postcssImportExtGlob from 'postcss-import-ext-glob'
+import autoprefixer from 'autoprefixer'
+import cssnano from 'cssnano'
+
+export const cssConfig = (eleventyConfig) => {
+  eleventyConfig.addTemplateFormats('css')
+  eleventyConfig.addExtension('css', {
+    outputFileExtension: 'css',
+    compile: async (inputContent, inputPath) => {
+      const outputPath = '_site/assets/css/index.css'
+
+      if (inputPath.endsWith('index.css')) {
+        return async () => {
+          let result = await postcss([
+            postcssImportExtGlob,
+            postcssImport,
+            autoprefixer,
+            cssnano,
+          ]).process(inputContent, { from: inputPath })
+
+          await fs.mkdir(path.dirname(outputPath), { recursive: true })
+          await fs.writeFile(outputPath, result.css)
+
+          return result.css
+        };
+      }
+    },
+  });
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "24.1.6",
+  "version": "24.2.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {
@@ -9,6 +9,7 @@
     "build": "ELEVENTY_PRODUCTION=true eleventy",
     "update:deps": "npm upgrade && ncu",
     "debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve",
+    "clean": "rimraf _site",
     "publish:analytics": "node scripts/worker-build.mjs analytics && wrangler deploy --env production --config workers/analytics/wrangler.toml",
     "publish:contact": "node scripts/worker-build.mjs contact && wrangler deploy --env production --config workers/contact/wrangler.toml",
     "publish:playing": "node scripts/worker-build.mjs playing && wrangler deploy --env production --config workers/playing/wrangler.toml",
@@ -35,6 +36,8 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@cdransf/eleventy-plugin-tabler-icons": "^1.12.0",
     "@supabase/supabase-js": "^2.45.2",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.5",
     "dotenv-flow": "^4.1.0",
     "ics": "^3.7.6",
     "liquidjs": "10.16.4",
@@ -42,6 +45,12 @@
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.1.0",
     "markdown-it-footnote": "^4.0.0",
+    "postcss": "^8.4.41",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.0",
+    "postcss-import-ext-glob": "^2.1.1",
+    "postcss-js": "^4.0.1",
+    "rimraf": "^6.0.1",
     "sanitize-html": "^2.13.0",
     "slugify": "^1.6.6"
   }