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

Update CSS Pipeline #4

Merged
wonderfulfrog merged 7 commits from feat/update-css-pipeline into main 2025-05-30 11:16:38 -07:00
Conversation 0 Commits 7 Files changed 59 +57 -436
24 changed files with 57 additions and 436 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 788ef1dc8d - Show all commits

13
config/bundles/css.js Normal file
View file

@ -0,0 +1,13 @@
import postcss from "postcss";
import postcssImport from "postcss-import";
export default {
transforms: [
async function (content) {
const css = await postcss([postcssImport])
.process(content, { from: "src/includes/css/styles.css" })
.then((result) => result.css);
return css;
},
],
};

5
config/bundles/index.js Normal file
View file

@ -0,0 +1,5 @@
import css from "./css.js";
export default {
css,
};

22
config/design-tokens/colors.js
View file

@ -1,22 +0,0 @@
export default {
light: {
primary: "oklch(0.6 0.1025 212.16)",
secondary: "oklch(0.61 0.2232 31.48)",
background: "oklch(0.98 0 0)",
surface: "oklch(0.96 0.0078 207.9)",
border: "oklch(0.87 0.045077 207.8465)",
text: "oklch(0.15 0 0)",
fadeText: "oklch(0.45 0.0214 207.84)",
shadow: "oklch(0.39 0.0688 212.35)",
},
dark: {
primary: "oklch(0.57 0.0991 213.4)",
secondary: "oklch(0.55 0.1982 31.52)",
background: "oklch(0.2 0 0)",
surface: "oklch(0.26 0.0106 233.21)",
border: "oklch(0.27 0.0238 245.26)",
text: "oklch(0.98 0 0)",
fadeText: "oklch(0.78 0.018 207.85)",
shadow: "oklch(0.39 0.0688 212.35)",
},
};

11
config/design-tokens/spacing.js
View file

@ -1,11 +0,0 @@
export default {
0: 0,
0.25: 4,
0.5: 8,
1: 16,
1.5: 24,
2: 32,
3: 48,
4: 64,
5: 80,
};

2
config/filters/index.js
View file

@ -2,7 +2,6 @@ import collection from "./collection.js";
import date from "./date.js";
import feed from "./feed.js";
import general from "./general.js";
import postcss from "./postcss/index.js";
import tag from "./tag.js";
export default {
@ -10,6 +9,5 @@ export default {
...date,
...feed,
...general,
...postcss,
...tag,
};

5
config/filters/postcss/index.js
View file

@ -1,5 +0,0 @@
import postcss from "./postcss.js";
export default {
...postcss,
};

32
config/filters/postcss/postcss.js
View file

@ -1,32 +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 { default as postcssBase } 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 postcssBase([
postcssImportExtGlob,
postcssImport,
autoprefixer,
cssnano,
])
.process(css, { from: "src/includes/css/styles.css" })
.then((result) => result.css);
};
export default {
postcss,
};

34
config/filters/postcss/utils/colors.js
View file

@ -1,34 +0,0 @@
import colorSchemes from "../../../design-tokens/colors.js";
import { helperClassesToCss } from "./helper-classes.js";
const lightScheme = colorSchemes.light;
const darkScheme = colorSchemes.dark;
const colorToCss = (key, value) => `--color-${key}: ${value};`;
const colorSchemeToCss = (scheme) =>
Object.entries(scheme).reduce(
(css, [key, value]) => css + colorToCss(key, value),
``,
);
const lightCss = colorSchemeToCss(lightScheme);
const darkCss = colorSchemeToCss(darkScheme);
const colorSchemeToHelperClassesCss = (scheme, helperClasses) => {
return Object.entries(scheme).reduce((css, [key]) => {
return css + helperClassesToCss(helperClasses, key, `var(--color-${key})`);
}, ``);
};
const helperClasses = [
["text", ["color"]],
["bg", ["background-color"]],
];
const helperClassesCss = colorSchemeToHelperClassesCss(
lightScheme,
helperClasses,
);
export default `:root{${lightCss}}${helperClassesCss}@media (prefers-color-scheme: dark) {:root{${darkCss}}}`;

58
config/filters/postcss/utils/font-family.js
View file

@ -1,58 +0,0 @@
import path from "path";
import fonts from "../../../design-tokens/fonts.js";
const getFontUrl = (src) => path.join("/assets/fonts", src);
const fontsToCss = (fonts) => {
return Object.entries(fonts).reduce((css, [, fontProperties]) => {
const family = fontProperties.family;
const format = fontProperties.format;
const styles = fontProperties.styles;
return (
css +
Object.entries(styles).reduce((css, [variant, fontFamily]) => {
const url = getFontUrl(fontFamily.path);
const style = fontFamily.fontStyle;
const weight = fontFamily.fontWeight;
const stretch = fontFamily.fontStretch;
const postScriptName = [family, variant].join("-").replaceAll(" ", "");
return (
css +
fontFamilyToCss(
family,
style,
weight,
stretch,
url,
family,
postScriptName,
format,
)
);
}, ``)
);
}, ``);
};
const fontFamilyToCss = (
family,
style,
weight,
stretch,
url,
localName,
postScriptName,
format,
) => `@font-face {
font-family: ${family};
font-style: ${style};
font-weight: ${weight};
font-stretch: ${stretch};
font-display: swap;
src: local("${localName}"), local("${postScriptName}"), url("${url}") format("${format}")
}\n`;
export default fontsToCss(fonts);

57
config/filters/postcss/utils/font-variables.js
View file

@ -1,57 +0,0 @@
/*
* Fallbacks from Modern Font Stacks.
* https://modernfontstacks.com/
*/
import fonts from "../../../design-tokens/fonts.js";
const displayFallbacks = [
"ui-monospace",
"Cascadia Code",
"Source Code Pro",
"Menlo",
"Consolas",
"DejaVu Sans Mono",
"monospace",
];
const bodyFallbacks = [
"ui-monospace",
"Cascadia Code",
"Source Code Pro",
"Menlo",
"Consolas",
"DejaVu Sans Mono",
"monospace",
];
const monoFallbacks = [
"ui-monospace",
"Cascadia Code",
"Source Code Pro",
"Menlo",
"Consolas",
"DejaVu Sans Mono",
"monospace",
];
const fallbacks = {
display: displayFallbacks,
body: bodyFallbacks,
monospace: monoFallbacks,
};
const fontsToCss = (fonts) => {
return Object.entries(fonts).reduce((css, [fontType, fontProperties]) => {
const family = fontProperties.family;
const fontTypeCss = fontFamilyToCss(fontType, family);
return css + fontTypeCss;
}, ``);
};
const fontFamilyToCss = (type, value) =>
`--font-family-${type}: ${value},${fallbacks[type].join(",")};`;
export default `:root{${fontsToCss(fonts)}}`;

43
config/filters/postcss/utils/helper-classes.js
View file

@ -1,43 +0,0 @@
/**
* Given an array of CSS properties, output css properties
* with each property equal to `value`
*/
export const cssPropertiesToCss = (cssProperties, value) => {
return cssProperties.reduce((css, cssProp) => {
return css + `${cssProp}:${value};`;
}, ``);
};
/**
* Given a helperClass (string) and array of cssProperties,
* will generate a css class named helperClass that has
* all cssProperties mapped to value.
*/
export const helperClassToCss = (helperClass, cssProperties, value) => {
const cssProps = cssPropertiesToCss(cssProperties, value);
return `.${helperClass}{${cssProps}}`;
};
/**
* Given an array of helperClasses that map to cssProperties,
* output a string of CSS that maps the helperClass (with variant modifier)
* to the array of css properties with each css property equal to
* value
*
* e.g.
* helperClasses = [["text", ["color"]]],
* variant = "primary",
* value = "#000"
*
* Will output the following:
* .text-primary {
* color: #000;
* }
*/
export const helperClassesToCss = (helperClasses, variant, value) => {
return helperClasses.reduce((css, [helperClass, cssProperties]) => {
return (
css + helperClassToCss(`${helperClass}-${variant}`, cssProperties, value)
);
}, ``);
};

51
config/filters/postcss/utils/spacing.js
View file

@ -1,51 +0,0 @@
import spacing from "../../../design-tokens/spacing.js";
import { helperClassesToCss } from "./helper-classes.js";
const spacingToCss = (variant, value) =>
`--spacing-${variant.replace(".", "\\.")}: ${value}px;`;
const spacingToHelperClassesCss = (spacingValues, helperClasses) => {
return Object.entries(spacingValues).reduce((css, [spacingVariant]) => {
const variant = spacingVariant.replace(".", "\\.");
return (
css +
helperClassesToCss(helperClasses, variant, `var(--spacing-${variant})`)
);
}, ``);
};
const helperClasses = [
["m", ["margin"]],
["my", ["margin-block-start", "margin-block-end"]],
["mx", ["margin-inline-start", "margin-inline-end"]],
["ml", ["margin-inline-start"]],
["mr", ["margin-inline-start"]],
["mt", ["margin-block-start"]],
["mb", ["margin-block-end"]],
["p", ["padding"]],
["py", ["padding-block-start", "padding-block-end"]],
["px", ["padding-inline-start", "padding-inline-end"]],
["pl", ["padding-inline-start"]],
["pr", ["padding-inline-start"]],
["pt", ["padding-block-start"]],
["pb", ["padding-block-end"]],
["w", ["width"]],
["h", ["height"]],
["size", ["width", "height"]],
["radius", ["border-radius"]],
["gap", ["gap"]],
["row-gap", ["row-gap"]],
["column-gap", ["column-gap"]],
["flow-space", ["--flow-space"]],
];
const spacingVariablesCss = Object.entries(spacing).reduce(
(css, [variant, value]) => css + spacingToCss(variant, value),
``,
);
const helperCss = spacingToHelperClassesCss(spacing, helperClasses);
const css = `:root{${spacingVariablesCss}}${helperCss}`;
export default css;

3
config/transforms/index.js
View file

@ -1,4 +1,3 @@
import htmlConfigTransform from "./html-config.js";
import xmlConfigTransform from "./xml-config.js";
export default { htmlConfigTransform, xmlConfigTransform };
export default { htmlConfigTransform };

12
config/transforms/xml-config.js
View file

@ -1,12 +0,0 @@
import minifyXML from "minify-xml";
export default function (eleventyConfig) {
eleventyConfig.addTransform("xml-minify", (content, path) => {
if (path && path.endsWith(".xml")) {
return minifyXML(content, {
shortenNamespaces: false,
});
}
return content;
});
}

9
eleventy.config.js
View file

@ -1,15 +1,13 @@
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
import { collectionByTag } from "./config/collections/index.js";
import bundles from "./config/bundles/index.js";
import filters from "./config/filters/index.js";
import markdown from "./config/plugins/markdown.js";
import shortcodes from "./config/shortcodes/index.js";
import transforms from "./config/transforms/index.js";
export default function (eleventyConfig) {
// --------------------- Watch Targets -----------------------
eleventyConfig.addWatchTarget("./src/includes/css");
// --------------------- Passthrough File Copy -----------------------
["src/assets/fonts/", "src/assets/images"].forEach((path) =>
eleventyConfig.addPassthroughCopy(path),
@ -18,6 +16,11 @@ export default function (eleventyConfig) {
// --------------------- Markdown -----------------------
eleventyConfig.setLibrary("md", markdown);
// --------------------- Bundles -----------------------
Object.keys(bundles).forEach((bundleName) => {
eleventyConfig.addBundle(bundleName, bundles[bundleName]);
});
// --------------------- Collections -----------------------
eleventyConfig.addCollection("postsByTag", (collection) =>
collectionByTag(collection, "post"),

2
package.json
View file

@ -31,11 +31,9 @@
"markdown-it-footnote": "^4.0.0",
"markdown-it-image-figures": "^2.1.1",
"markdown-it-prism": "^2.3.0",
"minify-xml": "^4.5.2",
"pluralize": "^8.0.0",
"postcss": "^8.5.3",
"postcss-import": "^16.1.0",
"postcss-import-ext-glob": "^2.1.1",
"upload-to-bunny": "^1.4.0"
}
}

1
src/includes/css/global/lilypad.css Normal file
View file

File diff suppressed because one or more lines are too long

22
src/includes/css/styles.css
View file

@ -1,8 +1,22 @@
@import "global/reset.css";
@import "global/variables.css";
@import "global/global-styles.css";
@import-glob "blocks/*.css";
@import-glob "compositions/*.css";
@import-glob "utilities/*.css";
@import "blocks/button.css";
@import "blocks/card.css";
@import "blocks/media-display.css";
@import "blocks/media-grid.css";
@import "blocks/pill.css";
@import "blocks/posts.css";
@import "blocks/prism.css";
@import "blocks/site-header.css";
@import "blocks/site-logo.css";
@import "blocks/stars.css";
@import "compositions/cluster.css";
@import "compositions/repel.css";
@import "utilities/fonts.css";
@import "utilities/image.css";
@import "utilities/table.css";
@import "utilities/wrapper.css";

32
src/includes/css/utilities/flex.css
View file

@ -1,32 +0,0 @@
.flex {
display: flex;
}
.flex-col {
display: flex;
flex-direction: column;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-1 {
flex: 1;
}

8
src/includes/css/utilities/flow.css
View file

@ -1,8 +0,0 @@
/*
* FLOW UTILITY
* Like the Every Layout stack: https://every-layout.dev/layouts/stack/
* Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
*/
.flow > * + * {
margin-block-start: var(--flow-space, 1em);
}

20
src/includes/css/utilities/fonts.css
View file

@ -2,22 +2,6 @@
font-size: 1rem;
}
.font-size-m {
font-size: 1.125rem;
}
.font-size-l {
font-size: 1.5rem;
}
.font-size-xl {
font-size: 2rem;
}
.font-size-2xl {
font-size: 3rem;
}
.line-height-s {
line-height: 0.8rem;
}
@ -29,7 +13,3 @@
.line-height-l {
line-height: 1.5rem;
}
.line-height-xl {
line-height: 2rem;
}

11
src/includes/css/utilities/list.css
View file

@ -1,11 +0,0 @@
.list-none {
list-style-type: none;
}
.list-disc {
list-style-type: disc;
}
.list-decimal {
list-style-type: decimal;
}

15
src/includes/css/utilities/visually-hidden.css
View file

@ -1,15 +0,0 @@
/*
* VISUALLY HIDDEN UTILITY
* Info: https://piccalil.li/quick-tip/visually-hidden/
*/
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}

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

@ -20,16 +20,17 @@
<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">
{% include "partials/header.html" %}
<main id="main" class="flow flex-1 wrapper" tabindex="-1">
{{ content | safe }}
</main>
{% include "partials/footer.html" %}
</body>
<style>{% include "css/global/lilypad.css" %}</style>
{% css %}
{% include "css/styles.css" %}
{% endcss %}
<link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
</head>
<body class="flex flex-col">
{% include "partials/header.html" %}
<main id="main" class="flow flex-1 wrapper" tabindex="-1">
{{ content | safe }}
</main>
{% include "partials/footer.html" %}
</body>
</html>