feat: update postcss config

config/template-languages/css-config.js

@@ -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;
-      };
-    },
-  });
-};

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);

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"

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;
 }

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);
+  }
+};