feat: add postcss filter

All CSS processing is handled by the filter, and is now inlined into the
HTML

config/constants/paths.js

@@ -0,0 +1 @@
+export const ASSETS_FONTS_PATH = "/assets/fonts";

config/filters/postcss/postcss.js

@@ -0,0 +1,30 @@
+/*
+ * Implementation sourced from eleventyone starter kit
+ * https://github.com/philhawksworth/eleventyone
+ * ---
+ * https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
+ */
+import postcss from "postcss";
+import postcssImport from "postcss-import";
+import postcssImportExtGlob from "postcss-import-ext-glob";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+
+import colors from "./utils/colors.js";
+import fontFamily from "./utils/font-family.js";
+import fontVariables from "./utils/font-variables.js";
+import spacing from "./utils/spacing.js";
+
+const postCss = async (rawCss) => {
+  const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
+  return await postcss([
+    postcssImportExtGlob,
+    postcssImport,
+    autoprefixer,
+    cssnano,
+  ])
+    .process(css, { from: "src/includes/css/styles.css" })
+    .then((result) => result.css);
+};
+
+export default postCss;

config/filters/postcss/utils/colors.js

@@ -1,4 +1,4 @@
-import colorSchemes from "../../config/design-tokens/colors.js";
+import colorSchemes from "../../../design-tokens/colors.js";
 import { helperClassesToCss } from "./helper-classes.js";
 
 const lightScheme = colorSchemes.light;

config/filters/postcss/utils/font-family.js

@@ -1,5 +1,9 @@
-import { getFontUrl } from "../utils/fonts.js";
+import path from "path";
-import fonts from "../../config/design-tokens/fonts.js";
+
+import { ASSETS_FONTS_PATH } from "../../../constants/paths.js";
+import fonts from "../../../design-tokens/fonts.js";
+
+const getFontUrl = (src) => path.join(ASSETS_FONTS_PATH, src);
 
 const fontsToCss = (fonts) => {
   return Object.entries(fonts).reduce((css, [, fontProperties]) => {

config/filters/postcss/utils/font-variables.js

@@ -1,4 +1,4 @@
-import fonts from "../../config/design-tokens/fonts.js";
+import fonts from "../../../design-tokens/fonts.js";
 
 const fallbacks = [
   "-apple-system",

config/filters/postcss/utils/spacing.js

@@ -1,4 +1,4 @@
-import spacing from "../../config/design-tokens/spacing.js";
+import spacing from "../../../design-tokens/spacing.js";
 import { helperClassesToCss } from "./helper-classes.js";
 
 const spacingToCss = (variant, value) =>

config/transforms/html-config.js

@@ -8,7 +8,7 @@ export default function (eleventyConfig) {
         collapseWhitespace: true,
         decodeEntities: true,
         includeAutoGeneratedTags: false,
-        minifyCSS: true,
+        minifyCSS: false, // Disabled because of clean-css' lack of nested CSS support
         minifyJS: true,
         minifyURLs: true,
         removeComments: true,

eleventy.config.js

@@ -19,6 +19,7 @@ import {
   pluralize,
   values,
 } from "./config/filters/index.js";
+import postcss from "./config/filters/postcss/postcss.js";
 import markdown from "./config/plugins/markdown.js";
 import liteYoutube from "./config/shortcodes/youtube.js";
 
@@ -60,6 +61,8 @@ export default function (eleventyConfig) {
   eleventyConfig.addFilter("values", values);
   eleventyConfig.addFilter("pluralize", pluralize);
 
+  eleventyConfig.addFilter("postcss", postcss);
+
   // 	--------------------- Custom Transforms -----------------------
   eleventyConfig.addPlugin(htmlConfigTransform);
 

src/data/preloads.js

@@ -1,6 +1,10 @@
-import { getFontUrl } from "../utils/fonts.js";
+import path from "path";
+
+import { ASSETS_FONTS_PATH } from "../../config/constants/paths.js";
 import fonts from "../../config/design-tokens/fonts.js";
 
+const getFontUrl = (src) => path.join(ASSETS_FONTS_PATH, src);
+
 const preloads = [
   {
     as: "font",

src/includes/css/styles.11ty.js

@@ -1,49 +0,0 @@
-/*
- * Implementation sourced from eleventyone starter kit
- * https://github.com/philhawksworth/eleventyone
- * ---
- * https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
- */
-
-import fs from "fs";
-import postcss from "postcss";
-import postcssImport from "postcss-import";
-import postcssImportExtGlob from "postcss-import-ext-glob";
-import autoprefixer from "autoprefixer";
-import cssnano from "cssnano";
-import { posix as path } from "path";
-import { fileURLToPath } from "url";
-
-import colors from "../../css-utils/colors.js";
-import fontFamily from "../../css-utils/font-family.js";
-import fontVariables from "../../css-utils/font-variables.js";
-import spacing from "../../css-utils/spacing.js";
-
-export default class {
-  async data() {
-    const dirname = path.dirname(fileURLToPath(import.meta.url));
-    const rawFilepath = path.join(dirname, "./global.css");
-    const rawCss = fs.readFileSync(rawFilepath);
-
-    const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
-
-    return {
-      permalink: `css/styles.css`,
-      excludeFromSitemap: true,
-      eleventyExcludeFromCollections: true,
-      rawFilepath,
-      rawCss: css,
-    };
-  }
-
-  async render({ rawCss, rawFilepath }) {
-    return await postcss([
-      postcssImportExtGlob,
-      postcssImport,
-      autoprefixer,
-      cssnano,
-    ])
-      .process(rawCss, { from: rawFilepath })
-      .then((result) => result.css);
-  }
-}

src/includes/layouts/base.html

@@ -8,7 +8,6 @@
             {% if title %}{{ title }} •{% endif %}
             {{ meta.siteName }}
         </title>
-        <link rel="stylesheet" href="/css/styles.css" />
         {% include "partials/meta.html" %}
         {% for preload in preloads %}
             <link rel="preload"
@@ -21,6 +20,10 @@
             <script type="module"
                     src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"></script>
         {% endif %}
+        {% set css %}
+            {% include "css/styles.css" %}
+        {% endset %}
+        <style>{{ css | postcss | safe }}</style>
     </head>
     <body class="flex-col">
         {% noRobots %}

src/utils/fonts.js

@@ -1,3 +0,0 @@
-import path from "path";
-
-export const getFontUrl = (src) => path.join("/assets/fonts", src);