nichoth nichoth

This week, I wrote about using the CSS @import rule to modularize CSS, and some performance challenges with that approach.

tl;dr: the issue isn't the @import rule itself, but that files under 1kb often end up the same size or even bigger when gzipped, so you get no compression benefits.

I ran a few additional tests, and wanted to share the data I found.

Current Setup

40 modular CSS files
All imported from a single kelp.css file hosted on JSDelivr

	function fromUrlEncoded (base64url:string):Record<string, any> {
	const base64Url = token.split('.')[1];
	const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
	return JSON.parse(atob(base64));
	}

	// Generate X25519 key pairs
	async function generateX25519KeyPair(): Promise<CryptoKeyPair> {
	return await crypto.subtle.generateKey(
	{
	name: "X25519"
	},
	true, // extractable
	["deriveKey", "deriveBits"]
	);
	}

	export const NDASH = '\u2013'

	export const EM_DASH = '\u2014'

	export const NBSP = '\u00A0'

	export const ELLIPSIS = '\u2026'

	/*
	see https://smolcss.dev/#smol-css-grid
	*/

	.smol-css-grid {
	--min: 15ch;
	--gap: 1rem;

	display: grid;
	grid-gap: var(--gap);

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Automerge (Vanilla JS, Unbundled) Demo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body>
	<script type="module">
	// The ?bundle-deps here is very dodgy...

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Signals</title>
	</head>
	<body>
	<button id="decrement">
	-

	// @ts-check
	import puppeteer from 'puppeteer'
	import fs from 'node:fs/promises'
	import path from 'node:path'
	import { fileURLToPath } from 'node:url'
	const __filename = fileURLToPath(import.meta.url)
	const __dirname = path.dirname(__filename)
	const ANIMATION_FRAMES = 30 // 1/2 second

	const outputDir = path.join(__dirname, '..', 'screenshots')