@codenhub/styles 0.8.0 → 0.9.0

package/dist/cli.js

@@ -1,15 +1,213 @@
 #!/usr/bin/env node
-import { createRequire } from "node:module";
 import { existsSync, readFileSync } from "node:fs";
 import * as fs from "node:fs/promises";
 import path from "node:path";
-import { fileURLToPath, pathToFileURL } from "node:url";
+import { fileURLToPath } from "node:url";
 import { parseArgs } from "node:util";
+// src/cli/purge.ts
+const GROUPS = /* @__PURE__ */ new Set([
+	"@media",
+	"@supports",
+	"@layer",
+	"@container",
+	"@scope",
+	"@starting-style"
+]);
+const IDENT = /^(?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w-]|\P{ASCII})+/u;
+const ANY_OF = /* @__PURE__ */ new Set([
+	"is",
+	"where",
+	"has"
+]);
+/** Returns the index just past the string or comment that starts at `index`, or `index` when none does. */
+function skipInert(css, index) {
+	const char = css[index];
+	if (char === "\"" || char === "'") {
+		for (let i = index + 1; i < css.length; i++) if (css[i] === "\\") i++;
+		else if (css[i] === char) return i + 1;
+		return css.length;
+	}
+	if (char === "/" && css[index + 1] === "*") {
+		const end = css.indexOf("*/", index + 2);
+		return end === -1 ? css.length : end + 2;
+	}
+	return index;
+}
+/** Returns the index of the first `stop` character at bracket depth zero from `from`, or `end` when there is none. */
+function findTop(css, from, end, stop) {
+	let depth = 0;
+	for (let i = from; i < end; i++) {
+		const next = skipInert(css, i);
+		if (next !== i) {
+			i = next - 1;
+			continue;
+		}
+		const char = css[i];
+		if (char === "\\") i++;
+		else if (depth === 0 && stop.includes(char)) return i;
+		else if (char === "(" || char === "[" || char === "{") depth++;
+		else if (char === ")" || char === "]" || char === "}") depth--;
+	}
+	return end;
+}
+function splitTop(text, separator) {
+	const parts = [];
+	let from = 0;
+	while (from <= text.length) {
+		const at = findTop(text, from, text.length, separator);
+		parts.push(text.slice(from, at));
+		from = at + 1;
+	}
+	return parts;
+}
+function parse(css, start = 0, end = css.length) {
+	const nodes = [];
+	let index = start;
+	while (index < end) {
+		let comment = index;
+		while (comment < end && /\s/.test(css[comment])) comment++;
+		if (css.startsWith("/*", comment)) {
+			const after = skipInert(css, comment);
+			nodes.push({
+				kind: "statement",
+				text: css.slice(index, after)
+			});
+			index = after;
+			continue;
+		}
+		const open = findTop(css, index, end, "{;");
+		if (open >= end || css[open] === ";") {
+			nodes.push({
+				kind: "statement",
+				text: css.slice(index, Math.min(open + 1, end))
+			});
+			index = open + 1;
+			continue;
+		}
+		const close = findTop(css, open + 1, end, "}");
+		const prelude = css.slice(index, open);
+		const atRule = /^\s*(@[\w-]+)/.exec(prelude)?.[1];
+		if (atRule !== void 0 && GROUPS.has(atRule)) nodes.push({
+			kind: "group",
+			prelude,
+			children: parse(css, open + 1, close)
+		});
+		else nodes.push({
+			kind: "block",
+			prelude,
+			body: css.slice(open + 1, close),
+			isRule: atRule === void 0
+		});
+		index = close + 1;
+	}
+	return nodes;
+}
+function serialize(nodes) {
+	let css = "";
+	for (const node of nodes) if (node.kind === "statement") css += node.text;
+	else if (node.kind === "group") css += `${node.prelude}{${serialize(node.children)}}`;
+	else css += `${node.prelude}{${node.body}}`;
+	return css;
+}
+/** Writes the tree one declaration to a line, for `--no-minify`. */
+function format(nodes, indent = "") {
+	let css = "";
+	for (const node of nodes) if (node.kind === "statement") css += `${indent}${node.text.trim()}\n`;
+	else if (node.kind === "group") css += `${indent}${node.prelude.trim()} {\n${format(node.children, `${indent}  `)}${indent}}\n`;
+	else if (node.isRule) {
+		const selectors = splitTop(node.prelude, ",").map((selector) => selector.trim());
+		const declarations = splitTop(node.body, ";").filter((declaration) => declaration.trim() !== "");
+		css += `${indent}${selectors.join(`,\n${indent}`)} {\n`;
+		css += declarations.map((declaration) => `${indent}  ${declaration.trim()};\n`).join("");
+		css += `${indent}}\n`;
+	} else css += `${indent}${node.prelude.trim()} { ${node.body} }\n`;
+	return css;
+}
+function unescapeIdent(raw) {
+	return raw.replace(/\\([0-9a-fA-F]{1,6})\s?|\\(.)/g, (_, hex, char) => {
+		if (hex === void 0) return char;
+		const code = Number.parseInt(hex, 16);
+		return code === 0 || code >= 55296 && code <= 57343 || code > 1114111 ? "�" : String.fromCodePoint(code);
+	});
+}
+/**
+* Says whether a selector can match in markup whose classes are all in `used`.
+* Every class the selector requires has to be there. A class inside `:not()` is
+* never required, and of the selectors inside `:is()`, `:where()`, and `:has()`
+* one is enough. `onClass`, when given, is told every class name it reads.
+*/
+function canMatch(selector, used, onClass) {
+	let isMatch = true;
+	for (let i = 0; i < selector.length; i++) {
+		const next = skipInert(selector, i);
+		if (next !== i) {
+			i = next - 1;
+			continue;
+		}
+		const char = selector[i];
+		if (char === "\\") i++;
+		else if (char === "[") i = findTop(selector, i + 1, selector.length, "]");
+		else if (char === ".") {
+			const raw = IDENT.exec(selector.slice(i + 1))?.[0];
+			if (raw !== void 0) {
+				const name = unescapeIdent(raw);
+				onClass?.(name);
+				isMatch &&= used.has(name);
+				i += raw.length;
+			}
+		} else if (char === ":") {
+			const pseudo = /^::?([\w-]+)\(/.exec(selector.slice(i));
+			if (pseudo !== null) {
+				const open = i + pseudo[0].length;
+				const close = findTop(selector, open, selector.length, ")");
+				const branches = splitTop(selector.slice(open, close), ",");
+				if (ANY_OF.has(pseudo[1])) {
+					const results = branches.map((branch) => canMatch(branch, used, onClass));
+					isMatch &&= results.includes(true);
+				} else if (onClass !== void 0) for (const branch of branches) canMatch(branch, used, onClass);
+				i = close;
+			}
+		}
+		if (!isMatch && onClass === void 0) return false;
+	}
+	return isMatch;
+}
+function isLayer(node) {
+	return node.kind === "group" && /^\s*@layer\b/.test(node.prelude);
+}
+function isEmptyLayer(node) {
+	return node.kind === "group" && isLayer(node) && node.children.every(isEmptyLayer);
+}
+/**
+* Returns the tree without the rules that cannot match `used`. A selector list
+* keeps only its selectors that can. A `@layer` block emptied this way stays,
+* because where it first stands fixes the layer's place in the cascade, unless
+* it is all that is left of a `@media` or `@supports` block: those hold a
+* variant's rules, which come after the layer's first block.
+*/
+function purge(nodes, used) {
+	const kept = [];
+	for (const node of nodes) if (node.kind === "group") {
+		const children = purge(node.children, used);
+		if (isLayer(node) ? true : children.some((child) => !isEmptyLayer(child))) kept.push({
+			...node,
+			children
+		});
+	} else if (node.kind === "block" && node.isRule) {
+		const selectors = splitTop(node.prelude, ",").filter((selector) => canMatch(selector, used));
+		if (selectors.length > 0) kept.push({
+			...node,
+			prelude: selectors.join(",")
+		});
+	} else kept.push(node);
+	return kept;
+}
 // src/cli/run.ts
-const BIN = "codenhub-styles";
+const BIN = "chs";
 const MIN_NODE_MAJOR = 24;
-const TAILWIND_PACKAGES = ["@tailwindcss/cli", "tailwindcss"];
-const TW_AESTHETIC_EXPORT = /^\.\/tw\/aesthetics\/([^/]+)$/;
+const AESTHETIC_EXPORT = /^\.\/aesthetics\/([^/]+)$/;
+const PURGE_SOURCE = "dist/purge/index.css";
+const PURGE_CLASSES = "dist/purge/classes.json";
 const USAGE = `Usage: ${BIN} build --content <glob> [--content <glob> ...] --output <file> [options]
 
 Builds a StyleKit stylesheet holding only the classes your templates use.
@@ -22,7 +220,6 @@ Options:
   --no-minify            Write readable CSS instead of minified CSS.
   --help                 Show this help.
   --version              Show the version.`;
-const POLYFILLS_NONE = 0;
 async function run(argv, io) {
 	try {
 		const parsed = parseCommandLine(argv);
@@ -90,47 +287,46 @@ function parseFlags(argv) {
 }
 async function build(options, io) {
 	assertNodeVersion(io.nodeVersion);
-	const tailwind = loadTailwind(io);
 	const validAesthetics = readAestheticNames();
 	const unknown = options.aesthetics.find((name) => !validAesthetics.includes(name));
 	if (unknown !== void 0) throw new Error(`unknown aesthetic "${unknown}"; choose from ${validAesthetics.join(", ")}.`);
-	await Promise.all(options.contentGlobs.map((pattern) => assertMatches(pattern, io.cwd)));
+	const files = new Set((await Promise.all(options.contentGlobs.map((pattern) => findFiles(pattern, io.cwd)))).flat());
+	const contents = [];
+	for (const file of files) contents.push(await fs.readFile(file, "utf8"));
+	const droppable = new Set(JSON.parse(await readPackageFile(PURGE_CLASSES)));
+	const found = new Set(contents.flatMap((content) => findClasses(content, droppable)));
+	const used = { has: (name) => found.has(name) || !droppable.has(name) };
+	const stylesheets = await Promise.all([PURGE_SOURCE, ...options.aesthetics.map((name) => resolveExport(`./aesthetics/${name}`))].map(readPackageFile));
+	const write = options.shouldMinify ? serialize : format;
+	const css = stylesheets.map((stylesheet) => write(purge(parse(stylesheet), used))).join("");
 	const output = path.resolve(io.cwd, options.output);
-	const input = [
-		`@import ${cssString(resolveExport("./tw"))};`,
-		...options.aesthetics.map((name) => `@import ${cssString(resolveExport(`./tw/aesthetics/${name}`))};`),
-		...options.contentGlobs.map((pattern) => `@source ${cssString(toCssPath(path.resolve(io.cwd, pattern)))};`)
-	].join("\n");
+	const temporary = `${output}.${process.pid}.tmp`;
 	try {
-		const css = await compileStylesheet(tailwind, input, io.cwd, options.shouldMinify);
 		await fs.mkdir(path.dirname(output), { recursive: true });
-		await fs.writeFile(output, css);
+		await fs.writeFile(temporary, css);
+		await fs.rename(temporary, output);
 	} catch (error) {
-		throw new Error(`Tailwind failed to build the stylesheet: ${error instanceof Error ? error.message : String(error)}`);
+		await fs.rm(temporary, { force: true }).catch(() => void 0);
+		throw new Error(`cannot write the stylesheet: ${error instanceof Error ? error.message : String(error)}`);
 	}
 	return output;
 }
-async function assertMatches(pattern, cwd) {
+/** Returns the files a `--content` glob matches, as absolute paths, and fails when there are none. */
+async function findFiles(pattern, cwd) {
+	const files = [];
 	for await (const entry of fs.glob(pattern, {
 		cwd,
 		withFileTypes: true
-	})) if (entry.isFile()) return;
-	throw new Error(`--content "${pattern}" matches no file in ${cwd}; check the path, or run from the project root.`);
-}
-async function compileStylesheet(tailwind, input, cwd, shouldMinify) {
-	const compiler = await tailwind.compile(input, {
-		base: cwd,
-		from: path.join(cwd, "codenhub-styles.css"),
-		polyfills: POLYFILLS_NONE,
-		onDependency() {}
-	});
-	const scanner = new tailwind.Scanner({ sources: compiler.sources });
-	const css = compiler.build(scanner.scan());
-	return shouldMinify ? tailwind.optimize(css, { minify: true }).code : css;
+	})) if (entry.isFile()) files.push(path.resolve(entry.parentPath, entry.name));
+	if (files.length === 0) throw new Error(`--content "${pattern}" matches no file in ${cwd}; check the path, or run from the project root.`);
+	return files;
+}
+function findClasses(content, known) {
+	return content.split(/[^\w:-]+/).flatMap((word) => known.has(word) ? [word] : word.split(":")).filter((word) => known.has(word));
 }
 function readAestheticNames() {
 	const { exports } = readManifest();
-	return Object.keys(exports).map((subpath) => TW_AESTHETIC_EXPORT.exec(subpath)?.[1]).filter((name) => name !== void 0).sort();
+	return Object.keys(exports).map((subpath) => AESTHETIC_EXPORT.exec(subpath)?.[1]).filter((name) => name !== void 0).sort();
 }
 /** Returns the nearest folder at or above `from` that holds a `package.json`. */
 function findPackageRoot(from) {
@@ -144,45 +340,18 @@ function readManifest() {
 	return JSON.parse(readFileSync(path.join(packageRoot, "package.json"), "utf8"));
 }
 function resolveExport(subpath) {
-	const target = readManifest().exports[subpath].import;
-	return pathToFileURL(path.resolve(packageRoot, target)).href;
+	return readManifest().exports[subpath].import;
+}
+function readPackageFile(relativePath) {
+	return fs.readFile(path.resolve(packageRoot, relativePath), "utf8");
 }
 function assertNodeVersion(nodeVersion) {
 	if (Number.parseInt(nodeVersion, 10) < MIN_NODE_MAJOR) throw new Error(`this command needs Node.js ${MIN_NODE_MAJOR} or newer; this is Node.js ${nodeVersion}.`);
 }
-/** Loads Tailwind's compiler from where `@tailwindcss/cli` is installed, after checking both Tailwind packages are. */
-function loadTailwind(io) {
-	const manifests = TAILWIND_PACKAGES.map((name) => resolveManifest(name, io));
-	const missing = TAILWIND_PACKAGES.filter((_, index) => manifests[index] === void 0);
-	if (missing.length > 0) throw new Error(`this command needs ${missing.join(" and ")}, which ${missing.length > 1 ? "are" : "is"} not installed. Run: npm install --save-dev ${missing.join(" ")}`);
-	const requireFromCli = createRequire(manifests[0]);
-	const { compile, optimize } = requireFromCli("@tailwindcss/node");
-	const { Scanner } = requireFromCli("@tailwindcss/oxide");
-	return {
-		compile,
-		optimize,
-		Scanner
-	};
-}
-function resolveManifest(name, io) {
-	try {
-		return io.resolvePackage(`${name}/package.json`);
-	} catch (error) {
-		if (error.code === "MODULE_NOT_FOUND") return;
-		throw error;
-	}
-}
-function toCssPath(filePath) {
-	return filePath.split(path.sep).join("/");
-}
-function cssString(value) {
-	return `"${value.replace(/["\\]/g, "\\$&")}"`;
-}
 // src/cli/cli.ts
 process.exitCode = await run(process.argv.slice(2), {
 	cwd: process.cwd(),
 	nodeVersion: process.versions.node,
-	resolvePackage: createRequire(import.meta.url).resolve,
 	stdout: (line) => process.stdout.write(`${line}\n`),
 	stderr: (line) => process.stderr.write(`${line}\n`)
 });