@human-synthesis/norns 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@human-synthesis/norns",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Norns — SvelteKit with Civet, Pug, and the .n / .civet / .c file extensions",
   "license": "MIT",
   "author": "Daniel Teodoroiu (https://humansynthesis.ai)",

package/src/vite.js

@@ -1,4 +1,4 @@
-import { readFile, stat, realpath } from 'node:fs/promises';
+import { readFile, stat, realpath, readdir, mkdir, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 import { createRequire } from 'node:module';
 import { compile as compileCivet } from '@danielx/civet';
@@ -140,3 +140,153 @@ export function nornsCivetPlugin() {
 		}
 	};
 }
+
+/* === pugTailwindExtract ==================================================
+ *
+ * Tailwind v4's content extractor tokenizes candidates against a fixed
+ * non-class alphabet. Pug class-shorthand chains followed directly by an
+ * attribute paren — `.grid.gap-6(class="…")` — fail that tokenizer: the
+ * substring `.gap-6(` reads as one non-class token, so `gap-6` never
+ * reaches the candidate set and the CSS rule is never generated.
+ *
+ * Because the `tag.cls.cls(attrs)` form is idiomatic Pug, asking authors
+ * to either move every utility into `class="…"` or hand-maintain a
+ * safelist is a paper cut on every page they touch.
+ *
+ * This plugin walks every `.n` file under `root`, extracts each `.cls`
+ * segment via a permissive regex, and writes the deduplicated set into a
+ * single sidecar HTML file. Consumers reference the file from their CSS
+ * via `@source "./.tailwind-pug-classes.html";` so Tailwind picks it up
+ * like any other content source.
+ *
+ * The regex is permissive on purpose — it captures every `.candidate`
+ * segment in the source, including occasional false positives like
+ * `.svelte` inside template text. Those are free: Tailwind's own
+ * candidate-validation step drops anything that isn't a real utility, so
+ * the only cost is a few extra bytes in the sidecar.
+ *
+ * Runs with `enforce: 'pre'` so the scan sees the raw Pug source, not the
+ * Svelte output that the rest of the chain emits.
+ * ========================================================================
+ */
+
+/**
+ * Match every `.candidate` segment. Class names may contain Tailwind's
+ * full alphabet — letters, digits, `-`, `_`, `:`, `/`, and arbitrary-value
+ * brackets `[...]`. Pug shorthand never contains a `.` inside a class
+ * (the dot is the delimiter), so `text-[1.5rem]`-style values never appear
+ * in shorthand — those always live inside `class="…"`, which Tailwind
+ * extracts directly.
+ */
+const SEGMENT_RE = /\.([A-Za-z][\w\-:/]*(?:\[[^\]]*\])?)/g;
+
+function extractPugClasses(source) {
+	const out = new Set();
+	let m;
+	SEGMENT_RE.lastIndex = 0;
+	while ((m = SEGMENT_RE.exec(source))) {
+		if (m[1]) out.add(m[1]);
+	}
+	return out;
+}
+
+async function walkNFiles(dir, ext, out = []) {
+	let entries;
+	try {
+		entries = await readdir(dir, { withFileTypes: true });
+	} catch {
+		return out;
+	}
+	for (const entry of entries) {
+		const full = join(dir, entry.name);
+		if (entry.isDirectory()) {
+			if (entry.name === 'node_modules' || entry.name.startsWith('.')) continue;
+			await walkNFiles(full, ext, out);
+		} else if (entry.isFile() && full.endsWith(ext)) {
+			out.push(full);
+		}
+	}
+	return out;
+}
+
+/**
+ * Vite plugin that extracts Tailwind class candidates from Pug shorthand
+ * in `.n` files and writes them to a sidecar file Tailwind can scan.
+ *
+ * @param {object} [options]
+ * @param {string} [options.root]     Directory to scan (default `src`).
+ * @param {string} [options.ext]      File extension (default `.n`).
+ * @param {string} [options.outFile]  Sidecar path relative to root
+ *                                    (default `.tailwind-pug-classes.html`).
+ *                                    Reference it from your CSS with:
+ *                                      @source "./.tailwind-pug-classes.html";
+ *
+ * @returns {import('vite').Plugin}
+ */
+export function pugTailwindExtract({
+	root = 'src',
+	ext = '.n',
+	outFile = '.tailwind-pug-classes.html'
+} = {}) {
+	let projectRoot = process.cwd();
+	const fileClasses = new Map(); // absolute path -> Set<string>
+
+	async function writeSidecar() {
+		const all = new Set();
+		for (const set of fileClasses.values()) {
+			for (const c of set) all.add(c);
+		}
+		const sorted = [...all].sort();
+		const html =
+			'<!-- AUTO-GENERATED by @human-synthesis/norns/vite pugTailwindExtract. Do not edit. -->\n' +
+			`<div class="${sorted.join(' ')}"></div>\n`;
+		const out = join(projectRoot, root, outFile);
+		await mkdir(dirname(out), { recursive: true });
+		await writeFile(out, html, 'utf8');
+	}
+
+	async function scanFile(abs) {
+		try {
+			const content = await readFile(abs, 'utf8');
+			fileClasses.set(abs, extractPugClasses(content));
+		} catch {
+			fileClasses.delete(abs);
+		}
+	}
+
+	async function scanAll() {
+		const dir = join(projectRoot, root);
+		const files = await walkNFiles(dir, ext);
+		await Promise.all(files.map(scanFile));
+		await writeSidecar();
+	}
+
+	return {
+		name: 'norns:pug-tailwind-extract',
+		// Run before the Civet/Pug transform so the scan sees raw shorthand.
+		enforce: 'pre',
+		configResolved(config) {
+			projectRoot = config.root || process.cwd();
+		},
+		async buildStart() {
+			await scanAll();
+		},
+		async handleHotUpdate({ file }) {
+			if (!file.endsWith(ext)) return;
+			await scanFile(file);
+			await writeSidecar();
+		},
+		configureServer(server) {
+			server.watcher.on('add', async (file) => {
+				if (!file.endsWith(ext)) return;
+				await scanFile(file);
+				await writeSidecar();
+			});
+			server.watcher.on('unlink', async (file) => {
+				if (!file.endsWith(ext)) return;
+				fileClasses.delete(file);
+				await writeSidecar();
+			});
+		}
+	};
+}