refactor: simplify purge to a plugin

Author: barelyhuman

_includes/base-simple-header.njk

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>tinytown.studio</title>
-    <link rel="stylesheet" href="/shed-css/index.css" />
+    <link rel="stylesheet" href="/node_modules/shed-css/dist/index.css" />
     <link rel="stylesheet" href="/main.css" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

_lib/purge.js renamed to _plugins/purge.js

@@ -6,6 +6,15 @@ import MinifyCSS from 'clean-css';
 
 import { extname, join } from 'node:path';
 
+export async function purgePlugin(eleventyConfig) {
+  eleventyConfig.on(
+    'eleventy.after',
+    async ({ directories, results, runMode, outputMode }) => {
+      await purge(directories);
+    }
+  );
+}
+
 export async function purge(directories) {
   const inputDir = directories.output;
 

eleventy.config.js

@@ -1,7 +1,10 @@
 import { EleventyHtmlBasePlugin } from '@11ty/eleventy';
-import { purge } from './_lib/purge.js';
+import { purgePlugin } from './_plugins/purge.js';
+
+import criticalCss from 'eleventy-critical-css';
 
 export default function (eleventyConfig) {
+  eleventyConfig.addPlugin(criticalCss);
   eleventyConfig.addPassthroughCopy({
     './public/': '/',
   });
@@ -10,11 +13,5 @@ export default function (eleventyConfig) {
       '/node_modules/shed-css/dist/index.css',
   });
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
-
-  eleventyConfig.on(
-    'eleventy.after',
-    async ({ directories, results, runMode, outputMode }) => {
-      await purge(directories);
-    }
-  );
+  eleventyConfig.addPlugin(purgePlugin);
 }

package.json

@@ -11,12 +11,10 @@
   "license": "ISC",
   "description": "",
   "type": "module",
-  "dependencies": {
+  "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
     "clean-css": "^5.3.3",
-    "shed-css": "^1.4.0"
-  },
-  "devDependencies": {
+    "shed-css": "^1.4.0",
     "@fullhuman/postcss-purgecss": "^7.0.2",
     "eleventy-plugin-purgecss": "^0.5.0",
     "postcss": "^8.5.1",