wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: add postcss filter

Browse source 
All CSS processing is handled by the filter, and is now inlined into the
HTML
This commit is contained in:
Devin Haska 2025-03-16 12:07:31 -07:00
parent 6a84af0c37
commit 2aa912399c
14 changed files with 53 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/includes/css/styles.11ty.js
View file

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

0
src/includes/css/global.css → src/includes/css/styles.css
View file

5
src/includes/layouts/base.html
View file

@ -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 %}