vite-plugin-token-shaker 0.0.1

package/README.md

@@ -0,0 +1,23 @@
+# tsdown-starter
+
+A starter for creating a TypeScript package.
+
+## Development
+
+- Install dependencies:
+
+```bash
+npm install
+```
+
+- Run the unit tests:
+
+```bash
+npm run test
+```
+
+- Build the library:
+
+```bash
+npm run build
+```

package/dist/index.d.mts

@@ -0,0 +1,12 @@
+import { Plugin } from "vite";
+
+//#region src/index.d.ts
+interface PluginOptions {
+  /** Prefix for mangled names (default: "--_") */
+  manglePrefix?: string;
+  /** Enable verbose logging (default: false) */
+  verbose?: boolean;
+}
+declare function tokenShaker(options?: PluginOptions): Plugin;
+//#endregion
+export { tokenShaker };

package/dist/index.mjs

@@ -0,0 +1,192 @@
+//#region src/index.ts
+const VAR_REF_REGEX = /var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/g;
+const VAR_DEF_REGEX = /(--[\w-]+)\s*:\s*([^;{}]+);?/g;
+const LAYER_TOKENS_REGEX = /@layer\s+tokens\s*\{/g;
+const VAR_ONLY_REGEX = /^\s*var\(\s*--[\w-]+\s*(?:,\s*[^)]+)?\)\s*$/;
+function findMatchingBrace(code, start) {
+	let depth = 1;
+	for (let i = start; i < code.length; i++) {
+		if (code[i] == "{") depth++;
+		else if (code[i] == "}") depth--;
+		if (depth == 0) return i;
+	}
+	return code.length;
+}
+function escapeRegex(str) {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function findTokensLayers(code) {
+	const layers = [];
+	for (const match of code.matchAll(LAYER_TOKENS_REGEX)) {
+		const startIdx = match.index;
+		const contentStart = startIdx + match[0].length;
+		const contentEnd = findMatchingBrace(code, contentStart);
+		layers.push({
+			start: startIdx,
+			end: contentEnd + 1,
+			content: code.slice(contentStart, contentEnd)
+		});
+	}
+	return layers;
+}
+function extractTokensVariables(code, registry) {
+	for (const layer of findTokensLayers(code)) for (const match of layer.content.matchAll(VAR_DEF_REGEX)) {
+		const [, varName, varValueRaw] = match;
+		const varValue = varValueRaw.trim();
+		const isAlias = VAR_ONLY_REGEX.test(varValue);
+		if (!registry.has(varName)) registry.set(varName, {
+			value: varValue,
+			usageCount: 0,
+			setElsewhere: false,
+			isAlias,
+			emitDeclaration: false
+		});
+		else {
+			const v = registry.get(varName);
+			if (v.isAlias == void 0) v.isAlias = isAlias;
+		}
+	}
+}
+function markVariablesSetElsewhere(code, registry) {
+	let codeWithoutTokens = code;
+	for (const layer of findTokensLayers(code)) codeWithoutTokens = codeWithoutTokens.slice(0, layer.start) + " ".repeat(layer.end - layer.start) + codeWithoutTokens.slice(layer.end);
+	for (const [varName, variable] of registry) if (new RegExp(`${escapeRegex(varName)}\\s*:`, "g").test(codeWithoutTokens)) variable.setElsewhere = true;
+}
+function countVariableUsage(code, registry, visited = /* @__PURE__ */ new Set()) {
+	for (const match of code.matchAll(VAR_REF_REGEX)) {
+		const varName = match[1];
+		const variable = registry.get(varName);
+		if (variable) {
+			variable.usageCount++;
+			if (!visited.has(varName)) {
+				visited.add(varName);
+				countVariableUsage(variable.value, registry, visited);
+			}
+		}
+	}
+}
+function resetUsageCounts(registry) {
+	for (const variable of registry.values()) {
+		variable.usageCount = 0;
+		variable.mangledName = void 0;
+		variable.emitDeclaration = false;
+	}
+}
+function resolveVariableValue(varName, registry, depth = 0) {
+	if (depth > 10) return `var(${varName})`;
+	const variable = registry.get(varName);
+	if (!variable) return `var(${varName})`;
+	return variable.value.replace(VAR_REF_REGEX, (_, nestedVarName) => resolveVariableValue(nestedVarName, registry, depth + 1));
+}
+function generateMangledNames(registry, manglePrefix) {
+	const valueToVars = /* @__PURE__ */ new Map();
+	for (const [varName, variable] of registry) {
+		if (variable.usageCount == 0) continue;
+		const resolvedValue = resolveVariableValue(varName, registry);
+		const vars = valueToVars.get(resolvedValue);
+		if (vars) vars.push(varName);
+		else valueToVars.set(resolvedValue, [varName]);
+	}
+	let counter = 0;
+	for (const [resolvedValue, varNames] of valueToVars) {
+		const canonicalVarName = varNames.find((v) => !registry.get(v).isAlias) ?? varNames[0];
+		let totalUsage = 0;
+		for (const vName of varNames) totalUsage += registry.get(vName).usageCount;
+		const mangledName = `${manglePrefix}${counter.toString(36)}`;
+		const valueLen = resolvedValue.length;
+		const declarationCost = mangledName.length + 2 + valueLen + 1;
+		const referenceCost = 5 + mangledName.length + 1;
+		if (declarationCost + totalUsage * referenceCost < totalUsage * valueLen) {
+			counter++;
+			for (const vName of varNames) {
+				const v = registry.get(vName);
+				v.mangledName = mangledName;
+				v.emitDeclaration = vName == canonicalVarName;
+			}
+		} else for (const vName of varNames) {
+			const v = registry.get(vName);
+			v.mangledName = void 0;
+			v.emitDeclaration = false;
+		}
+	}
+	return counter;
+}
+function transformCode(code, registry) {
+	let result = code;
+	const layers = findTokensLayers(code);
+	const emittedValues = /* @__PURE__ */ new Set();
+	for (const layer of layers.reverse()) {
+		const declarations = [];
+		for (const match of layer.content.matchAll(VAR_DEF_REGEX)) {
+			const [, varName, varValue] = match;
+			const variable = registry.get(varName);
+			if (!variable) continue;
+			if (variable.usageCount == 0) continue;
+			if (variable.setElsewhere) {
+				declarations.push(`${varName}: ${varValue}`);
+				continue;
+			}
+			if (variable.mangledName) {
+				const resolvedValue = resolveVariableValue(varName, registry);
+				if (variable.emitDeclaration && !variable.isAlias) {
+					if (!emittedValues.has(resolvedValue)) {
+						declarations.push(`${variable.mangledName}: ${resolvedValue}`);
+						emittedValues.add(resolvedValue);
+					}
+				}
+			}
+		}
+		const newContent = declarations.length > 0 ? `@layer tokens{:root{${declarations.join(";")}}}` : "";
+		result = result.slice(0, layer.start) + newContent + result.slice(layer.end);
+	}
+	result = result.replace(VAR_REF_REGEX, (original, varName, fallback) => {
+		const variable = registry.get(varName);
+		if (!variable) return original;
+		if (variable.mangledName) return `var(${variable.mangledName}${fallback ? `, ${fallback}` : ""})`;
+		if (!variable.setElsewhere) return resolveVariableValue(varName, registry);
+		return original;
+	});
+	return result;
+}
+function getStats(registry, mangledCount) {
+	let drop = 0, inline = 0, mangle = 0, keep = 0;
+	for (const variable of registry.values()) if (variable.usageCount == 0) drop++;
+	else if (variable.setElsewhere) keep++;
+	else if (variable.mangledName) mangle++;
+	else inline++;
+	return `Analysis: ${drop} drop, ${inline} inline, ${mangle} mangle (${mangledCount} unique values), ${keep} keep`;
+}
+function tokenShaker(options = {}) {
+	const { manglePrefix = "--_", verbose = false } = options;
+	const registry = /* @__PURE__ */ new Map();
+	const log = verbose ? (...args) => console.log("[token-shaker]", ...args) : () => {};
+	return {
+		name: "vite-plugin-token-shaker",
+		enforce: "pre",
+		generateBundle(_outputOptions, bundle) {
+			registry.clear();
+			const cssAssets = Object.entries(bundle).filter(([name, asset]) => asset.type == "asset" && name.endsWith(".css"));
+			if (cssAssets.length == 0) return;
+			for (const [, asset] of cssAssets) extractTokensVariables(asset.source, registry);
+			if (registry.size == 0) return;
+			const bundledFiles = cssAssets.map(([name, asset]) => [name, asset.source]);
+			log(`Analyzing ${registry.size} variables across ${cssAssets.length} CSS files`);
+			resetUsageCounts(registry);
+			for (const [, code] of bundledFiles) {
+				markVariablesSetElsewhere(code, registry);
+				countVariableUsage(code, registry);
+			}
+			log(getStats(registry, generateMangledNames(registry, manglePrefix)));
+			for (const [fileName, asset] of cssAssets) {
+				const transformed = transformCode(asset.source, registry);
+				if (transformed !== asset.source) {
+					log(`✓ Transformed ${fileName}`);
+					asset.source = transformed;
+				}
+			}
+		}
+	};
+}
+
+//#endregion
+export { tokenShaker };

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "vite-plugin-token-shaker",
+  "version": "0.0.1",
+  "description": "Clean up anything in @layer tokens",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/KTibow/vite-plugin-token-shaker#readme",
+  "bugs": {
+    "url": "https://github.com/KTibow/vite-plugin-token-shaker/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KTibow/vite-plugin-token-shaker.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "tsdown": "^0.16.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
+  },
+  "peerDependencies": {
+    "vite": "^7.2.4"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}