boss-css 0.0.1 → 0.0.3

package/dist/use/token/server.cjs

@@ -0,0 +1,325 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let ts_deepmerge = require("ts-deepmerge");
+
+//#region src/use/token/server.ts
+var server_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	getTokens: () => getTokens,
+	name: () => name,
+	onBoot: () => onBoot,
+	onPropTree: () => onPropTree,
+	onReady: () => onReady,
+	propMap: () => propMap,
+	set: () => set
+});
+const name = "token";
+const propMap = new Map([
+	["color", new Set([
+		"color",
+		"background",
+		"background-color",
+		"border-color",
+		"accent-color",
+		"caret-color",
+		"fill",
+		"outline-color",
+		"stroke",
+		"text-decoration-color",
+		"text-shadow",
+		"box-shadow",
+		"background-image",
+		"linear-gradient",
+		"radial-gradient",
+		"conic-gradient",
+		"filter"
+	])],
+	["size", new Set([
+		"width",
+		"height",
+		"min-width",
+		"min-height",
+		"max-width",
+		"max-height",
+		"inset",
+		"top",
+		"right",
+		"bottom",
+		"left",
+		"translate",
+		"flex-basis",
+		"gap",
+		"column-gap",
+		"row-gap",
+		"margin",
+		"margin-top",
+		"margin-right",
+		"margin-bottom",
+		"margin-left",
+		"padding",
+		"padding-top",
+		"padding-right",
+		"padding-bottom",
+		"padding-left",
+		"border-spacing",
+		"scroll-margin",
+		"scroll-margin-top",
+		"scroll-margin-right",
+		"scroll-margin-bottom",
+		"scroll-margin-left",
+		"scroll-padding",
+		"scroll-padding-top",
+		"scroll-padding-right",
+		"scroll-padding-bottom",
+		"scroll-padding-left",
+		"text-indent"
+	])],
+	["grid", new Set([
+		"grid-column",
+		"grid-row",
+		"grid-template-columns",
+		"grid-template-rows",
+		"grid-auto-columns",
+		"grid-auto-rows"
+	])],
+	["duration", new Set([
+		"transition-duration",
+		"transition-delay",
+		"animation-duration",
+		"animation-delay"
+	])],
+	["backgroundPosition", new Set([
+		"background-position",
+		"object-position",
+		"transform-origin"
+	])],
+	["font", new Set(["font-family"])]
+]);
+let originals = {};
+const getTokens = () => originals;
+const set = (input) => {
+	const resolvedInput = typeof input === "object" ? input : input(valueMap);
+	originals = (0, ts_deepmerge.merge)(originals, resolvedInput);
+	for (const [key, value] of Object.entries(resolvedInput)) {
+		const propsToMap = propMap.get(key) || [key];
+		for (const prop of propsToMap) valueMap.set(prop, value);
+	}
+};
+let valueMap;
+let hasTokens = false;
+let hasProxyTokens = false;
+let hasTokenOverrides = false;
+let browserResolvedPaths;
+let emittedAllTokens = false;
+let runtimeIncludesTokenPaths = false;
+let tokenCreatorVarName = "";
+let tokenVarsVarName = "";
+const alphaWarnings = /* @__PURE__ */ new Set();
+const tokenAlphaKeyPattern = /^[a-zA-Z0-9_.-]+$/;
+const parseTokenAlphaValue = (value) => {
+	const slashIndex = value.lastIndexOf("/");
+	if (slashIndex <= 0 || slashIndex === value.length - 1) return null;
+	const base = value.slice(0, slashIndex);
+	const alphaRaw = value.slice(slashIndex + 1);
+	if (!tokenAlphaKeyPattern.test(base)) return null;
+	if (!/^\d{1,3}$/.test(alphaRaw)) return {
+		base,
+		alpha: null,
+		alphaRaw
+	};
+	const alpha = Number(alphaRaw);
+	if (!Number.isInteger(alpha) || alpha < 0 || alpha > 100) return {
+		base,
+		alpha: null,
+		alphaRaw
+	};
+	return {
+		base,
+		alpha,
+		alphaRaw
+	};
+};
+const resolveTokenParts = (values, pathParts) => {
+	if (!pathParts.length) return values;
+	return pathParts.reduce((acc, key) => acc?.[key]?.value ?? acc?.[key], values);
+};
+const warnAlpha = (message) => {
+	if (alphaWarnings.has(message)) return;
+	alphaWarnings.add(message);
+	console.warn(`[boss-css] ${message}`);
+};
+const onBoot = async (api) => {
+	hasTokens = false;
+	hasProxyTokens = false;
+	hasTokenOverrides = false;
+	browserResolvedPaths = /* @__PURE__ */ new Set();
+	emittedAllTokens = false;
+	runtimeIncludesTokenPaths = false;
+	valueMap = /* @__PURE__ */ new Map();
+	valueMap.asObject = function() {
+		return Array.from(this.entries()).reduce((acc, [key, value]) => {
+			acc[key] = value;
+			return acc;
+		}, {});
+	};
+	set({ color: {
+		black: "#000",
+		white: "#fff"
+	} });
+	if (api.tokens) set(api.tokens);
+	const shouldEmitRuntime = () => Boolean(hasTokens || hasProxyTokens || hasTokenOverrides || api.emitAllTokens);
+	const runtimeConfig = api.runtime;
+	const hasRuntimeConfig = Boolean(runtimeConfig && (runtimeConfig.only !== void 0 || runtimeConfig.strategy));
+	runtimeIncludesTokenPaths = hasRuntimeConfig;
+	const runtimeModule = hasRuntimeConfig ? "boss-css/use/token/runtime-only" : "boss-css/use/token/browser";
+	api.file.js.importAndConfig({
+		name: "onInit",
+		from: runtimeModule
+	}, shouldEmitRuntime);
+	api.file.js.importAndConfig({
+		name: "onBrowserObjectStart",
+		from: runtimeModule
+	}, shouldEmitRuntime);
+	const tokenPathsVarName = api.file.js.import({
+		name: "tokenPaths",
+		from: runtimeModule
+	}, () => browserResolvedPaths.size > 0 || Boolean(api.emitAllTokens));
+	const shouldEmitTokenProxy = () => Boolean(hasProxyTokens);
+	tokenCreatorVarName = api.file.js.import({
+		name: "create",
+		from: runtimeModule
+	}, shouldEmitTokenProxy);
+	tokenVarsVarName = api.file.js.import({
+		name: "tokenVars",
+		from: runtimeModule
+	}, () => true);
+	if (hasRuntimeConfig) api.file.js.config({
+		from: runtimeModule,
+		config: {
+			tokens: originals,
+			runtime: runtimeConfig
+		}
+	}, shouldEmitRuntime);
+	api.file.js.set("body", "token:browserResolvedPaths", () => `;${JSON.stringify(Array.from(browserResolvedPaths))}.forEach(v => ${tokenPathsVarName}.add(v))`, () => browserResolvedPaths.size > 0 || Boolean(api.emitAllTokens));
+};
+const onReady = async (api) => {
+	api.file.js.dts.set("body", "token:types", `type $$TokenLeaf = string | number | (string | number)[]
+type $$TokenDefinition = ${JSON.stringify(originals, null, 4)}
+type $$TokenOverrides<T = $$TokenDefinition> =
+    T extends any[]
+        ? $$TokenLeaf
+        : T extends { value: infer V }
+          ? $$TokenOverrides<V> | { [K in keyof T]?: $$TokenOverrides<T[K]> }
+          : T extends object
+            ? { [K in keyof T]?: $$TokenOverrides<T[K]> }
+            : $$TokenLeaf
+`);
+	api.file.js.dts.replace("body", "$$:FinalProps", (value) => `${value} & { tokens?: $$TokenOverrides }`);
+	api.file.js.dts.prepend("body", "jsx:proxy-custom-members", `    token: ${JSON.stringify(originals, null, 4)}\n`);
+	api.file.js.dts.prepend("body", "jsx:proxy-custom-members", `    tokenVars: (overrides: $$TokenOverrides) => Record<string, string | number>\n`);
+	const shouldEmitTokenProxy = () => hasProxyTokens;
+	api.file.js.set("foot", "token:$$.token", `$$.token = ${tokenCreatorVarName}()`, shouldEmitTokenProxy);
+	api.file.js.set("foot", "token:$$.tokenVars", `$$.tokenVars = ${tokenVarsVarName}`);
+	for (const [name, values] of valueMap) {
+		const descriptor = api.dictionary.get(name);
+		if (!values || typeof values !== "object") continue;
+		const keys = Object.keys(values);
+		if (!descriptor) continue;
+		for (const alias of descriptor.aliases) {
+			const cssDescription = api.file.js.dts.get("body").get(`css:${alias}:description`);
+			const cssDeclaration = api.file.js.dts.get("body").get(`css:${alias}:declaration`);
+			if (cssDescription) api.file.js.dts.prepend("body", `css:${alias}:description`, `**Available tokens**\n
+${keys.map((k) => `- \`${k}\`: \`${values[k]}\``).join("\n")}
+\n`);
+			if (cssDeclaration) {
+				const cssContent = String(cssDeclaration.content ?? "");
+				api.file.js.dts.set("body", `css:${alias}:declaration`, cssContent.replace("?: ", `?: ${keys.map((k) => `"${k}"`).join(" | ")} | `));
+			}
+		}
+	}
+};
+const onPropTree = async (api, { tree, parser }) => {
+	if (!hasTokenOverrides && tree && typeof tree === "object" && "tokens" in tree) {
+		hasTokenOverrides = true;
+		hasTokens = true;
+	}
+	if (api.emitAllTokens && !emittedAllTokens) {
+		emittedAllTokens = true;
+		hasTokens = true;
+		const addTokenVars = (prefix, value) => {
+			if (value && typeof value === "object" && !Array.isArray(value)) {
+				for (const [key, next] of Object.entries(value)) addTokenVars(prefix ? `${prefix}.${key}` : key, next);
+				return;
+			}
+			if (!prefix) return;
+			const varName = `--${api.selectorPrefix ?? ""}${prefix.replace(/\./g, "-")}`;
+			api.css.addRoot(`${varName}: ${api.dictionary.toValue(value)};`);
+			browserResolvedPaths.add(prefix);
+		};
+		for (const [group, value] of valueMap.entries()) addTokenVars(group, value);
+	}
+	api.walkPropTree(tree, (name, prop) => {
+		const descriptor = api.dictionary.get(name);
+		if (!descriptor) return;
+		const isTokenCodeString = Boolean(prop.dynamic && prop.code?.startsWith("$$.token."));
+		hasProxyTokens = hasProxyTokens || isTokenCodeString;
+		const pathString = isTokenCodeString ? prop.code?.replace("$$.token.", "") : typeof prop.value === "string" ? prop.value.startsWith("$$.token") ? prop.value.replace("$$.token.", "") : `${name}.${prop.value}` : prop.value;
+		if (typeof pathString !== "string") return;
+		const path = pathString.split(".");
+		const [tokenGroupName, ...rest] = path;
+		const { aliases } = descriptor;
+		const valuesByGroupName = valueMap.get(tokenGroupName);
+		const values = aliases.reduce((acc, alias) => {
+			return acc || valueMap.get(alias) || null;
+		}, null) || valuesByGroupName;
+		if (!values) return;
+		const rawValue = prop.value;
+		const colorTokens = valueMap.get("color");
+		const tokenAlpha = typeof rawValue === "string" && values && colorTokens && values === colorTokens ? parseTokenAlphaValue(rawValue) : null;
+		if (tokenAlpha) {
+			const baseValue = resolveTokenParts(values, tokenAlpha.base.split("."));
+			if (baseValue === void 0) {
+				warnAlpha(`Unknown token "${tokenAlpha.base}" for "${name}:${rawValue}".`);
+				return;
+			}
+			if (tokenAlpha.alpha === null) {
+				warnAlpha(`Invalid token alpha "${tokenAlpha.alphaRaw}" for "${name}:${rawValue}" (use 0-100).`);
+				return;
+			}
+			const tokenPath = `${name}.${tokenAlpha.base}`;
+			const varName = `--${api.selectorPrefix ?? ""}${tokenPath.replace(/\./g, "-")}`;
+			const mixValue = `color-mix(in oklab, var(${varName}) ${tokenAlpha.alpha}%, transparent)`;
+			prop.dynamic = false;
+			prop.selectorValue = rawValue;
+			prop.value = mixValue;
+			hasTokens = true;
+			api.css.addRoot(`${varName}: ${api.dictionary.toValue(baseValue)};`);
+			if (parser !== "classname") browserResolvedPaths.add(tokenPath);
+			return;
+		}
+		const tokenValue = rest.length ? resolveTokenParts(values, rest) : void 0;
+		if (tokenValue !== void 0) {
+			const varName = `--${api.selectorPrefix ?? ""}${path.join("-")}`;
+			prop.dynamic = false;
+			prop.selectorValue = parser === "classname" ? prop.value : rest.join(".");
+			prop.value = `var(${varName})`;
+			hasTokens = true;
+			api.css.addRoot(`${varName}: ${api.dictionary.toValue(tokenValue)};`);
+			const shouldTrackPath = runtimeIncludesTokenPaths || typeof prop.value === "string" && !prop.value.startsWith("$$");
+			if (parser !== "classname" && typeof pathString === "string" && shouldTrackPath) browserResolvedPaths.add(pathString);
+		}
+	});
+};
+
+//#endregion
+exports.getTokens = getTokens;
+exports.name = name;
+exports.onBoot = onBoot;
+exports.onPropTree = onPropTree;
+exports.onReady = onReady;
+exports.propMap = propMap;
+Object.defineProperty(exports, 'server_exports', {
+  enumerable: true,
+  get: function () {
+    return server_exports;
+  }
+});
+exports.set = set;

package/dist/use/token/server.mjs

@@ -0,0 +1,313 @@
+import { __exportAll } from "../../_virtual/rolldown_runtime.mjs";
+import { merge } from "ts-deepmerge";
+
+//#region src/use/token/server.ts
+var server_exports = /* @__PURE__ */ __exportAll({
+	getTokens: () => getTokens,
+	name: () => name,
+	onBoot: () => onBoot,
+	onPropTree: () => onPropTree,
+	onReady: () => onReady,
+	propMap: () => propMap,
+	set: () => set
+});
+const name = "token";
+const propMap = new Map([
+	["color", new Set([
+		"color",
+		"background",
+		"background-color",
+		"border-color",
+		"accent-color",
+		"caret-color",
+		"fill",
+		"outline-color",
+		"stroke",
+		"text-decoration-color",
+		"text-shadow",
+		"box-shadow",
+		"background-image",
+		"linear-gradient",
+		"radial-gradient",
+		"conic-gradient",
+		"filter"
+	])],
+	["size", new Set([
+		"width",
+		"height",
+		"min-width",
+		"min-height",
+		"max-width",
+		"max-height",
+		"inset",
+		"top",
+		"right",
+		"bottom",
+		"left",
+		"translate",
+		"flex-basis",
+		"gap",
+		"column-gap",
+		"row-gap",
+		"margin",
+		"margin-top",
+		"margin-right",
+		"margin-bottom",
+		"margin-left",
+		"padding",
+		"padding-top",
+		"padding-right",
+		"padding-bottom",
+		"padding-left",
+		"border-spacing",
+		"scroll-margin",
+		"scroll-margin-top",
+		"scroll-margin-right",
+		"scroll-margin-bottom",
+		"scroll-margin-left",
+		"scroll-padding",
+		"scroll-padding-top",
+		"scroll-padding-right",
+		"scroll-padding-bottom",
+		"scroll-padding-left",
+		"text-indent"
+	])],
+	["grid", new Set([
+		"grid-column",
+		"grid-row",
+		"grid-template-columns",
+		"grid-template-rows",
+		"grid-auto-columns",
+		"grid-auto-rows"
+	])],
+	["duration", new Set([
+		"transition-duration",
+		"transition-delay",
+		"animation-duration",
+		"animation-delay"
+	])],
+	["backgroundPosition", new Set([
+		"background-position",
+		"object-position",
+		"transform-origin"
+	])],
+	["font", new Set(["font-family"])]
+]);
+let originals = {};
+const getTokens = () => originals;
+const set = (input) => {
+	const resolvedInput = typeof input === "object" ? input : input(valueMap);
+	originals = merge(originals, resolvedInput);
+	for (const [key, value] of Object.entries(resolvedInput)) {
+		const propsToMap = propMap.get(key) || [key];
+		for (const prop of propsToMap) valueMap.set(prop, value);
+	}
+};
+let valueMap;
+let hasTokens = false;
+let hasProxyTokens = false;
+let hasTokenOverrides = false;
+let browserResolvedPaths;
+let emittedAllTokens = false;
+let runtimeIncludesTokenPaths = false;
+let tokenCreatorVarName = "";
+let tokenVarsVarName = "";
+const alphaWarnings = /* @__PURE__ */ new Set();
+const tokenAlphaKeyPattern = /^[a-zA-Z0-9_.-]+$/;
+const parseTokenAlphaValue = (value) => {
+	const slashIndex = value.lastIndexOf("/");
+	if (slashIndex <= 0 || slashIndex === value.length - 1) return null;
+	const base = value.slice(0, slashIndex);
+	const alphaRaw = value.slice(slashIndex + 1);
+	if (!tokenAlphaKeyPattern.test(base)) return null;
+	if (!/^\d{1,3}$/.test(alphaRaw)) return {
+		base,
+		alpha: null,
+		alphaRaw
+	};
+	const alpha = Number(alphaRaw);
+	if (!Number.isInteger(alpha) || alpha < 0 || alpha > 100) return {
+		base,
+		alpha: null,
+		alphaRaw
+	};
+	return {
+		base,
+		alpha,
+		alphaRaw
+	};
+};
+const resolveTokenParts = (values, pathParts) => {
+	if (!pathParts.length) return values;
+	return pathParts.reduce((acc, key) => acc?.[key]?.value ?? acc?.[key], values);
+};
+const warnAlpha = (message) => {
+	if (alphaWarnings.has(message)) return;
+	alphaWarnings.add(message);
+	console.warn(`[boss-css] ${message}`);
+};
+const onBoot = async (api) => {
+	hasTokens = false;
+	hasProxyTokens = false;
+	hasTokenOverrides = false;
+	browserResolvedPaths = /* @__PURE__ */ new Set();
+	emittedAllTokens = false;
+	runtimeIncludesTokenPaths = false;
+	valueMap = /* @__PURE__ */ new Map();
+	valueMap.asObject = function() {
+		return Array.from(this.entries()).reduce((acc, [key, value]) => {
+			acc[key] = value;
+			return acc;
+		}, {});
+	};
+	set({ color: {
+		black: "#000",
+		white: "#fff"
+	} });
+	if (api.tokens) set(api.tokens);
+	const shouldEmitRuntime = () => Boolean(hasTokens || hasProxyTokens || hasTokenOverrides || api.emitAllTokens);
+	const runtimeConfig = api.runtime;
+	const hasRuntimeConfig = Boolean(runtimeConfig && (runtimeConfig.only !== void 0 || runtimeConfig.strategy));
+	runtimeIncludesTokenPaths = hasRuntimeConfig;
+	const runtimeModule = hasRuntimeConfig ? "boss-css/use/token/runtime-only" : "boss-css/use/token/browser";
+	api.file.js.importAndConfig({
+		name: "onInit",
+		from: runtimeModule
+	}, shouldEmitRuntime);
+	api.file.js.importAndConfig({
+		name: "onBrowserObjectStart",
+		from: runtimeModule
+	}, shouldEmitRuntime);
+	const tokenPathsVarName = api.file.js.import({
+		name: "tokenPaths",
+		from: runtimeModule
+	}, () => browserResolvedPaths.size > 0 || Boolean(api.emitAllTokens));
+	const shouldEmitTokenProxy = () => Boolean(hasProxyTokens);
+	tokenCreatorVarName = api.file.js.import({
+		name: "create",
+		from: runtimeModule
+	}, shouldEmitTokenProxy);
+	tokenVarsVarName = api.file.js.import({
+		name: "tokenVars",
+		from: runtimeModule
+	}, () => true);
+	if (hasRuntimeConfig) api.file.js.config({
+		from: runtimeModule,
+		config: {
+			tokens: originals,
+			runtime: runtimeConfig
+		}
+	}, shouldEmitRuntime);
+	api.file.js.set("body", "token:browserResolvedPaths", () => `;${JSON.stringify(Array.from(browserResolvedPaths))}.forEach(v => ${tokenPathsVarName}.add(v))`, () => browserResolvedPaths.size > 0 || Boolean(api.emitAllTokens));
+};
+const onReady = async (api) => {
+	api.file.js.dts.set("body", "token:types", `type $$TokenLeaf = string | number | (string | number)[]
+type $$TokenDefinition = ${JSON.stringify(originals, null, 4)}
+type $$TokenOverrides<T = $$TokenDefinition> =
+    T extends any[]
+        ? $$TokenLeaf
+        : T extends { value: infer V }
+          ? $$TokenOverrides<V> | { [K in keyof T]?: $$TokenOverrides<T[K]> }
+          : T extends object
+            ? { [K in keyof T]?: $$TokenOverrides<T[K]> }
+            : $$TokenLeaf
+`);
+	api.file.js.dts.replace("body", "$$:FinalProps", (value) => `${value} & { tokens?: $$TokenOverrides }`);
+	api.file.js.dts.prepend("body", "jsx:proxy-custom-members", `    token: ${JSON.stringify(originals, null, 4)}\n`);
+	api.file.js.dts.prepend("body", "jsx:proxy-custom-members", `    tokenVars: (overrides: $$TokenOverrides) => Record<string, string | number>\n`);
+	const shouldEmitTokenProxy = () => hasProxyTokens;
+	api.file.js.set("foot", "token:$$.token", `$$.token = ${tokenCreatorVarName}()`, shouldEmitTokenProxy);
+	api.file.js.set("foot", "token:$$.tokenVars", `$$.tokenVars = ${tokenVarsVarName}`);
+	for (const [name, values] of valueMap) {
+		const descriptor = api.dictionary.get(name);
+		if (!values || typeof values !== "object") continue;
+		const keys = Object.keys(values);
+		if (!descriptor) continue;
+		for (const alias of descriptor.aliases) {
+			const cssDescription = api.file.js.dts.get("body").get(`css:${alias}:description`);
+			const cssDeclaration = api.file.js.dts.get("body").get(`css:${alias}:declaration`);
+			if (cssDescription) api.file.js.dts.prepend("body", `css:${alias}:description`, `**Available tokens**\n
+${keys.map((k) => `- \`${k}\`: \`${values[k]}\``).join("\n")}
+\n`);
+			if (cssDeclaration) {
+				const cssContent = String(cssDeclaration.content ?? "");
+				api.file.js.dts.set("body", `css:${alias}:declaration`, cssContent.replace("?: ", `?: ${keys.map((k) => `"${k}"`).join(" | ")} | `));
+			}
+		}
+	}
+};
+const onPropTree = async (api, { tree, parser }) => {
+	if (!hasTokenOverrides && tree && typeof tree === "object" && "tokens" in tree) {
+		hasTokenOverrides = true;
+		hasTokens = true;
+	}
+	if (api.emitAllTokens && !emittedAllTokens) {
+		emittedAllTokens = true;
+		hasTokens = true;
+		const addTokenVars = (prefix, value) => {
+			if (value && typeof value === "object" && !Array.isArray(value)) {
+				for (const [key, next] of Object.entries(value)) addTokenVars(prefix ? `${prefix}.${key}` : key, next);
+				return;
+			}
+			if (!prefix) return;
+			const varName = `--${api.selectorPrefix ?? ""}${prefix.replace(/\./g, "-")}`;
+			api.css.addRoot(`${varName}: ${api.dictionary.toValue(value)};`);
+			browserResolvedPaths.add(prefix);
+		};
+		for (const [group, value] of valueMap.entries()) addTokenVars(group, value);
+	}
+	api.walkPropTree(tree, (name, prop) => {
+		const descriptor = api.dictionary.get(name);
+		if (!descriptor) return;
+		const isTokenCodeString = Boolean(prop.dynamic && prop.code?.startsWith("$$.token."));
+		hasProxyTokens = hasProxyTokens || isTokenCodeString;
+		const pathString = isTokenCodeString ? prop.code?.replace("$$.token.", "") : typeof prop.value === "string" ? prop.value.startsWith("$$.token") ? prop.value.replace("$$.token.", "") : `${name}.${prop.value}` : prop.value;
+		if (typeof pathString !== "string") return;
+		const path = pathString.split(".");
+		const [tokenGroupName, ...rest] = path;
+		const { aliases } = descriptor;
+		const valuesByGroupName = valueMap.get(tokenGroupName);
+		const values = aliases.reduce((acc, alias) => {
+			return acc || valueMap.get(alias) || null;
+		}, null) || valuesByGroupName;
+		if (!values) return;
+		const rawValue = prop.value;
+		const colorTokens = valueMap.get("color");
+		const tokenAlpha = typeof rawValue === "string" && values && colorTokens && values === colorTokens ? parseTokenAlphaValue(rawValue) : null;
+		if (tokenAlpha) {
+			const baseValue = resolveTokenParts(values, tokenAlpha.base.split("."));
+			if (baseValue === void 0) {
+				warnAlpha(`Unknown token "${tokenAlpha.base}" for "${name}:${rawValue}".`);
+				return;
+			}
+			if (tokenAlpha.alpha === null) {
+				warnAlpha(`Invalid token alpha "${tokenAlpha.alphaRaw}" for "${name}:${rawValue}" (use 0-100).`);
+				return;
+			}
+			const tokenPath = `${name}.${tokenAlpha.base}`;
+			const varName = `--${api.selectorPrefix ?? ""}${tokenPath.replace(/\./g, "-")}`;
+			const mixValue = `color-mix(in oklab, var(${varName}) ${tokenAlpha.alpha}%, transparent)`;
+			prop.dynamic = false;
+			prop.selectorValue = rawValue;
+			prop.value = mixValue;
+			hasTokens = true;
+			api.css.addRoot(`${varName}: ${api.dictionary.toValue(baseValue)};`);
+			if (parser !== "classname") browserResolvedPaths.add(tokenPath);
+			return;
+		}
+		const tokenValue = rest.length ? resolveTokenParts(values, rest) : void 0;
+		if (tokenValue !== void 0) {
+			const varName = `--${api.selectorPrefix ?? ""}${path.join("-")}`;
+			prop.dynamic = false;
+			prop.selectorValue = parser === "classname" ? prop.value : rest.join(".");
+			prop.value = `var(${varName})`;
+			hasTokens = true;
+			api.css.addRoot(`${varName}: ${api.dictionary.toValue(tokenValue)};`);
+			const shouldTrackPath = runtimeIncludesTokenPaths || typeof prop.value === "string" && !prop.value.startsWith("$$");
+			if (parser !== "classname" && typeof pathString === "string" && shouldTrackPath) browserResolvedPaths.add(pathString);
+		}
+	});
+};
+
+//#endregion
+export { getTokens, name, onBoot, onPropTree, onReady, propMap, server_exports, set };

package/dist/use/token/vars.cjs

@@ -0,0 +1,47 @@
+
+//#region src/use/token/vars.ts
+const isPlainObject = (value) => {
+	return Boolean(value && typeof value === "object" && !Array.isArray(value));
+};
+const hasValueEntry = (value) => {
+	return isPlainObject(value) && Object.prototype.hasOwnProperty.call(value, "value");
+};
+const createTokenVars = ({ prefix = "", toValue } = {}) => {
+	const resolveValue = toValue ?? ((value) => value == null ? value : String(value));
+	return (input) => {
+		const result = {};
+		if (!input || typeof input !== "object") return result;
+		const applyVar = (path, group, value) => {
+			if (!path.length) return;
+			const name = `--${prefix}${path.join("-")}`;
+			const resolved = resolveValue(value, group ?? path[0]);
+			if (typeof resolved === "number") {
+				result[name] = resolved;
+				return;
+			}
+			if (typeof resolved === "string") {
+				result[name] = resolved;
+				return;
+			}
+			if (resolved == null) return;
+			result[name] = String(resolved);
+		};
+		const walk = (node, path, group) => {
+			if (node == null) return;
+			if (Array.isArray(node) || !isPlainObject(node)) {
+				applyVar(path, group, node);
+				return;
+			}
+			if (hasValueEntry(node)) {
+				applyVar(path, group, node.value);
+				return;
+			}
+			for (const [key, value] of Object.entries(node)) walk(value, [...path, key], group ?? key);
+		};
+		walk(input, [], null);
+		return result;
+	};
+};
+
+//#endregion
+exports.createTokenVars = createTokenVars;