@pathscale/rsbuild-plugin-ui-css-purge 0.9.5 → 0.9.6

package/dist/scan-consumer.d.ts

@@ -60,5 +60,5 @@ declare function extractUIImports(ast: unknown): Map<string, string>;
 declare function extractJSXUsages(ast: unknown, uiComponents: Map<string, string>): PropUsage[];
 declare function buildSafelists(allUsages: PropUsage[], manifest: PurgeManifest): Safelists;
 declare function scanConsumerSource(srcDir: string): Promise<PropUsage[]>;
-export { extractUIImports, extractJSXUsages, buildSafelists, scanConsumerSource, };
-export type { LegacyComponentManifest, PropUsage, PurgeManifest, PurgeDatabaseV2, ComponentPurgeRecord, LegacyComponentManifest as ComponentManifest, Safelists, };
+export type { ComponentPurgeRecord, LegacyComponentManifest as ComponentManifest, LegacyComponentManifest, PropUsage, PurgeDatabaseV2, PurgeManifest, Safelists, };
+export { buildSafelists, extractJSXUsages, extractUIImports, scanConsumerSource, };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pathscale/rsbuild-plugin-ui-css-purge",
-	"version": "0.9.5",
+	"version": "0.9.6",
 	"type": "module",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -14,20 +14,24 @@
 		"rsbuild-plugin-ui-css-purge": "dist/postbuild-purge.js",
 		"generate-manifest": "src/generate-manifest.ts"
 	},
-	"files": ["dist", "src/generate-manifest.ts"],
-	"dependencies": {
-		"@swc/core": "^1.15.24",
-		"lightningcss": "^1.32.0",
-		"postcss": "^8.5.9"
-	},
+	"files": [
+		"dist",
+		"src/generate-manifest.ts"
+	],
 	"scripts": {
 		"build": "bun run build.ts",
-		"test": "bun test",
+		"format": "biome format . --write",
 		"lint": "biome check .",
-		"format": "biome format . --write"
+		"test": "bun test"
+	},
+	"dependencies": {
+		"@swc/core": "^1.15.40",
+		"lightningcss": "^1.32.0",
+		"postcss": "^8.5.15"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "1.9.4",
-		"bun-types": "^1.3.12"
+		"@biomejs/biome": "2.4.16",
+		"@types/bun": "^1.3.14",
+		"typescript": "^6.0.3"
 	}
 }

package/src/generate-manifest.ts

@@ -10,12 +10,21 @@
  */
 
 import { Glob } from "bun";
-import postcss from "postcss";
+import {
+	type AnimationName,
+	type AttrSelectorOperator,
+	type Combinator,
+	type Declaration,
+	type Selector,
+	type SelectorComponent,
+	transform,
+	type UnparsedProperty,
+	type Visitor,
+	type WebKitScrollbarPseudoElement,
+} from "lightningcss";
 
 // ── Types ──────────────────────────────────────────────────────────────────────
 
-type ClassValue = string | readonly string[];
-
 interface ComponentPurgeRecord {
 	key: string;
 	component: string;
@@ -70,8 +79,9 @@ interface CssFacts {
 
 /** Matches Tailwind utility class prefixes — these should NOT appear as owned component classes. */
 const twPattern =
-	/^(-?)(flex|grid|gap|items|justify|self|place|order|col|row|auto|basis|grow|shrink|space|overflow|relative|absolute|fixed|sticky|static|block|inline|hidden|visible|invisible|z|inset|top|right|bottom|left|float|clear|isolate|object|aspect|container|columns|break|box|display|table|caption|border|rounded|outline|ring|shadow|opacity|mix|bg|from|via|to|text|font|leading|tracking|indent|align|whitespace|word|hyphens|content|list|decoration|underline|overline|line|no-underline|uppercase|lowercase|capitalize|normal|italic|not-italic|antialiased|subpixel|truncate|w|h|min|max|p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|size|scroll|snap|touch|select|resize|cursor|caret|pointer|will|appearance|accent|transition|duration|delay|ease|animate|scale|rotate|translate|skew|transform|origin|filter|blur|brightness|contrast|drop|grayscale|hue|invert|saturate|sepia|backdrop|sr|forced|print|motion|lg|md|sm|xl|2xl|dark|hover|focus|active|disabled|first|last|odd|even|group|peer)($|[-:\[.])/;
+	/^(-?)(flex|grid|gap|items|justify|self|place|order|col|row|auto|basis|grow|shrink|space|overflow|relative|absolute|fixed|sticky|static|block|inline|hidden|visible|invisible|z|inset|top|right|bottom|left|float|clear|isolate|object|aspect|container|columns|break|box|display|table|caption|border|rounded|outline|ring|shadow|opacity|mix|bg|from|via|to|text|font|leading|tracking|indent|align|whitespace|word|hyphens|content|list|decoration|underline|overline|line|no-underline|uppercase|lowercase|capitalize|normal|italic|not-italic|antialiased|subpixel|truncate|w|h|min|max|p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|size|scroll|snap|touch|select|resize|cursor|caret|pointer|will|appearance|accent|transition|duration|delay|ease|animate|scale|rotate|translate|skew|transform|origin|filter|blur|brightness|contrast|drop|grayscale|hue|invert|saturate|sepia|backdrop|sr|forced|print|motion|lg|md|sm|xl|2xl|dark|hover|focus|active|disabled|first|last|odd|even|group|peer)($|[-:[.])/;
 
+// TODO: possibly find a more reliable way of checking
 function isTailwindUtility(cls: string): boolean {
 	return twPattern.test(cls);
 }
@@ -196,40 +206,84 @@ function emptyCssFacts(): CssFacts {
 	};
 }
 
+const AnimationNameKeywords = new Set(["none", "initial", "inherit", "unset"]);
 async function scanCssFacts(componentDir: string): Promise<CssFacts> {
 	const facts = emptyCssFacts();
 	const glob = new Glob("**/*.css");
-
-	for await (const relPath of glob.scan({ cwd: componentDir })) {
-		const css = await Bun.file(joinPath(componentDir, relPath)).text();
-		const root = postcss.parse(css);
-
-		root.walkRules((rule) => {
-			for (const selector of rule.selectors) {
-				facts.selectors.push(selector);
-				for (const attr of extractAttrsFromSelector(selector)) {
-					facts.attributeSelectors.push(attr);
-				}
+	const visitor: Visitor<never> = {
+		Rule(rule) {
+			if (rule.type === "keyframes") {
+				const { name } = rule.value;
+				facts.keyframes.declared.push(name.value);
 			}
-		});
+		},
 
-		root.walkDecls((decl) => {
-			if (decl.prop.startsWith("--")) facts.cssVars.declared.push(decl.prop);
-			for (const ref of decl.value.matchAll(/var\(\s*(--[a-zA-Z0-9_-]+)/g)) {
-				facts.cssVars.referenced.push(ref[1]);
-			}
-			if (/^animation(-name)?$/.test(decl.prop)) {
-				for (const part of decl.value.split(",")) {
-					const name = part.trim().split(/\s+/)[0];
-					if (name && !["none", "initial", "inherit", "unset"].includes(name)) {
-						facts.keyframes.referenced.push(name);
+		Declaration(decl) {
+			// "animation" with var(), unparsed due to var() interfering with arg position detection
+			const animationNamesUnparsed = (p: UnparsedProperty): AnimationName[] => {
+				let valid = true;
+				const names: AnimationName[] = [];
+				if (p.propertyId.property !== "animation") return names;
+				for (const { value: token } of p.value) {
+					if (!(typeof token === "object" && "type" in token)) continue;
+					if (token.type === "comma") valid = true; // name only appears after comma or at start
+					if (token.type === "comma" || token.type === "white-space") continue;
+					if (valid && (token.type === "ident" || token.type === "string")) {
+						names.push(token);
 					}
+					valid = false;
+				}
+				return names;
+			};
+
+			const animationNames = (decl: Declaration): AnimationName[] => {
+				switch (decl.property) {
+					case "animation":
+						return decl.value.map((item) => item.name);
+					case "animation-name":
+						return decl.value;
+					case "unparsed":
+						return animationNamesUnparsed(decl.value);
+					default:
+						return [];
 				}
+			};
+
+			for (const name of animationNames(decl)) {
+				if (name.type === "none") continue;
+				if (AnimationNameKeywords.has(name.value)) continue;
+				facts.keyframes.referenced.push(name.value);
 			}
-		});
 
-		root.walkAtRules("keyframes", (atRule) => {
-			facts.keyframes.declared.push(atRule.params.trim());
+			// variable declarations
+			(() => {
+				if (decl.property !== "custom") return;
+				if (!decl.value.name.startsWith("--")) return;
+				facts.cssVars.declared.push(decl.value.name);
+			})();
+		},
+
+		// var() statements
+		Variable(variable) {
+			facts.cssVars.referenced.push(variable.name.ident);
+		},
+
+		Selector(selector) {
+			facts.selectors.push(stringifySelector(selector));
+			const attrs = extractSelectorAttrs(selector).map(stringifySelectorAttr);
+			facts.attributeSelectors.push(...attrs);
+		},
+	};
+
+	for await (const relPath of glob.scan({ cwd: componentDir })) {
+		const css = await Bun.file(joinPath(componentDir, relPath)).text();
+		transform({
+			filename: relPath,
+			code: Buffer.from(css),
+			minify: false,
+			sourceMap: false,
+			errorRecovery: true,
+			visitor,
 		});
 	}
 
@@ -247,14 +301,162 @@ async function scanCssFacts(componentDir: string): Promise<CssFacts> {
 	};
 }
 
-function extractAttrsFromSelector(selector: string): string[] {
-	const matches = selector.matchAll(
-		/\[(data-[a-zA-Z0-9_-]+|aria-[a-zA-Z0-9_-]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\]]+)))?\]/g,
-	);
-	return [...matches].map((m) => {
-		const value = m[2] ?? m[3] ?? m[4];
-		return value === undefined ? `[${m[1]}]` : `[${m[1]}="${value.trim()}"]`;
-	});
+type SelectorAttribute = Extract<SelectorComponent, { type: "attribute" }>;
+function extractSelectorAttrs(selector: Selector): SelectorAttribute[] {
+	const attrs: SelectorAttribute[] = [];
+	const pseudo = (c: SelectorComponent) =>
+		c.type === "pseudo-class" || c.type === "pseudo-element";
+	const extract = (sel: Selector) => {
+		const prefixes = ["data-", "aria-"];
+		for (const comp of sel) {
+			if (comp.type !== "attribute") continue;
+			if (prefixes.every((p) => !comp.name.startsWith(p))) continue;
+			attrs.push(comp);
+		}
+	};
+
+	// From top level
+	extract(selector);
+	// From pseudo classes/elements
+	const ps = selector.filter(pseudo);
+	for (const p of ps) for (const s of extractSelectors(p)) extract(s);
+
+	return attrs;
+}
+
+type PseudoClass = Extract<SelectorComponent, { type: "pseudo-class" }>;
+type PseudoElement = Extract<SelectorComponent, { type: "pseudo-element" }>;
+type Pseudo = PseudoClass | PseudoElement;
+function extractSelectors(ps: Pseudo): Selector[] {
+	if (ps.kind === "host") return ps.selectors ? [ps.selectors] : [];
+	if ("selectors" in ps) return ps.selectors;
+	if ("selector" in ps) return [ps.selector];
+	return [];
+}
+
+function extractStrings(ps: Pseudo): string[] {
+	if (Array.isArray(ps.type)) return ps.type;
+	if ("languages" in ps) return ps.languages;
+	if ("direction" in ps) return [ps.direction];
+	if ("state" in ps) return [ps.state];
+	if ("names" in ps) return ps.names;
+	if ("identifier" in ps) return [ps.identifier];
+	return [];
+}
+
+const OperatorMap: Record<AttrSelectorOperator, string> = {
+	equal: "=",
+	includes: "~=",
+	"dash-match": "|=",
+	prefix: "^=",
+	suffix: "$=",
+	substring: "*=",
+} as const;
+
+const CombinatorMap: Record<Combinator, string> = {
+	child: " > ",
+	descendant: " ",
+	"next-sibling": " + ",
+	"later-sibling": " ~ ",
+	deep: " /deep/ ",
+	"deep-descendant": " >>> ",
+	"pseudo-element": "::",
+	part: "::part",
+	"slot-assignment": "::slotted",
+} as const;
+
+const WSElementMap: Record<WebKitScrollbarPseudoElement, string> = {
+	scrollbar: "::-webkit-scrollbar",
+	button: "::-webkit-scrollbar-button",
+	track: "::-webkit-scrollbar-track",
+	"track-piece": "::-webkit-scrollbar-track-piece",
+	thumb: "::-webkit-scrollbar-thumb",
+	corner: "::-webkit-scrollbar-corner",
+	resizer: "::-webkit-resizer",
+} as const;
+
+const ShortElements: Set<PseudoElement["kind"]> = new Set([
+	"before",
+	"after",
+	"first-letter",
+	"first-line",
+]);
+
+// TODO: use ToCSS from napi-rs module | use transform with dummy rule | use pure Rust | do not rely on stringified selectors and extract what we need
+function stringifySelector(selector: Selector): string {
+	const selectors = (p: Pseudo) =>
+		extractSelectors(p).map(stringifySelector).concat(extractStrings(p));
+
+	return selector
+		.map((comp) => {
+			switch (comp.type) {
+				case "universal":
+					return "*";
+				case "nesting":
+					return "&";
+				case "type":
+					return comp.name;
+				case "id":
+					return `#${comp.name}`;
+				case "class":
+					return `.${comp.name}`;
+				case "combinator":
+					return CombinatorMap[comp.value];
+				case "attribute":
+					return stringifySelectorAttr(comp);
+				case "namespace":
+					if (comp.kind === "named") return `${comp.prefix}|`;
+					if (comp.kind === "any") return "*|";
+					return "|";
+				case "pseudo-class": {
+					const s = selectors(comp);
+					if (comp.kind === "custom") return `:${comp.name}`;
+					if (comp.kind === "webkit-scrollbar") return `:${comp.value}`;
+					if ("a" in comp && "b" in comp) return stringifyNth(comp);
+					if (s.length === 0) return `:${comp.kind}`;
+					return `:${comp.kind}(${s.join(", ")})`;
+				}
+				case "pseudo-element": {
+					const s = selectors(comp);
+					const p = ShortElements.has(comp.kind) ? ":" : "::";
+					if (comp.kind === "custom") return `${p}${comp.name}`;
+					if (comp.kind === "webkit-scrollbar") return WSElementMap[comp.value];
+					if (comp.kind === "part") return `${p}${comp.kind}(${s.join(" ")})`;
+					if (s.length === 0) return `${p}${comp.kind}`;
+					return `${p}${comp.kind}(${s.join(", ")})`;
+				}
+				default:
+					return "";
+			}
+		})
+		.join("");
+}
+
+function stringifySelectorAttr(attr: SelectorAttribute): string {
+	const { name, operation } = attr;
+	if (!operation) return `[${name}]`;
+	const { operator, value } = operation;
+	return `[${name}${OperatorMap[operator]}"${value}"]`;
+}
+
+type Nth = Extract<SelectorComponent, { a: number; b: number }>;
+function stringifyNth(nth: Nth): string {
+	const signed = (n: number) => `${n >= 0 ? "+" : ""}${n}`;
+	const anb = (a: number, b: number): string => {
+		if (a === 0 && b === 0) return "0";
+		if (a === 1 && b === 0) return "n";
+		if (a === -1 && b === 0) return "-n";
+		if (b === 0) return `${a}n`;
+		if (a === 2 && b === 1) return "odd";
+		if (a === 0) return b.toString();
+		if (a === 1) return `n${signed(b)}`;
+		if (a === -1) return `-n${signed(b)}`;
+		return `${a}n${signed(b)}`;
+	};
+	let rule = anb(nth.a, nth.b);
+	const s = (("of" in nth && nth.of) || []).map(stringifySelector);
+	if (s.length > 0) rule += ` of ${s.join(", ")}`;
+	return `:${nth.kind}(${rule})`;
 }
 
 function createRecord(