From 2aa912399c5238d58638f3ab03e7f912439fe309 Mon Sep 17 00:00:00 2001
From: Devin Haska <2636402+wonderfulfrog@users.noreply.github.com>
Date: Sun, 16 Mar 2025 12:07:31 -0700
Subject: [PATCH] feat: add postcss filter
All CSS processing is handled by the filter, and is now inlined into the
HTML
---
config/constants/paths.js | 1 +
config/filters/postcss/postcss.js | 30 ++++++++++++
.../filters/postcss/utils}/colors.js | 2 +-
.../filters/postcss/utils}/font-family.js | 8 ++-
.../filters/postcss/utils}/font-variables.js | 2 +-
.../filters/postcss/utils}/helper-classes.js | 0
.../filters/postcss/utils}/spacing.js | 2 +-
config/transforms/html-config.js | 2 +-
eleventy.config.js | 3 ++
src/data/preloads.js | 6 ++-
src/includes/css/styles.11ty.js | 49 -------------------
src/includes/css/{global.css => styles.css} | 0
src/includes/layouts/base.html | 5 +-
src/utils/fonts.js | 3 --
14 files changed, 53 insertions(+), 60 deletions(-)
create mode 100644 config/constants/paths.js
create mode 100644 config/filters/postcss/postcss.js
rename {src/css-utils => config/filters/postcss/utils}/colors.js (93%)
rename {src/css-utils => config/filters/postcss/utils}/font-family.js (84%)
rename {src/css-utils => config/filters/postcss/utils}/font-variables.js (95%)
rename {src/css-utils => config/filters/postcss/utils}/helper-classes.js (100%)
rename {src/css-utils => config/filters/postcss/utils}/spacing.js (96%)
delete mode 100644 src/includes/css/styles.11ty.js
rename src/includes/css/{global.css => styles.css} (100%)
delete mode 100644 src/utils/fonts.js
diff --git a/config/constants/paths.js b/config/constants/paths.js
new file mode 100644
index 0000000..84c13ef
--- /dev/null
+++ b/config/constants/paths.js
@@ -0,0 +1 @@
+export const ASSETS_FONTS_PATH = "/assets/fonts";
diff --git a/config/filters/postcss/postcss.js b/config/filters/postcss/postcss.js
new file mode 100644
index 0000000..d622b43
--- /dev/null
+++ b/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;
diff --git a/src/css-utils/colors.js b/config/filters/postcss/utils/colors.js
similarity index 93%
rename from src/css-utils/colors.js
rename to config/filters/postcss/utils/colors.js
index b03f18f..1aaff02 100644
--- a/src/css-utils/colors.js
+++ b/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;
diff --git a/src/css-utils/font-family.js b/config/filters/postcss/utils/font-family.js
similarity index 84%
rename from src/css-utils/font-family.js
rename to config/filters/postcss/utils/font-family.js
index 4192a92..1693a69 100644
--- a/src/css-utils/font-family.js
+++ b/config/filters/postcss/utils/font-family.js
@@ -1,5 +1,9 @@
-import { getFontUrl } from "../utils/fonts.js";
-import fonts from "../../config/design-tokens/fonts.js";
+import path from "path";
+
+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]) => {
diff --git a/src/css-utils/font-variables.js b/config/filters/postcss/utils/font-variables.js
similarity index 95%
rename from src/css-utils/font-variables.js
rename to config/filters/postcss/utils/font-variables.js
index 9779bbb..b100180 100644
--- a/src/css-utils/font-variables.js
+++ b/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",
diff --git a/src/css-utils/helper-classes.js b/config/filters/postcss/utils/helper-classes.js
similarity index 100%
rename from src/css-utils/helper-classes.js
rename to config/filters/postcss/utils/helper-classes.js
diff --git a/src/css-utils/spacing.js b/config/filters/postcss/utils/spacing.js
similarity index 96%
rename from src/css-utils/spacing.js
rename to config/filters/postcss/utils/spacing.js
index 8f07f9d..22ae220 100644
--- a/src/css-utils/spacing.js
+++ b/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) =>
diff --git a/config/transforms/html-config.js b/config/transforms/html-config.js
index ab76345..2224d2c 100644
--- a/config/transforms/html-config.js
+++ b/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,
diff --git a/eleventy.config.js b/eleventy.config.js
index 030d16d..ccfc088 100644
--- a/eleventy.config.js
+++ b/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);
diff --git a/src/data/preloads.js b/src/data/preloads.js
index 8640fdb..4f6f3a9 100644
--- a/src/data/preloads.js
+++ b/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",
diff --git a/src/includes/css/styles.11ty.js b/src/includes/css/styles.11ty.js
deleted file mode 100644
index 33458ca..0000000
--- a/src/includes/css/styles.11ty.js
+++ /dev/null
@@ -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);
- }
-}
diff --git a/src/includes/css/global.css b/src/includes/css/styles.css
similarity index 100%
rename from src/includes/css/global.css
rename to src/includes/css/styles.css
diff --git a/src/includes/layouts/base.html b/src/includes/layouts/base.html
index dc9c2ce..0fa8c82 100644
--- a/src/includes/layouts/base.html
+++ b/src/includes/layouts/base.html
@@ -8,7 +8,6 @@
{% if title %}{{ title }} •{% endif %}
{{ meta.siteName }}
-
{% include "partials/meta.html" %}
{% for preload in preloads %}
{% endif %}
+ {% set css %}
+ {% include "css/styles.css" %}
+ {% endset %}
+
{% noRobots %}
diff --git a/src/utils/fonts.js b/src/utils/fonts.js
deleted file mode 100644
index aa74de0..0000000
--- a/src/utils/fonts.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import path from "path";
-
-export const getFontUrl = (src) => path.join("/assets/fonts", src);