From 598102a7ec1ea5b96da58806b8c8bde219e8b4ed Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Wed, 21 Feb 2024 12:08:49 -0800
Subject: [PATCH] feat: update postcss config

---
 config/template-languages/css-config.js | 33 ---------------------
 eleventy.config.js                      |  5 ----
 src/_layouts/base.html                  |  2 +-
 src/assets/css/blocks/prism.css         | 36 +++++++++++------------
 src/assets/css/styles.11ty.js           | 38 +++++++++++++++++++++++++
 5 files changed, 57 insertions(+), 57 deletions(-)
 delete mode 100644 config/template-languages/css-config.js
 create mode 100644 src/assets/css/styles.11ty.js

diff --git a/config/template-languages/css-config.js b/config/template-languages/css-config.js
deleted file mode 100644
index 1b23d8c..0000000
--- a/config/template-languages/css-config.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// CSS and JavaScript as first-class citizens in Eleventy: https://pepelsbey.dev/articles/eleventy-css-js/
-
-const postcss = require("postcss");
-const postcssImport = require("postcss-import");
-const postcssImportExtGlob = require("postcss-import-ext-glob");
-const autoprefixer = require("autoprefixer");
-const cssnano = require("cssnano");
-
-module.exports = (eleventyConfig) => {
-  eleventyConfig.addTemplateFormats("css");
-
-  eleventyConfig.addExtension("css", {
-    outputFileExtension: "css",
-    compile: async (content, path) => {
-      if (path !== "./src/assets/css/global.css") {
-        return;
-      }
-
-      return async () => {
-        let output = await postcss([
-          postcssImportExtGlob,
-          postcssImport,
-          autoprefixer,
-          cssnano,
-        ]).process(content, {
-          from: path,
-        });
-
-        return output.css;
-      };
-    },
-  });
-};
diff --git a/eleventy.config.js b/eleventy.config.js
index 9d10f37..ff6fd8e 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -27,11 +27,6 @@ module.exports = (eleventyConfig) => {
   // 	--------------------- Plugins ---------------------
   eleventyConfig.addPlugin(pluginRss);
 
-  // 	--------------------- Custom Template Languages ---------------------
-  eleventyConfig.addPlugin(
-    require("./config/template-languages/css-config.js"),
-  );
-
   // 	--------------------- Custom Collections -----------------------
   eleventyConfig.addCollection("postsByTag", postsByTag);
   eleventyConfig.addCollection("catalogueByType", catalogueByType);
diff --git a/src/_layouts/base.html b/src/_layouts/base.html
index 6811a26..3b0832b 100644
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -9,7 +9,7 @@
             {% if title %}{{ title }} •{% endif %}
             {{ meta.siteName }}
         </title>
-        <link rel="stylesheet" href="/assets/css/global.css" />
+        <link rel="stylesheet" href="/assets/css/styles.css" />
         {% include "partials/meta.html" %}
         {% for preload in preloads %}
             <link rel="preload"
diff --git a/src/assets/css/blocks/prism.css b/src/assets/css/blocks/prism.css
index 262ec0f..05b19ac 100644
--- a/src/assets/css/blocks/prism.css
+++ b/src/assets/css/blocks/prism.css
@@ -9,60 +9,60 @@ pre:has(code) {
   color: #c0caf5;
 }
 
-pre:has(code) .token.prolog,
-pre:has(code) .token.builtin {
+.token.prolog,
+.token.builtin {
   color: #f7768e;
 }
 
-pre:has(code) .token.function {
+.token.function {
   color: #7aa2f7;
 }
 
-pre:has(code) .token.symbol {
+.token.symbol {
   color: #2ac3de;
 }
 
-pre:has(code) .token.punctuation {
+.token.punctuation {
   color: #bb9af7;
 }
 
-pre:has(code) .token.string,
-pre:has(code) .token.char,
-pre:has(code) .token.tag,
-pre:has(code) .token.selector {
+.token.string,
+.token.char,
+.token.tag,
+.token.selector {
   color: #9ece6a;
 }
 
-pre:has(code) .token.keyword {
+.token.keyword {
   color: #9d7cd8;
 }
 
-pre:has(code) .token.operator {
+.token.operator {
   color: #89ddff;
 }
 
-pre:has(code) .token.constant,
-pre:has(code) .token.boolean {
+.token.constant,
+.token.boolean {
   color: #ff9e64;
 }
 
-pre:has(code) .token.variable {
+.token.variable {
   color: #c0caf5;
 }
 
-pre:has(code) .token.comment {
+.token.comment {
   color: #565f89;
   font-style: italic;
 }
 
-pre:has(code) .token.attr-name {
+.token.attr-name {
   color: #73daca;
 }
 
-pre:has(code) .token.class-name {
+.token.class-name {
   color: #ff757f;
 }
 
-pre:has(code) .token.plain-text {
+.token.plain-text {
   color: #c0caf5;
 }
diff --git a/src/assets/css/styles.11ty.js b/src/assets/css/styles.11ty.js
new file mode 100644
index 0000000..2a488a6
--- /dev/null
+++ b/src/assets/css/styles.11ty.js
@@ -0,0 +1,38 @@
+/*
+ * Implementation sourced from eleventyone starter kit
+ * https://github.com/philhawksworth/eleventyone
+ * ---
+ * https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
+ */
+
+const fs = require("fs");
+const postcss = require("postcss");
+const postcssImport = require("postcss-import");
+const postcssImportExtGlob = require("postcss-import-ext-glob");
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+const path = require("path").posix;
+
+module.exports = class {
+  async data() {
+    const rawFilepath = path.join(__dirname, "./global.css");
+    const rawCss = fs.readFileSync(rawFilepath);
+
+    return {
+      permalink: `assets/css/styles.css`,
+      rawFilepath,
+      rawCss,
+    };
+  }
+
+  async render({ rawCss, rawFilepath }) {
+    return await postcss([
+      postcssImportExtGlob,
+      postcssImport,
+      autoprefixer,
+      cssnano,
+    ])
+      .process(rawCss, { from: rawFilepath })
+      .then((result) => result.css);
+  }
+};