@projectwallace/css-design-tokens 0.10.0 → 0.11.1

package/dist/index.js

@@ -0,0 +1,618 @@
+import { analyze, colorFunctions, colorKeywords, cssKeywords, namedColors, systemColors } from "@projectwallace/css-analyzer";
+import { convert } from "css-time-sort";
+import { convert as convert$1 } from "color-sorter";
+import { parse_value } from "@projectwallace/css-parser/parse-value";
+import { A98RGB, A98RGB_Linear, ColorSpace, HSL, HSV, HWB, LCH, Lab, Lab_D65, OKLCH, OKLab, OKLrab, P3, P3_Linear, ProPhoto, ProPhoto_Linear, REC_2020, REC_2020_Linear, XYZ_ABS_D65, XYZ_D50, XYZ_D65, sRGB, sRGB_Linear, tryColor } from "colorjs.io/fn";
+import { parse_value as parse_value$1 } from "@projectwallace/css-parser";
+//#region src/group-colors.ts
+const white = 0;
+const black = 1;
+const grey = 2;
+const red = 3;
+const orange = 4;
+const yellow = 5;
+const green = 6;
+const cyan = 7;
+const blue = 8;
+const magenta = 9;
+const pink = 10;
+const unknown = 11;
+const color_dict = new Map([
+	[white, "white"],
+	[black, "black"],
+	[grey, "grey"],
+	[red, "red"],
+	[orange, "orange"],
+	[yellow, "yellow"],
+	[green, "green"],
+	[cyan, "cyan"],
+	[blue, "blue"],
+	[magenta, "magenta"],
+	[pink, "pink"],
+	[unknown, "unknown"]
+]);
+function group_colors(colors) {
+	let color_groups = /* @__PURE__ */ new Map();
+	for (let color in colors) {
+		let group = unknown;
+		if (!color.includes("var(") && !color.includes("calc(")) {
+			let { hue, saturation, lightness } = convert$1(color);
+			if (saturation < 10 && lightness === 100) group = white;
+			else if (saturation < 10 && lightness === 0) group = black;
+			else if (saturation < 5) group = grey;
+			else if (hue < 22) group = red;
+			else if (hue < 50) group = orange;
+			else if (hue < 72) group = yellow;
+			else if (hue < 144) group = green;
+			else if (hue < 180) group = cyan;
+			else if (hue < 250) group = blue;
+			else if (hue < 300) group = magenta;
+			else if (hue < 350) group = pink;
+			else group = red;
+		}
+		if (color_groups.has(group)) color_groups.get(group).push(color);
+		else color_groups.set(group, [color]);
+	}
+	return Array.from(color_groups).sort((a, b) => a[0] === unknown || b[0] === unknown ? -1 : b[1].length - a[1].length);
+}
+//#endregion
+//#region src/types.ts
+const EXTENSION_AUTHORED_AS = "com.projectwallace.css-authored-as";
+const EXTENSION_USAGE_COUNT = "com.projectwallace.usage-count";
+const EXTENSION_CSS_PROPERTIES = "com.projectwallace.css-properties";
+//#endregion
+//#region src/colors.ts
+ColorSpace.register(sRGB);
+ColorSpace.register(XYZ_D65);
+ColorSpace.register(XYZ_D50);
+ColorSpace.register(XYZ_ABS_D65);
+ColorSpace.register(Lab_D65);
+ColorSpace.register(Lab);
+ColorSpace.register(LCH);
+ColorSpace.register(sRGB_Linear);
+ColorSpace.register(HSL);
+ColorSpace.register(HWB);
+ColorSpace.register(HSV);
+ColorSpace.register(P3_Linear);
+ColorSpace.register(P3);
+ColorSpace.register(A98RGB_Linear);
+ColorSpace.register(A98RGB);
+ColorSpace.register(ProPhoto_Linear);
+ColorSpace.register(ProPhoto);
+ColorSpace.register(REC_2020_Linear);
+ColorSpace.register(REC_2020);
+ColorSpace.register(OKLab);
+ColorSpace.register(OKLCH);
+ColorSpace.register(OKLrab);
+function color_to_token(color) {
+	let lowercased = color.toLowerCase();
+	if (lowercased === "transparent") return {
+		colorSpace: "srgb",
+		components: [
+			0,
+			0,
+			0
+		],
+		alpha: 0
+	};
+	if (cssKeywords.has(lowercased) || colorKeywords.has(lowercased)) return null;
+	if (lowercased.includes("var(")) return null;
+	let parsed_color = tryColor(color);
+	if (parsed_color === null) return null;
+	let [component_a, component_b, component_c] = parsed_color.coords;
+	return {
+		colorSpace: parsed_color.space.id,
+		components: [
+			component_a ?? "none",
+			component_b ?? "none",
+			component_c ?? "none"
+		],
+		alpha: parsed_color.alpha ?? 1
+	};
+}
+//#endregion
+//#region src/destructure-box-shadow.ts
+function create_destructured() {
+	return {
+		color: void 0,
+		offsetX: void 0,
+		offsetY: void 0,
+		blur: void 0,
+		spread: void 0,
+		inset: false
+	};
+}
+function destructure_box_shadow(value) {
+	let ast = parse_value(value);
+	let current_shadow = create_destructured();
+	let destructured = [current_shadow];
+	if (ast.children.length < 2) return null;
+	for (let node of ast.children) if (node.type_name === "Identifier") {
+		if (node.name.toLowerCase() === "inset") current_shadow.inset = true;
+		else if (namedColors.has(node.name) || systemColors.has(node.name)) {
+			let color_token = color_to_token(node.name);
+			if (color_token === null) continue;
+			current_shadow.color = color_token;
+		}
+	} else if (node.type_name === "Dimension" || node.type_name === "Number" && node.value === 0) {
+		let length = node.type_name === "Dimension" ? {
+			value: Number(node.value),
+			unit: node.unit
+		} : {
+			value: 0,
+			unit: "px"
+		};
+		if (!current_shadow.offsetX) current_shadow.offsetX = length;
+		else if (!current_shadow.offsetY) current_shadow.offsetY = length;
+		else if (!current_shadow.blur) current_shadow.blur = length;
+		else if (!current_shadow.spread) current_shadow.spread = length;
+	} else if (node.type_name === "Function") {
+		if (colorFunctions.has(node.name)) {
+			let color_token = color_to_token(node.text);
+			if (color_token === null) continue;
+			current_shadow.color = color_token;
+		} else if (node.name?.toLowerCase() === "var" && !current_shadow.color) {
+			let color_token = color_to_token(node.text);
+			if (color_token === null) continue;
+			current_shadow.color = color_token;
+		}
+	} else if (node.type_name === "Hash") {
+		let color_token = color_to_token(node.text);
+		if (color_token === null) continue;
+		current_shadow.color = color_token;
+	} else if (node.type_name === "Operator" && node.value === ",") {
+		complete_shadow_token(current_shadow);
+		current_shadow = create_destructured();
+		destructured.push(current_shadow);
+	}
+	complete_shadow_token(current_shadow);
+	return destructured;
+}
+const DIMENSION_ZERO = {
+	value: 0,
+	unit: "px"
+};
+/**
+* @description
+* According to the spec every shadow MUST have an offsetX, offsetY, blur, spread and color,
+* only the inset is optional and defaults to false.
+*/
+function complete_shadow_token(token) {
+	if (!token.offsetX) token.offsetX = DIMENSION_ZERO;
+	if (!token.offsetY) token.offsetY = DIMENSION_ZERO;
+	if (!token.blur) token.blur = DIMENSION_ZERO;
+	if (!token.spread) token.spread = DIMENSION_ZERO;
+	if (!token.color) token.color = color_to_token("#000");
+	return token;
+}
+//#endregion
+//#region src/destructure-easing.ts
+const EASING_KEYWORDS = new Map([
+	["linear", [
+		0,
+		0,
+		1,
+		1
+	]],
+	["ease", [
+		.25,
+		.1,
+		.25,
+		1
+	]],
+	["ease-in", [
+		.42,
+		0,
+		1,
+		1
+	]],
+	["ease-out", [
+		0,
+		0,
+		.58,
+		1
+	]],
+	["ease-in-out", [
+		.42,
+		0,
+		.58,
+		1
+	]]
+]);
+function destructure_easing(easing) {
+	easing = easing.trim().toLowerCase();
+	if (EASING_KEYWORDS.has(easing)) return EASING_KEYWORDS.get(easing);
+	if (easing.includes("var(")) return null;
+	if (easing.startsWith("cubic-bezier(")) {
+		let parts = easing.replace("cubic-bezier(", "").replace(")", "").split(",").map((v) => Number(v.trim()));
+		if (parts.length === 4 && parts.every((n) => Number.isFinite(n))) return parts;
+	}
+	return null;
+}
+//#endregion
+//#region src/unquote.ts
+function unquote(input) {
+	return input.replaceAll(/^['"]|['"]$/g, "");
+}
+//#endregion
+//#region src/destructure-font-family.ts
+function destructure_font_family(value) {
+	if (value.toLowerCase().includes("var(")) return;
+	let ast = parse_value(value);
+	let families = [];
+	let { children, has_children } = ast;
+	if (!has_children || children.length === 0) return families;
+	let family_buffer = "";
+	let prev_type;
+	for (let node of children) {
+		if (node.type_name === "Operator" && node.value === ",") {
+			families.push(unquote(family_buffer));
+			family_buffer = "";
+			prev_type = node.type_name;
+			continue;
+		}
+		if (prev_type === "Identifier" && node.type_name === "Identifier") family_buffer += " ";
+		family_buffer += node.text;
+		prev_type = node.type_name;
+	}
+	families.push(unquote(family_buffer));
+	return families;
+}
+//#endregion
+//#region src/hash.ts
+function hash(input) {
+	if (input === void 0) return "0";
+	if (typeof input === "number" && isNaN(input)) return "0";
+	if (typeof input !== "string") input = input.toString();
+	let hash = 0;
+	for (let char of input) {
+		hash = (hash << 5) - hash + char.charCodeAt(0);
+		hash |= 0;
+	}
+	return (hash >>> 0).toString(16);
+}
+//#endregion
+//#region src/destructure-line-height.ts
+const ALLOWED_UNITS = new Set(["px", "rem"]);
+/**
+* @description Destructure a line-height from a string
+* The line-height property is specified as any one of the following:
+*  - a `<number>`
+*  - a `<length>`
+* - a `<percentage>`
+* - the keyword `normal`.
+*/
+function destructure_line_height(value) {
+	let ast = parse_value$1(value);
+	if (!ast.has_children) return null;
+	if (ast.children.length !== 1) return null;
+	let maybe_dimension = ast.first_child;
+	switch (maybe_dimension.type_name) {
+		case "Dimension": {
+			let { value, unit } = maybe_dimension;
+			if (value === 0) return 0;
+			if (unit === "%") return Number(value) / 100;
+			unit = unit.toLowerCase();
+			if (ALLOWED_UNITS.has(unit)) return {
+				value,
+				unit
+			};
+			return null;
+		}
+		case "Number": return Number(maybe_dimension.value);
+		case "Identifier": if (maybe_dimension.name?.toLowerCase() === "normal") return 1.2;
+	}
+	return null;
+}
+//#endregion
+//#region src/parse-length.ts
+let absolute_size_map = new Map([
+	["xx-small", .6],
+	["x-small", .75],
+	["small", .89],
+	["medium", 1],
+	["large", 1.2],
+	["x-large", 1.5],
+	["xx-large", 2],
+	["xxx-large", 3]
+]);
+/**
+* @description Parse a length from a css value
+*  - a `<number>`
+*  - a `<length>`
+* - a `<percentage>`
+* - the keyword `normal`.
+*/
+function parse_length(value) {
+	let ast = parse_value$1(value);
+	if (!ast.has_children || ast.children.length !== 1) return null;
+	let maybe_length = ast.first_child;
+	switch (maybe_length.type_name) {
+		case "Dimension": {
+			let unit = maybe_length.unit.toLowerCase();
+			if (unit === "px" || unit === "rem") {
+				let value = Number(maybe_length.value);
+				if (value === 0) return {
+					value: 0,
+					unit: "px"
+				};
+				return {
+					value,
+					unit
+				};
+			}
+			break;
+		}
+		case "Identifier": {
+			let name = maybe_length.name.toLowerCase();
+			if (absolute_size_map.has(name)) return {
+				value: absolute_size_map.get(name),
+				unit: "rem"
+			};
+			break;
+		}
+		case "Number":
+			if (Number(maybe_length.value) === 0) return {
+				value: 0,
+				unit: "px"
+			};
+			break;
+	}
+	return null;
+}
+//#endregion
+//#region src/index.ts
+function css_to_tokens(css) {
+	return analysis_to_tokens(analyze(css));
+}
+/**
+* Function to get the unique values from a collection regardless of whether the analysis was run with
+* locations enabled or not.
+*/
+function get_unique(collection) {
+	if ("uniqueWithLocations" in collection && collection.uniqueWithLocations != null) return collection.uniqueWithLocations;
+	return collection.unique;
+}
+/**
+* Function to get the count of a specific value from a collection item regardless of whether the
+* analysis was run with locations enabled or not.
+*/
+function get_count(collection_item) {
+	if (Array.isArray(collection_item)) return collection_item.length;
+	return collection_item;
+}
+function analysis_to_tokens(analysis) {
+	return {
+		color: (() => {
+			let colors = Object.create(null);
+			let unique = get_unique(analysis.values.colors);
+			let color_groups = group_colors(unique);
+			for (let [group, group_colors] of color_groups) for (let color of group_colors) {
+				let color_token = color_to_token(color);
+				let count = get_count(unique[color]);
+				if (color_token !== null) {
+					let { colorSpace, components, alpha } = color_token;
+					let name = `${color_dict.get(group)}-${hash([
+						colorSpace,
+						...components,
+						alpha
+					].join(""))}`;
+					let items_per_context = analysis.values.colors.itemsPerContext;
+					let new_properties = Object.entries(items_per_context).reduce((acc, [property, collection]) => {
+						if (color in collection.unique) return acc.add(property);
+						if (collection.uniqueWithLocations && color in collection.uniqueWithLocations) return acc.add(property);
+						return acc;
+					}, /* @__PURE__ */ new Set());
+					if (colors[name]) {
+						let old_properties = colors[name].$extensions[EXTENSION_CSS_PROPERTIES];
+						colors[name].$extensions[EXTENSION_CSS_PROPERTIES] = Array.from(new Set(old_properties).union(new_properties));
+						colors[name].$extensions[EXTENSION_USAGE_COUNT] += count;
+					} else colors[name] = {
+						$type: "color",
+						$value: color_token,
+						$extensions: {
+							[EXTENSION_AUTHORED_AS]: color,
+							[EXTENSION_USAGE_COUNT]: count,
+							[EXTENSION_CSS_PROPERTIES]: Array.from(new_properties)
+						}
+					};
+				}
+			}
+			return colors;
+		})(),
+		font_size: (() => {
+			let font_sizes = Object.create(null);
+			let unique = get_unique(analysis.values.fontSizes);
+			for (let font_size in unique) {
+				let parsed = parse_length(font_size);
+				let extensions = {
+					[EXTENSION_AUTHORED_AS]: font_size,
+					[EXTENSION_USAGE_COUNT]: get_count(unique[font_size])
+				};
+				if (parsed === null) {
+					let name = `fontSize-${hash(font_size)}`;
+					font_sizes[name] = {
+						$value: font_size,
+						$extensions: extensions
+					};
+				} else {
+					let name = `fontSize-${hash(parsed.value.toString() + parsed.unit)}`;
+					if (font_sizes[name]) font_sizes[name].$extensions[EXTENSION_USAGE_COUNT] += extensions[EXTENSION_USAGE_COUNT];
+					else font_sizes[name] = {
+						$type: "dimension",
+						$value: parsed,
+						$extensions: extensions
+					};
+				}
+			}
+			return font_sizes;
+		})(),
+		font_family: (() => {
+			let families = Object.create(null);
+			let unique = get_unique(analysis.values.fontFamilies);
+			for (let font_family in unique) {
+				let parsed = destructure_font_family(font_family);
+				let name = `fontFamily-${hash(font_family)}`;
+				let extensions = {
+					[EXTENSION_AUTHORED_AS]: font_family,
+					[EXTENSION_USAGE_COUNT]: get_count(unique[font_family])
+				};
+				if (parsed === void 0) families[name] = {
+					$value: font_family,
+					$extensions: extensions
+				};
+				else families[name] = {
+					$type: "fontFamily",
+					$value: parsed,
+					$extensions: extensions
+				};
+			}
+			return families;
+		})(),
+		line_height: (() => {
+			let line_heights = Object.create(null);
+			let unique = get_unique(analysis.values.lineHeights);
+			for (let line_height in unique) {
+				let parsed = destructure_line_height(line_height);
+				let extensions = {
+					[EXTENSION_AUTHORED_AS]: line_height,
+					[EXTENSION_USAGE_COUNT]: get_count(unique[line_height])
+				};
+				if (parsed === null) {
+					let name = `lineHeight-${hash(line_height)}`;
+					line_heights[name] = {
+						$value: line_height,
+						$extensions: extensions
+					};
+				} else if (typeof parsed === "number") {
+					let name = `lineHeight-${hash(parsed)}`;
+					if (line_heights[name]) line_heights[name].$extensions[EXTENSION_USAGE_COUNT] += extensions[EXTENSION_USAGE_COUNT];
+					else line_heights[name] = {
+						$type: "number",
+						$value: parsed,
+						$extensions: extensions
+					};
+				} else if (typeof parsed === "object") if (parsed.unit === "px" || parsed.unit === "rem") {
+					let name = `lineHeight-${hash(parsed.value.toString() + parsed.unit)}`;
+					if (line_heights[name]) line_heights[name].$extensions[EXTENSION_USAGE_COUNT] += extensions[EXTENSION_USAGE_COUNT];
+					else line_heights[name] = {
+						$type: "dimension",
+						$value: parsed,
+						$extensions: extensions
+					};
+				} else {
+					let name = `lineHeight-${hash(line_height)}`;
+					line_heights[name] = {
+						$value: line_height,
+						$extensions: extensions
+					};
+				}
+			}
+			return line_heights;
+		})(),
+		gradient: (() => {
+			let gradients = Object.create(null);
+			let unique = get_unique(analysis.values.gradients);
+			for (let gradient in unique) gradients[`gradient-${hash(gradient)}`] = {
+				$value: gradient,
+				$extensions: {
+					[EXTENSION_AUTHORED_AS]: gradient,
+					[EXTENSION_USAGE_COUNT]: get_count(unique[gradient])
+				}
+			};
+			return gradients;
+		})(),
+		box_shadow: (() => {
+			let shadows = Object.create(null);
+			let unique = get_unique(analysis.values.boxShadows);
+			for (let box_shadow in unique) {
+				let name = `boxShadow-${hash(box_shadow)}`;
+				let parsed = destructure_box_shadow(box_shadow);
+				let extensions = {
+					[EXTENSION_AUTHORED_AS]: box_shadow,
+					[EXTENSION_USAGE_COUNT]: get_count(unique[box_shadow])
+				};
+				if (parsed === null) shadows[name] = {
+					$value: box_shadow,
+					$extensions: extensions
+				};
+				else shadows[name] = {
+					$type: "shadow",
+					$value: parsed.length === 1 ? parsed[0] : parsed,
+					$extensions: extensions
+				};
+			}
+			return shadows;
+		})(),
+		radius: (() => {
+			let radii = Object.create(null);
+			let unique = get_unique(analysis.values.borderRadiuses);
+			for (let radius in unique) {
+				let name = `radius-${hash(radius)}`;
+				radii[name] = {
+					$value: radius,
+					$extensions: {
+						[EXTENSION_AUTHORED_AS]: radius,
+						[EXTENSION_USAGE_COUNT]: get_count(unique[radius])
+					}
+				};
+			}
+			return radii;
+		})(),
+		duration: (() => {
+			let durations = Object.create(null);
+			let unique = get_unique(analysis.values.animations.durations);
+			for (let duration in unique) {
+				let parsed = convert(duration);
+				let is_valid = parsed < Number.MAX_SAFE_INTEGER - 1;
+				let extensions = {
+					[EXTENSION_AUTHORED_AS]: duration,
+					[EXTENSION_USAGE_COUNT]: get_count(unique[duration])
+				};
+				if (is_valid) {
+					let name = `duration-${hash(parsed.toString())}`;
+					if (durations[name]) durations[name].$extensions[EXTENSION_USAGE_COUNT] += extensions[EXTENSION_USAGE_COUNT];
+					else durations[name] = {
+						$type: "duration",
+						$value: {
+							value: parsed,
+							unit: "ms"
+						},
+						$extensions: extensions
+					};
+				} else {
+					let name = `duration-${hash("invalid" + parsed.toString())}`;
+					durations[name] = {
+						$value: duration,
+						$extensions: extensions
+					};
+				}
+			}
+			return durations;
+		})(),
+		easing: (() => {
+			let easings = Object.create(null);
+			let unique = get_unique(analysis.values.animations.timingFunctions);
+			for (let easing in unique) {
+				let name = `easing-${hash(easing)}`;
+				let value = destructure_easing(easing);
+				let extensions = {
+					[EXTENSION_AUTHORED_AS]: easing,
+					[EXTENSION_USAGE_COUNT]: get_count(unique[easing])
+				};
+				if (value !== null) easings[name] = {
+					$value: value,
+					$type: "cubicBezier",
+					$extensions: extensions
+				};
+				else easings[name] = {
+					$value: easing,
+					$extensions: extensions
+				};
+			}
+			return easings;
+		})()
+	};
+}
+//#endregion
+export { EXTENSION_AUTHORED_AS, EXTENSION_CSS_PROPERTIES, EXTENSION_USAGE_COUNT, analysis_to_tokens, color_to_token, css_to_tokens };

package/package.json

@@ -1,49 +1,57 @@
 {
 	"name": "@projectwallace/css-design-tokens",
+	"version": "0.11.1",
 	"description": "Generate spec-compliant Design Tokens from CSS.",
-	"version": "0.10.0",
+	"keywords": [
+		"color",
+		"css",
+		"design-tokens",
+		"font",
+		"spec",
+		"token"
+	],
+	"homepage": "https://github.com/projectwallace/css-design-tokens",
 	"license": "EUPL-1.2",
 	"author": "Bart Veneman <bart@projectwallace.com>",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/projectwallace/css-design-tokens.git"
 	},
-	"homepage": "https://github.com/projectwallace/css-design-tokens",
-	"issues": "https://github.com/projectwallace/css-design-tokens/issues",
-	"keywords": [
-		"css",
-		"design-tokens",
-		"spec"
-	],
-	"type": "module",
 	"files": [
 		"dist"
 	],
-	"main": "dist/css-design-tokens.js",
+	"type": "module",
+	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"exports": {
 		"types": "./dist/index.d.ts",
-		"default": "./dist/css-design-tokens.js"
-	},
-	"engines": {
-		"node": ">=22"
+		"default": "./dist/index.js"
 	},
 	"scripts": {
-		"test": "vitest run",
-		"build": "vite build",
-		"check": "tsc --noEmit"
+		"test": "vitest --coverage",
+		"build": "tsdown",
+		"check": "tsc --noEmit",
+		"lint": "oxlint; oxfmt --check"
 	},
 	"dependencies": {
-		"@projectwallace/css-analyzer": "^7.6.0",
-		"color-sorter": "^7.0.0",
-		"colorjs.io": "^0.6.0-alpha.1",
-		"css-time-sort": "^3.0.0",
-		"css-tree": "^3.1.0"
+		"@projectwallace/css-analyzer": "^9.3.0",
+		"@projectwallace/css-parser": "^0.13.5",
+		"color-sorter": "^7.0.1",
+		"colorjs.io": "^0.6.1",
+		"css-time-sort": "^3.0.0"
 	},
 	"devDependencies": {
-		"@types/css-tree": "^2.3.10",
-		"vite": "^7.0.4",
-		"vite-plugin-dts": "^4.5.4",
-		"vitest": "^3.2.4"
-	}
+		"@codecov/rollup-plugin": "^1.9.1",
+		"@vitest/coverage-v8": "^4.0.18",
+		"oxfmt": "^0.36.0",
+		"oxlint": "^1.51.0",
+		"publint": "^0.3.18",
+		"tsdown": "^0.21.1",
+		"typescript": "^5.9.3",
+		"vitest": "^4.0.18"
+	},
+	"engines": {
+		"node": ">=22"
+	},
+	"issues": "https://github.com/projectwallace/css-design-tokens/issues"
 }