@projectwallace/css-analyzer 9.3.0 → 9.5.0

package/dist/selectors/index.d.ts

@@ -0,0 +1,2 @@
+import { a as calculate, i as isPrefixed, n as getComplexity, o as calculateForAST, r as isAccessibility, s as compare, t as getCombinators } from "../utils-BUeYqEL1.js";
+export { compare as compareSpecificity, getCombinators, getComplexity, calculate as getSpecificity, calculateForAST as getSpecificityForAST, isAccessibility, isPrefixed };

package/dist/selectors/index.js

@@ -0,0 +1,3 @@
+import "../string-utils-olNNcOlY.js";
+import { a as getComplexity, i as getCombinators, n as calculateForAST, o as isAccessibility, r as compare, s as isPrefixed, t as calculate } from "../specificity-svLpcKkT.js";
+export { compare as compareSpecificity, getCombinators, getComplexity, calculate as getSpecificity, calculateForAST as getSpecificityForAST, isAccessibility, isPrefixed };

package/dist/specificity-svLpcKkT.js

@@ -0,0 +1,268 @@
+import { n as unquote, r as KeywordSet } from "./string-utils-olNNcOlY.js";
+import { ATTRIBUTE_SELECTOR, CLASS_SELECTOR, COMBINATOR, ID_SELECTOR, NTH_OF_SELECTOR, NTH_SELECTOR, PSEUDO_CLASS_SELECTOR, PSEUDO_ELEMENT_SELECTOR, SELECTOR, SELECTOR_LIST, SKIP, TYPE_SELECTOR, str_equals, str_starts_with, walk } from "@projectwallace/css-parser";
+import { parse_selector } from "@projectwallace/css-parser/parse-selector";
+//#region src/selectors/utils.ts
+const PSEUDO_FUNCTIONS = new KeywordSet([
+	"nth-child",
+	"where",
+	"not",
+	"is",
+	"has",
+	"nth-last-child",
+	"matches",
+	"-webkit-any",
+	"-moz-any"
+]);
+function isPrefixed(selector, on_selector) {
+	walk(selector, function(node) {
+		if (node.type === PSEUDO_ELEMENT_SELECTOR || node.type === PSEUDO_CLASS_SELECTOR || node.type === TYPE_SELECTOR) {
+			if (node.is_vendor_prefixed) {
+				let prefix = "";
+				if (node.type === PSEUDO_CLASS_SELECTOR) prefix = ":";
+				else if (node.type === PSEUDO_ELEMENT_SELECTOR) prefix = "::";
+				on_selector(prefix + (node.name || node.text));
+			}
+		}
+	});
+}
+/**
+* Check if a Wallace selector is an accessibility selector (has aria-* or role attribute)
+*/
+function isAccessibility(selector, on_selector) {
+	function normalize(node) {
+		let clone = node.clone();
+		if (clone.value) return "[" + clone.name?.toLowerCase() + clone.attr_operator + "\"" + unquote(clone.value.toString()) + "\"]";
+		return "[" + clone.name?.toLowerCase() + "]";
+	}
+	walk(selector, function(node) {
+		if (node.type === ATTRIBUTE_SELECTOR) {
+			const name = node.name || "";
+			if (str_equals("role", name) || str_starts_with(name, "aria-")) on_selector(normalize(node));
+		}
+	});
+}
+/**
+* Get the Complexity for a Wallace Selector Node
+* @param selector - Wallace CSSNode for a Selector
+* @return The numeric complexity of the Selector
+*/
+function getComplexity(selector) {
+	let complexity = 0;
+	function findSelectors(node, complexities) {
+		walk(node, function(n) {
+			if (n.type === SELECTOR) complexities.push(getComplexity(n));
+		});
+	}
+	walk(selector, function(node) {
+		const type = node.type;
+		if (type === SELECTOR) return;
+		if (type === NTH_SELECTOR) {
+			if (node.text && node.text.trim()) complexity++;
+			return;
+		}
+		complexity++;
+		if (type === PSEUDO_ELEMENT_SELECTOR || type === TYPE_SELECTOR || type === PSEUDO_CLASS_SELECTOR) {
+			if (node.is_vendor_prefixed) complexity++;
+		}
+		if (type === ATTRIBUTE_SELECTOR) {
+			if (node.value) complexity++;
+			return SKIP;
+		}
+		if (type === PSEUDO_CLASS_SELECTOR) {
+			const name = node.name || "";
+			if (PSEUDO_FUNCTIONS.has(name.toLowerCase())) {
+				const childComplexities = [];
+				if (node.has_children) for (const child of node) if (child.type === SELECTOR) childComplexities.push(getComplexity(child));
+				else findSelectors(child, childComplexities);
+				if (childComplexities.length > 0) {
+					for (const c of childComplexities) complexity += c;
+					return SKIP;
+				}
+			}
+		}
+	});
+	return complexity;
+}
+/**
+* Walk a selector node and trigger a callback every time a Combinator was found
+*/
+function getCombinators(selector, onMatch) {
+	walk(selector, function(node) {
+		if (node.type === COMBINATOR) onMatch({
+			name: node.name?.trim() === "" ? " " : node.name,
+			loc: {
+				offset: node.start,
+				line: node.line,
+				column: node.column,
+				length: 1
+			}
+		});
+	});
+}
+//#endregion
+//#region src/selectors/specificity.ts
+/**
+* @returns 0 if s1 equals s2, a negative number if s1 is lower than s2, or a positive number if s1 higher than s2
+*/
+function compare(s1, s2) {
+	if (s1[0] === s2[0]) {
+		if (s1[1] === s2[1]) return s1[2] - s2[2];
+		return s1[1] - s2[1];
+	}
+	return s1[0] - s2[0];
+}
+function max(list) {
+	return list.sort(compare).at(-1);
+}
+const calculateForAST = (selectorAST) => {
+	let a = 0;
+	let b = 0;
+	let c = 0;
+	let current = selectorAST.first_child;
+	while (current) {
+		switch (current.type) {
+			case ID_SELECTOR:
+				a += 1;
+				break;
+			case ATTRIBUTE_SELECTOR:
+			case CLASS_SELECTOR:
+				b += 1;
+				break;
+			case PSEUDO_CLASS_SELECTOR:
+				switch (current.name?.toLowerCase()) {
+					case "where": break;
+					case "-webkit-any":
+					case "any":
+						if (current.first_child) b += 1;
+						break;
+					case "-moz-any":
+					case "is":
+					case "matches":
+					case "not":
+					case "has":
+						if (current.has_children) {
+							const childSelectorList = current.first_child;
+							if (childSelectorList?.type === SELECTOR_LIST) {
+								const max1 = max(calculate(childSelectorList));
+								a += max1[0];
+								b += max1[1];
+								c += max1[2];
+							}
+						}
+						break;
+					case "nth-child":
+					case "nth-last-child":
+						b += 1;
+						const nthOf = current.first_child;
+						if (nthOf?.type === NTH_OF_SELECTOR && nthOf.selector) {
+							const max2 = max(calculate(nthOf.selector));
+							a += max2[0];
+							b += max2[1];
+							c += max2[2];
+						}
+						break;
+					case "host-context":
+					case "host":
+						b += 1;
+						const childSelector = current.first_child?.first_child;
+						if (childSelector?.type === SELECTOR) {
+							let childPart = childSelector.first_child;
+							while (childPart) {
+								if (childPart.type === COMBINATOR) break;
+								const partSpecificity = calculateForAST({
+									type_name: "Selector",
+									first_child: childPart,
+									has_children: true
+								});
+								a += partSpecificity[0] ?? 0;
+								b += partSpecificity[1] ?? 0;
+								c += partSpecificity[2] ?? 0;
+								childPart = childPart.next_sibling;
+							}
+						}
+						break;
+					case "after":
+					case "before":
+					case "first-letter":
+					case "first-line":
+						c += 1;
+						break;
+					default:
+						b += 1;
+						break;
+				}
+				break;
+			case PSEUDO_ELEMENT_SELECTOR:
+				switch (current.name?.toLowerCase()) {
+					case "slotted":
+						c += 1;
+						const childSelector = current.first_child?.first_child;
+						if (childSelector?.type === SELECTOR) {
+							let childPart = childSelector.first_child;
+							while (childPart) {
+								if (childPart.type === COMBINATOR) break;
+								const partSpecificity = calculateForAST({
+									type_name: "Selector",
+									first_child: childPart,
+									has_children: true
+								});
+								a += partSpecificity[0] ?? 0;
+								b += partSpecificity[1] ?? 0;
+								c += partSpecificity[2] ?? 0;
+								childPart = childPart.next_sibling;
+							}
+						}
+						break;
+					case "view-transition-group":
+					case "view-transition-image-pair":
+					case "view-transition-old":
+					case "view-transition-new":
+						if (current.first_child?.text === "*") break;
+						c += 1;
+						break;
+					default:
+						c += 1;
+						break;
+				}
+				break;
+			case TYPE_SELECTOR:
+				let typeSelector = current.name ?? "";
+				if (typeSelector.includes("|")) typeSelector = typeSelector.split("|")[1] ?? "";
+				if (typeSelector !== "*") c += 1;
+				break;
+			default: break;
+		}
+		current = current.next_sibling;
+	}
+	return [
+		a,
+		b,
+		c
+	];
+};
+const convertToAST = (source) => {
+	if (typeof source === "string") try {
+		return parse_selector(source);
+	} catch (e) {
+		const message = e instanceof Error ? e.message : String(e);
+		throw new TypeError(`Could not convert passed in source '${source}' to SelectorList: ${message}`);
+	}
+	if (source instanceof Object) {
+		if (source.type === SELECTOR_LIST) return source;
+		throw new TypeError(`Passed in source is an Object but no AST / AST of the type SelectorList`);
+	}
+	throw new TypeError(`Passed in source is not a String nor an Object. I don't know what to do with it.`);
+};
+const calculate = (selector) => {
+	if (!selector) return [];
+	const ast = convertToAST(selector);
+	const specificities = [];
+	let selectorNode = ast.first_child;
+	while (selectorNode) {
+		specificities.push(calculateForAST(selectorNode));
+		selectorNode = selectorNode.next_sibling;
+	}
+	return specificities;
+};
+//#endregion
+export { getComplexity as a, getCombinators as i, calculateForAST as n, isAccessibility as o, compare as r, isPrefixed as s, calculate as t };

package/dist/string-utils-olNNcOlY.js

@@ -0,0 +1,49 @@
+import "@projectwallace/css-parser";
+//#region src/keyword-set.ts
+/**
+* @description A Set-like construct to search CSS keywords in a case-insensitive way
+*/
+var KeywordSet = class {
+	set;
+	constructor(items) {
+		/** @type {Set<string>} */
+		this.set = new Set(items);
+	}
+	has(item) {
+		return this.set.has(item.toLowerCase());
+	}
+};
+//#endregion
+//#region src/string-utils.ts
+function unquote(str) {
+	return str.replaceAll(/(?:^['"])|(?:['"]$)/g, "");
+}
+/**
+* Case-insensitive compare two character codes
+* @see https://github.com/csstree/csstree/blob/41f276e8862d8223eeaa01a3d113ab70bb13d2d9/lib/tokenizer/utils.js#L22
+*/
+function compareChar(referenceCode, testCode) {
+	if (testCode >= 65 && testCode <= 90) testCode = testCode | 32;
+	return referenceCode === testCode;
+}
+/**
+* Case-insensitive testing whether a string ends with a given substring
+*
+* @example
+* endsWith('test', 'my-test') // true
+* endsWith('test', 'est') // false
+*
+* @param base e.g. '-webkit-transform'
+* @param maybe e.g. 'transform'
+* @returns true if `test` ends with `base`, false otherwise
+*/
+function endsWith(base, maybe) {
+	if (base === maybe) return true;
+	let len = maybe.length;
+	let offset = len - base.length;
+	if (offset < 0) return false;
+	for (let i = len - 1; i >= offset; i--) if (compareChar(base.charCodeAt(i - offset), maybe.charCodeAt(i)) === false) return false;
+	return true;
+}
+//#endregion
+export { unquote as n, KeywordSet as r, endsWith as t };

package/dist/utils-BUeYqEL1.d.ts

@@ -0,0 +1,54 @@
+import { CSSNode } from "@projectwallace/css-parser";
+
+//#region src/collection.d.ts
+type Location = {
+  line: number;
+  column: number;
+  offset: number;
+  length: number;
+};
+type UniqueWithLocations = Record<string, Location[]>;
+type CollectionCount<WithLocations extends boolean = false> = {
+  total: number;
+  totalUnique: number;
+  unique: Record<string, number>;
+  uniquenessRatio: number;
+} & (WithLocations extends true ? {
+  uniqueWithLocations: UniqueWithLocations;
+} : {
+  uniqueWithLocations?: undefined;
+});
+//#endregion
+//#region src/selectors/specificity.d.ts
+type Specificity = [number, number, number];
+/**
+ * @returns 0 if s1 equals s2, a negative number if s1 is lower than s2, or a positive number if s1 higher than s2
+ */
+declare function compare(s1: Specificity, s2: Specificity): number;
+declare const calculateForAST: (selectorAST: CSSNode) => Specificity;
+declare const calculate: (selector: string | CSSNode) => Specificity[];
+//#endregion
+//#region src/selectors/utils.d.ts
+declare function isPrefixed(selector: CSSNode, on_selector: (prefix: string) => void): void;
+/**
+ * Check if a Wallace selector is an accessibility selector (has aria-* or role attribute)
+ */
+declare function isAccessibility(selector: CSSNode, on_selector: (a11y_selector: string) => void): void;
+/**
+ * Get the Complexity for a Wallace Selector Node
+ * @param selector - Wallace CSSNode for a Selector
+ * @return The numeric complexity of the Selector
+ */
+declare function getComplexity(selector: CSSNode): number;
+/**
+ * Walk a selector node and trigger a callback every time a Combinator was found
+ */
+declare function getCombinators(selector: CSSNode, onMatch: ({
+  name,
+  loc
+}: {
+  name: string;
+  loc: Location;
+}) => void): void;
+//#endregion
+export { calculate as a, CollectionCount as c, isPrefixed as i, Location as l, getComplexity as n, calculateForAST as o, isAccessibility as r, compare as s, getCombinators as t, UniqueWithLocations as u };

package/dist/values/index.d.ts

@@ -0,0 +1,7 @@
+import { a as namedColors, i as colorKeywords, n as keywords, o as systemColors, r as colorFunctions, t as isValueReset } from "../values-Dw53soqy.js";
+import { CSSNode } from "@projectwallace/css-parser";
+
+//#region src/values/browserhacks.d.ts
+declare function isIe9Hack(node: CSSNode): boolean;
+//#endregion
+export { colorFunctions, colorKeywords, isIe9Hack, isValueReset, keywords, namedColors, systemColors };

package/dist/values/index.js

@@ -0,0 +1,3 @@
+import "../string-utils-olNNcOlY.js";
+import { a as colorKeywords, i as colorFunctions, n as isValueReset, o as namedColors, r as keywords, s as systemColors, t as isIe9Hack } from "../browserhacks-eP_e1D5u.js";
+export { colorFunctions, colorKeywords, isIe9Hack, isValueReset, keywords, namedColors, systemColors };

package/dist/values-Dw53soqy.d.ts

@@ -0,0 +1,26 @@
+import { CSSNode } from "@projectwallace/css-parser";
+
+//#region src/keyword-set.d.ts
+/**
+ * @description A Set-like construct to search CSS keywords in a case-insensitive way
+ */
+declare class KeywordSet {
+  set: Set<string>;
+  constructor(items: Lowercase<string>[]);
+  has(item: string): boolean;
+}
+//#endregion
+//#region src/values/colors.d.ts
+declare const namedColors: KeywordSet;
+declare const systemColors: KeywordSet;
+declare const colorFunctions: KeywordSet;
+declare const colorKeywords: KeywordSet;
+//#endregion
+//#region src/values/values.d.ts
+declare const keywords: KeywordSet;
+/**
+ * Test whether a value is a reset (0, 0px, -0.0e0 etc.)
+ */
+declare function isValueReset(node: CSSNode): boolean;
+//#endregion
+export { namedColors as a, colorKeywords as i, keywords as n, systemColors as o, colorFunctions as r, KeywordSet as s, isValueReset as t };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@projectwallace/css-analyzer",
 	"description": "The best CSS analyzer out there. Check design tokens, complexity, specificity, performance and more.",
-	"version": "9.3.0",
+	"version": "9.5.0",
 	"author": "Bart Veneman",
 	"repository": {
 		"type": "git",
@@ -14,11 +14,25 @@
 	"files": [
 		"dist"
 	],
-	"main": "./dist/css-analyzer.js",
+	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"exports": {
-		"types": "./dist/index.d.ts",
-		"default": "./dist/css-analyzer.js"
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./selectors": {
+			"types": "./dist/selectors/index.d.ts",
+			"default": "./dist/selectors/index.js"
+		},
+		"./atrules": {
+			"types": "./dist/atrules/index.d.ts",
+			"default": "./dist/atrules/index.js"
+		},
+		"./values": {
+			"types": "./dist/values/index.d.ts",
+			"default": "./dist/values/index.js"
+		}
 	},
 	"engines": {
 		"node": ">=18.0.0"
@@ -26,9 +40,9 @@
 	"scripts": {
 		"lint": "oxlint --config .oxlintrc.json",
 		"lint-package": "publint",
-		"test": "vitest",
+		"test": "vitest --coverage",
 		"check": "tsc --noEmit",
-		"build": "vite build",
+		"build": "tsdown",
 		"knip": "knip"
 	},
 	"keywords": [
@@ -49,18 +63,17 @@
 		"code"
 	],
 	"dependencies": {
-		"@projectwallace/css-parser": "^0.13.3"
+		"@projectwallace/css-parser": "^0.13.8"
 	},
 	"devDependencies": {
-		"@codecov/vite-plugin": "^1.9.1",
-		"c8": "^10.1.3",
-		"knip": "^5.83.1",
+		"@codecov/rollup-plugin": "^1.9.1",
+		"@vitest/coverage-v8": "^4.0.18",
+		"knip": "^6.0.4",
 		"oxlint": "^1.43.0",
 		"prettier": "^3.6.2",
 		"publint": "^0.3.17",
+		"tsdown": "^0.21.0",
 		"typescript": "^5.9.3",
-		"vite": "^6.3.4",
-		"vite-plugin-dts": "^4.5.4",
 		"vitest": "^4.0.18"
 	}
 }