feat(css): Reduce number of bundles (close #58)

mvsde · Jun 28, 2024 · 53baedb · 53baedb
1 parent 79e2598
commit 53baedb
Show file tree

Hide file tree

Showing 35 changed files with 246 additions and 305 deletions.
diff --git a/README.md b/README.md
@@ -22,14 +22,6 @@ node --run dev
 node --run build
 ```
 
-## Fonts
-
-Generate fonts fallback CSS file:
-
-```sh
-node generate-fonts-fallback.js
-```
-
 ## Formatting
 
 ```sh

diff --git a/components/page-base.webc → components/base-page.webc b/components/page-base.webc → components/base-page.webc
@@ -8,15 +8,47 @@
 			@text="isHomePage($data.page.url) ? 'Fynn Becker' : `${$data.title} - Fynn Becker`"
 		></title>
 
+		<!-- CSS -->
+
+		<link rel="stylesheet" href="/css/main.css" webc:keep />
+		<link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
+
+		<!-- Preload -->
+
+		<link
+			rel="preload"
+			href="/fonts/teko-latin-600-normal.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
+		<link
+			rel="preload"
+			href="/fonts/work-sans-latin-wght-normal.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
+		<link
+			rel="preload"
+			href="/fonts/work-sans-latin-wght-italic.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
+
+		<!-- Meta data -->
+
 		<meta
 			webc:if="$data.description"
 			name="description"
 			:content="$data.description"
 		/>
 		<meta name="generator" :content="$data.eleventy.generator" />
-
 		<link href="/feed.xml" type="application/atom+xml" rel="alternate" />
 
+		<!-- Theme -->
+
 		<link rel="icon" href="/favicon.ico" sizes="any" />
 		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
 		<meta
@@ -30,13 +62,17 @@
 			media="(prefers-color-scheme: dark)"
 		/>
 
+		<!-- Open Graph text -->
+
 		<meta property="og:site_name" content="fynn.be" />
 		<meta property="og:type" :content="$data.social?.type ?? 'website'" />
 		<meta property="og:url" :content="$data.base + $data.page.url" />
 		<meta property="og:title" :content="$data.title" />
 		<meta property="og:description" :content="$data.description" />
 		<meta property="og:locale" :content="$data.language" />
 
+		<!-- Open Graph image -->
+
 		<template webc:if="$data.social?.image" webc:nokeep>
 			<meta
 				property="og:image"
@@ -46,23 +82,6 @@
 			<meta property="og:image:width" content="500" />
 			<meta property="og:image:height" content="500" />
 		</template>
-
-		<link rel="stylesheet" href="/css/main.css" webc:keep />
-		<link
-			rel="stylesheet"
-			:href="getBundleFileUrl('css', 'components.element')"
-			webc:keep
-		/>
-		<link
-			rel="stylesheet"
-			:href="getBundleFileUrl('css', 'components.global')"
-			webc:keep
-		/>
-		<link
-			rel="stylesheet"
-			:href="getBundleFileUrl('css', 'layouts')"
-			webc:keep
-		/>
 	</head>
 	<body>
 		<global-header></global-header>
@@ -72,8 +91,11 @@
 				<h1 @text="$data.title"></h1>
 				<slot name="after-title"></slot>
 			</hgroup>
+
 			<global-hero webc:if="$data.hero"></global-hero>
+
 			<slot></slot>
+
 			<global-related webc:if="$data.related"></global-related>
 		</main>
 

diff --git a/components/element-icon.webc b/components/element-icon.webc
@@ -21,7 +21,9 @@
 	<path :d="paths[name]" />
 </svg>
 
-<style webc:bucket="components.element">
+<style>
+	@layer components.elements;
+
 	.Icon {
 		block-size: 1em;
 		fill: currentcolor;

diff --git a/components/element-meta.webc b/components/element-meta.webc
@@ -4,7 +4,9 @@
 	<element-tags webc:if="tags" :@items="tags" @variant="inline"></element-tags>
 </div>
 
-<style webc:bucket="components.element">
+<style>
+	@layer components.elements;
+
 	.Meta {
 		display: flex;
 		flex-wrap: wrap;

diff --git a/components/element-nav.webc b/components/element-nav.webc
@@ -19,7 +19,9 @@
 	</ul>
 </nav>
 
-<style webc:bucket="components.element">
+<style>
+	@layer components.elements;
+
 	.Nav-list {
 		align-items: center;
 		display: flex;
@@ -38,8 +40,8 @@
 		&.is-active {
 			color: var(--color-Brand);
 			text-decoration: underline;
-			text-decoration-thickness: 0.1em;
-			text-underline-offset: 0.4em;
+			text-decoration-thickness: var(--size-border-width-divider);
+			text-underline-offset: 0.375rem;
 		}
 	}
 

diff --git a/components/element-rich-text.webc b/components/element-rich-text.webc
@@ -2,7 +2,9 @@
 	<slot></slot>
 </div>
 
-<style webc:bucket="components.element">
+<style>
+	@layer components.elements;
+
 	.RichText {
 		font-size: var(--typo-RichText-font-size);
 		line-height: var(--typo-RichText-line-height);
@@ -68,40 +70,21 @@
 		}
 
 		blockquote {
-			border-inline-start: 0.25em solid var(--color-Brand);
-			padding-inline-start: 0.75em;
+			border-inline-start: var(--size-border-width-divider) solid currentcolor;
+			padding-inline-start: calc(1em - var(--size-border-width-divider));
 		}
 
 		hr {
-			background: var(--color-Brand);
-			block-size: 0.15em;
+			background: currentcolor;
+			block-size: var(--size-border-width-divider);
 			border: none;
 			margin-block: 2em;
 		}
 
-		/* Tables */
-
-		table {
-			border-collapse: collapse;
-			font-variant-numeric: tabular-nums;
-		}
-
-		th,
-		td {
-			border: 0.1em solid var(--color-Brand);
-			padding-block: 0.2em;
-			padding-inline: 0.5em;
-		}
-
-		th {
-			background: var(--color-HighlightBackground);
-		}
-
 		/* Note */
 
 		.Note {
 			background: var(--color-HighlightBackground);
-			border-radius: var(--size-border-radius);
 			padding: 1em;
 
 			> :first-child {

diff --git a/components/element-tags.webc b/components/element-tags.webc
@@ -8,7 +8,9 @@
 	</li>
 </ul>
 
-<style webc:bucket="components.element">
+<style>
+	@layer components.elements;
+
 	.Tags {
 		display: flex;
 		flex-wrap: wrap;

diff --git a/components/global-footer.webc b/components/global-footer.webc
@@ -7,9 +7,12 @@
 	</div>
 </footer>
 
-<style webc:bucket="components.global">
+<style>
+	@layer components.globals;
+
 	.Footer {
-		margin-block-start: 2rem;
-		padding-block: 1rem;
+		border-block-start: var(--size-border-width-divider) solid currentcolor;
+		margin-block-start: 3rem;
+		padding-block: 0.75rem;
 	}
 </style>
diff --git a/components/global-header.webc b/components/global-header.webc
@@ -4,12 +4,25 @@
 	</div>
 </header>
 
-<style webc:bucket="components.global">
+<style>
+	@layer components.globals;
+
 	.Header {
+		animation-fill-mode: both;
+		animation-name: header-border;
+		animation-range: 1rem 2rem;
+		animation-timeline: scroll(root);
 		background: var(--color-SiteBackground);
+		border-block-end: var(--size-border-width-divider) solid transparent;
 		inset-block-start: 0;
 		margin-block-end: 2rem;
 		padding-block: 0.75rem;
 		position: sticky;
 	}
+
+	@keyframes header-border {
+		to {
+			border-block-end-color: currentcolor;
+		}
+	}
 </style>
diff --git a/components/global-hero.webc b/components/global-hero.webc
@@ -27,7 +27,9 @@
 	></figcaption>
 </figure>
 
-<style webc:bucket="components.global">
+<style>
+	@layer components.globals;
+
 	.Hero {
 		display: grid;
 		gap: 0.5rem;

diff --git a/components/global-related.webc b/components/global-related.webc
@@ -14,7 +14,9 @@
 	</ul>
 </section>
 
-<style webc:bucket="components.global">
+<style>
+	@layer components.globals;
+
 	.Related {
 		margin-block-start: 2rem;
 	}

diff --git a/content/blog/2022-01-30-browser-image-performance.md b/content/blog/2022-01-30-browser-image-performance.md
@@ -52,7 +52,7 @@ Specifications: Intel Core 2 Duo T6400, 4 GB RAM, SATA1 HDD.
 | **.jpg**  |  177.5786 |     241.13594 |    29.14996 |    0.08198 |  270.36788 |
 | **.webp** |  126.1962 |     222.16746 |    28.57188 |    0.07598 |  250.81532 |
 
-<small>[Raw data for the slow device](https://gist.github.com/mvsde/babe7a3c07e0fb5f7b0529580216d357)</small>
+<small>[Raw data for the slow device](https://gist.github.com/mvsde/babe7a3c07e0fb5f7b0529580216d357).</small>
 
 ### Fast device
 
@@ -64,7 +64,7 @@ Specifications: Intel Core i7-10750H, 32 GB RAM, NVMe SSD.
 | **.jpg**  |  177.5786 |      195.2597 |     9.84462 |    0.02324 |   205.1275 |
 | **.webp** |  126.1962 |      188.9901 |    11.29712 |    0.02318 |   200.3104 |
 
-<small>[Raw data for the fast device](https://gist.github.com/mvsde/3e42f33723b0cfff296f01bedc0dea94)</small>
+<small>[Raw data for the fast device](https://gist.github.com/mvsde/3e42f33723b0cfff296f01bedc0dea94).</small>
 
 ## Takeaway
 

diff --git a/content/talks/2024-04-23-accessibility-is-not-a-tech-problem.md b/content/talks/2024-04-23-accessibility-is-not-a-tech-problem.md
@@ -7,7 +7,7 @@ tags:
 hero:
   iframe: https://pitch.com/embed-link/8fu9f8
   title: Slides for the talk “Accessibility is not a tech problem”
-  aspect_ratio: 1.595
+  aspect_ratio: 1.593
 ---
 
 Accessibility is the intersection of user experience and interface design, frontend and backend development, content management systems, and _human beings_.

diff --git a/content/talks/2024-05-16-forced-colors-windows-contrast-themes.md b/content/talks/2024-05-16-forced-colors-windows-contrast-themes.md
@@ -7,7 +7,7 @@ tags:
 hero:
   iframe: https://pitch.com/embed-link/w2wc4w
   title: Slides for the talk “Forced colors and Windows contrast themes”
-  aspect_ratio: 1.595
+  aspect_ratio: 1.593
 ---
 
 A showcase of _Windows contrast themes_ and the potential issues when _forced colors_ aren’t considered during development.

diff --git a/eleventy.config.js b/eleventy.config.js
@@ -8,6 +8,7 @@ import * as filters from "./eleventy/filters/index.js";
 import * as functions from "./eleventy/functions/index.js";
 import libraryMarkdown from "./eleventy/libraries/markdown.js";
 import imageFeed from "./eleventy/shortcodes/image-feed.js";
+import bundleCSSLayer from "./eleventy/transforms/bundle-css-layer.js";
 
 const directories = {
 	// Relative to current directory.
@@ -25,30 +26,11 @@ const passthroughCopyList = {
 	public: "/",
 };
 
-/**
- * Add CSS Cascade Layer to bundle
- * @param {string} content Bundle content
- * @returns {string}
- */
-function bundleAddLayer(content) {
-	const bucket = this.buckets[0];
-
-	if (!bucket) {
-		return content;
-	}
-
-	const layeredContent = `@layer ${bucket} {
-		${content}
-	}`;
-
-	return layeredContent;
-}
-
 const pluginWebcOptions = {
 	components: "components/**/*.webc",
 	bundlePluginOptions: {
 		toFileDirectory: "css/bundle",
-		transforms: [bundleAddLayer],
+		transforms: [bundleCSSLayer],
 	},
 };
 

diff --git a/eleventy/transforms/bundle-css-layer.js b/eleventy/transforms/bundle-css-layer.js
@@ -0,0 +1,22 @@
+/**
+ * Add CSS Cascade Layer to bundle
+ * @param {string} content Bundle content
+ * @returns {string}
+ */
+export default function bundleCSSLayer(content) {
+	if (this.type !== "css") {
+		return content;
+	}
+
+	if (!content.includes("@layer")) {
+		return content;
+	}
+
+	const layeredContent = content
+		.split("@layer")
+		.slice(1)
+		.map((part) => "@layer" + part.replace(";", " {") + "\n}")
+		.join("\n\n");
+
+	return layeredContent;
+}