feat: update postcss config

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