boss-css 0.0.22 → 0.0.24

package/dist/prop/bosswind/server.cjs

@@ -1,10 +1,10 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_tailwind_theme = require('./tailwind-theme.cjs');
-const require_shared = require('./shared.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_tailwind_theme = require("./tailwind-theme.cjs");
+const require_shared = require("./shared.cjs");
 let ts_deepmerge = require("ts-deepmerge");
-
 //#region src/prop/bosswind/server.ts
-var server_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+var server_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	name: () => name,
 	onBoot: () => onBoot,
 	onPropTree: () => onPropTree,
@@ -75,6 +75,7 @@ const onBoot = async (api) => {
 	});
 };
 const onReady = async (api) => {
+	require_shared.ensureBosswindSizeBaseVar(api, typeof api.tokens === "function" ? api.tokens({}) : api.tokens);
 	const flex = api.dictionary.get("flex");
 	if (flex) flex.single = true;
 	const grid = api.dictionary.get("grid");
@@ -94,15 +95,14 @@ const onPropTree = async (api, { tree, parser }) => {
 	Object.keys(tree).forEach((key) => delete tree[key]);
 	Object.assign(tree, next);
 };
-
 //#endregion
 exports.name = name;
 exports.onBoot = onBoot;
 exports.onPropTree = onPropTree;
 exports.onReady = onReady;
-Object.defineProperty(exports, 'server_exports', {
-  enumerable: true,
-  get: function () {
-    return server_exports;
-  }
-});
+Object.defineProperty(exports, "server_exports", {
+	enumerable: true,
+	get: function() {
+		return server_exports;
+	}
+});

package/dist/prop/bosswind/server.mjs

@@ -1,8 +1,7 @@
-import { __exportAll } from "../../_virtual/rolldown_runtime.mjs";
-import tailwind_theme_default from "./tailwind-theme.mjs";
-import { bosswindProps, getBosswindDefaults, getBosswindFontSizeKeys, getBosswindMeta, registerBosswindDictionary, rewriteBosswindTree } from "./shared.mjs";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import theme$1 from "./tailwind-theme.mjs";
+import { bosswindProps, ensureBosswindSizeBaseVar, getBosswindDefaults, getBosswindFontSizeKeys, getBosswindMeta, registerBosswindDictionary, rewriteBosswindTree } from "./shared.mjs";
 import { merge } from "ts-deepmerge";
-
 //#region src/prop/bosswind/server.ts
 var server_exports = /* @__PURE__ */ __exportAll({
 	name: () => name,
@@ -12,7 +11,7 @@ var server_exports = /* @__PURE__ */ __exportAll({
 });
 const name = "bosswind";
 let needsRuntime = false;
-const theme = tailwind_theme_default;
+const theme = theme$1;
 const defaults = getBosswindDefaults(theme);
 const fontSizeKeys = getBosswindFontSizeKeys(theme);
 const bosswindTokens = {
@@ -75,6 +74,7 @@ const onBoot = async (api) => {
 	});
 };
 const onReady = async (api) => {
+	ensureBosswindSizeBaseVar(api, typeof api.tokens === "function" ? api.tokens({}) : api.tokens);
 	const flex = api.dictionary.get("flex");
 	if (flex) flex.single = true;
 	const grid = api.dictionary.get("grid");
@@ -94,6 +94,5 @@ const onPropTree = async (api, { tree, parser }) => {
 	Object.keys(tree).forEach((key) => delete tree[key]);
 	Object.assign(tree, next);
 };
-
 //#endregion
-export { name, onBoot, onPropTree, onReady, server_exports };
+export { name, onBoot, onPropTree, onReady, server_exports };

package/dist/prop/bosswind/shared.cjs

@@ -1,5 +1,6 @@
-const require_selectors = require('./selectors.cjs');
-
+const require_normalize = require("../../use/token/normalize.cjs");
+const require_propMap = require("../../use/token/propMap.cjs");
+const require_selectors = require("./selectors.cjs");
 //#region src/prop/bosswind/shared.ts
 const toDashCase = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 const displayKeywords = new Map([
@@ -80,6 +81,7 @@ const aliasMap = new Map([
 	["z", ["zIndex"]],
 	["aspect", ["aspectRatio"]]
 ]);
+const sizeBaseAliasNames = new Set(Array.from(aliasMap.entries()).filter(([, targets]) => targets.length > 0 && targets.every((target) => require_propMap.getTokenGroupForProp(target) === "size")).map(([name]) => name));
 const textAlias = "text";
 const bgAlias = "bg";
 const borderAlias = "border";
@@ -141,6 +143,33 @@ const isLengthLike = (value) => {
 	if (value.startsWith("calc(") || value.startsWith("clamp(") || value.startsWith("min(") || value.startsWith("max(")) return true;
 	return /^-?\d+(?:\.\d+)?(px|rem|em|vh|vw|vmin|vmax|ch|ex|%|pt|pc|mm|cm|in)$/.test(value);
 };
+const isScalableBosswindSizeValue = (value) => {
+	return typeof value === "number" || typeof value === "string" && isNumericString(value);
+};
+const isBosswindSizeProp = (prop) => require_propMap.getTokenGroupForProp(prop) === "size";
+const shouldScaleBosswindSizeProp = (prop, value) => {
+	return isBosswindSizeProp(prop) && isScalableBosswindSizeValue(value);
+};
+const resolveBosswindTokens = (tokens) => {
+	if (!tokens || typeof tokens !== "object") return null;
+	return require_normalize.normalizeTokens(tokens);
+};
+const getBosswindSizeBaseValue = (tokens) => {
+	const sizeGroup = resolveBosswindTokens(tokens)?.size;
+	if (!sizeGroup || typeof sizeGroup !== "object" || Array.isArray(sizeGroup)) return null;
+	const baseValue = sizeGroup.base;
+	return baseValue === void 0 ? null : baseValue;
+};
+const getBosswindSizeBaseVarName = (api) => `--${api.selectorPrefix ?? ""}size-base`;
+const ensureBosswindSizeBaseVar = (api, tokens) => {
+	const baseValue = getBosswindSizeBaseValue(tokens);
+	if (baseValue === null || baseValue === void 0) return;
+	api.css?.addRoot?.(`${getBosswindSizeBaseVarName(api)}: ${api.dictionary.toValue(baseValue)};`);
+};
+const toBosswindSizeBaseCalc = (api, value) => {
+	if ((typeof value === "number" ? value : Number(value)) === 0) return 0;
+	return `calc(${String(value)} * var(${getBosswindSizeBaseVarName(api)}))`;
+};
 const readTokenGroup = (value) => {
 	if (typeof value === "function" && value.IS_TOKEN_FN) {
 		const [group, ...rest] = String(value()).replace("$$.token.", "").split(".");
@@ -769,12 +798,22 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 				usedBosswind = true;
 				if (value === null || value === true) return;
 				const targets = aliasMap.get(name) || [];
-				const resolvedValue = name === "shadow" ? resolveShadowValue(value, config) : value;
+				const shouldScale = sizeBaseAliasNames.has(name) && isScalableBosswindSizeValue(value) && targets.every((target) => isBosswindSizeProp(target));
+				const resolvedValue = shouldScale ? toBosswindSizeBaseCalc(api, value) : value;
+				if (shouldScale) ensureBosswindSizeBaseVar(api, tokens);
 				targets.forEach((target) => {
-					output[target] = cloneProp(prop, resolvedValue, getSelectorName(name));
+					const selectorValue = prop.selectorValue !== void 0 ? prop.selectorValue : value;
+					output[target] = shouldScale ? cloneProp(prop, resolvedValue, getSelectorName(name), selectorValue) : cloneProp(prop, resolvedValue, getSelectorName(name));
 				});
 				return;
 			}
+			if (shouldScaleBosswindSizeProp(name, value)) {
+				usedBosswind = true;
+				ensureBosswindSizeBaseVar(api, tokens);
+				const selectorValue = prop.selectorValue !== void 0 ? prop.selectorValue : value;
+				output[name] = cloneProp(prop, toBosswindSizeBaseCalc(api, value), getSelectorName(name), selectorValue);
+				return;
+			}
 			output[name] = prop;
 		});
 		return output;
@@ -924,12 +963,23 @@ const rewriteBosswindInput = (api, input, config) => {
 		}
 		if (aliasMap.has(name)) {
 			if (value === null || value === true) return;
-			(aliasMap.get(name) || []).forEach((target) => {
-				output[target] = value;
-				setSelector(target, getSelectorName(name));
+			const targets = aliasMap.get(name) || [];
+			const shouldScale = sizeBaseAliasNames.has(name) && isScalableBosswindSizeValue(value) && targets.every((target) => isBosswindSizeProp(target));
+			const resolvedValue = shouldScale ? toBosswindSizeBaseCalc(api, value) : value;
+			if (shouldScale) ensureBosswindSizeBaseVar(api, api.tokens);
+			targets.forEach((target) => {
+				output[target] = resolvedValue;
+				if (shouldScale) setSelector(target, getSelectorName(name), value);
+				else setSelector(target, getSelectorName(name));
 			});
 			return;
 		}
+		if (shouldScaleBosswindSizeProp(name, value)) {
+			ensureBosswindSizeBaseVar(api, api.tokens);
+			output[name] = toBosswindSizeBaseCalc(api, value);
+			setSelector(name, getSelectorName(name), value);
+			return;
+		}
 		output[name] = value;
 	});
 	require_selectors.setBosswindSelectorMap(output, selectorMap);
@@ -949,12 +999,12 @@ const getBosswindFontSizeKeys = (theme) => {
 	const fontSize = theme.fontSize;
 	return fontSize ? Object.keys(fontSize) : [];
 };
-
 //#endregion
 exports.bosswindProps = bosswindProps;
+exports.ensureBosswindSizeBaseVar = ensureBosswindSizeBaseVar;
 exports.getBosswindDefaults = getBosswindDefaults;
 exports.getBosswindFontSizeKeys = getBosswindFontSizeKeys;
 exports.getBosswindMeta = getBosswindMeta;
 exports.registerBosswindDictionary = registerBosswindDictionary;
 exports.rewriteBosswindInput = rewriteBosswindInput;
-exports.rewriteBosswindTree = rewriteBosswindTree;
+exports.rewriteBosswindTree = rewriteBosswindTree;

package/dist/prop/bosswind/shared.mjs

@@ -1,5 +1,6 @@
+import { normalizeTokens } from "../../use/token/normalize.mjs";
+import { getTokenGroupForProp } from "../../use/token/propMap.mjs";
 import { setBosswindSelectorMap } from "./selectors.mjs";
-
 //#region src/prop/bosswind/shared.ts
 const toDashCase = (value) => value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 const displayKeywords = new Map([
@@ -80,6 +81,7 @@ const aliasMap = new Map([
 	["z", ["zIndex"]],
 	["aspect", ["aspectRatio"]]
 ]);
+const sizeBaseAliasNames = new Set(Array.from(aliasMap.entries()).filter(([, targets]) => targets.length > 0 && targets.every((target) => getTokenGroupForProp(target) === "size")).map(([name]) => name));
 const textAlias = "text";
 const bgAlias = "bg";
 const borderAlias = "border";
@@ -141,6 +143,33 @@ const isLengthLike = (value) => {
 	if (value.startsWith("calc(") || value.startsWith("clamp(") || value.startsWith("min(") || value.startsWith("max(")) return true;
 	return /^-?\d+(?:\.\d+)?(px|rem|em|vh|vw|vmin|vmax|ch|ex|%|pt|pc|mm|cm|in)$/.test(value);
 };
+const isScalableBosswindSizeValue = (value) => {
+	return typeof value === "number" || typeof value === "string" && isNumericString(value);
+};
+const isBosswindSizeProp = (prop) => getTokenGroupForProp(prop) === "size";
+const shouldScaleBosswindSizeProp = (prop, value) => {
+	return isBosswindSizeProp(prop) && isScalableBosswindSizeValue(value);
+};
+const resolveBosswindTokens = (tokens) => {
+	if (!tokens || typeof tokens !== "object") return null;
+	return normalizeTokens(tokens);
+};
+const getBosswindSizeBaseValue = (tokens) => {
+	const sizeGroup = resolveBosswindTokens(tokens)?.size;
+	if (!sizeGroup || typeof sizeGroup !== "object" || Array.isArray(sizeGroup)) return null;
+	const baseValue = sizeGroup.base;
+	return baseValue === void 0 ? null : baseValue;
+};
+const getBosswindSizeBaseVarName = (api) => `--${api.selectorPrefix ?? ""}size-base`;
+const ensureBosswindSizeBaseVar = (api, tokens) => {
+	const baseValue = getBosswindSizeBaseValue(tokens);
+	if (baseValue === null || baseValue === void 0) return;
+	api.css?.addRoot?.(`${getBosswindSizeBaseVarName(api)}: ${api.dictionary.toValue(baseValue)};`);
+};
+const toBosswindSizeBaseCalc = (api, value) => {
+	if ((typeof value === "number" ? value : Number(value)) === 0) return 0;
+	return `calc(${String(value)} * var(${getBosswindSizeBaseVarName(api)}))`;
+};
 const readTokenGroup = (value) => {
 	if (typeof value === "function" && value.IS_TOKEN_FN) {
 		const [group, ...rest] = String(value()).replace("$$.token.", "").split(".");
@@ -769,12 +798,22 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 				usedBosswind = true;
 				if (value === null || value === true) return;
 				const targets = aliasMap.get(name) || [];
-				const resolvedValue = name === "shadow" ? resolveShadowValue(value, config) : value;
+				const shouldScale = sizeBaseAliasNames.has(name) && isScalableBosswindSizeValue(value) && targets.every((target) => isBosswindSizeProp(target));
+				const resolvedValue = shouldScale ? toBosswindSizeBaseCalc(api, value) : value;
+				if (shouldScale) ensureBosswindSizeBaseVar(api, tokens);
 				targets.forEach((target) => {
-					output[target] = cloneProp(prop, resolvedValue, getSelectorName(name));
+					const selectorValue = prop.selectorValue !== void 0 ? prop.selectorValue : value;
+					output[target] = shouldScale ? cloneProp(prop, resolvedValue, getSelectorName(name), selectorValue) : cloneProp(prop, resolvedValue, getSelectorName(name));
 				});
 				return;
 			}
+			if (shouldScaleBosswindSizeProp(name, value)) {
+				usedBosswind = true;
+				ensureBosswindSizeBaseVar(api, tokens);
+				const selectorValue = prop.selectorValue !== void 0 ? prop.selectorValue : value;
+				output[name] = cloneProp(prop, toBosswindSizeBaseCalc(api, value), getSelectorName(name), selectorValue);
+				return;
+			}
 			output[name] = prop;
 		});
 		return output;
@@ -924,12 +963,23 @@ const rewriteBosswindInput = (api, input, config) => {
 		}
 		if (aliasMap.has(name)) {
 			if (value === null || value === true) return;
-			(aliasMap.get(name) || []).forEach((target) => {
-				output[target] = value;
-				setSelector(target, getSelectorName(name));
+			const targets = aliasMap.get(name) || [];
+			const shouldScale = sizeBaseAliasNames.has(name) && isScalableBosswindSizeValue(value) && targets.every((target) => isBosswindSizeProp(target));
+			const resolvedValue = shouldScale ? toBosswindSizeBaseCalc(api, value) : value;
+			if (shouldScale) ensureBosswindSizeBaseVar(api, api.tokens);
+			targets.forEach((target) => {
+				output[target] = resolvedValue;
+				if (shouldScale) setSelector(target, getSelectorName(name), value);
+				else setSelector(target, getSelectorName(name));
 			});
 			return;
 		}
+		if (shouldScaleBosswindSizeProp(name, value)) {
+			ensureBosswindSizeBaseVar(api, api.tokens);
+			output[name] = toBosswindSizeBaseCalc(api, value);
+			setSelector(name, getSelectorName(name), value);
+			return;
+		}
 		output[name] = value;
 	});
 	setBosswindSelectorMap(output, selectorMap);
@@ -949,6 +999,5 @@ const getBosswindFontSizeKeys = (theme) => {
 	const fontSize = theme.fontSize;
 	return fontSize ? Object.keys(fontSize) : [];
 };
-
 //#endregion
-export { bosswindProps, getBosswindDefaults, getBosswindFontSizeKeys, getBosswindMeta, registerBosswindDictionary, rewriteBosswindInput, rewriteBosswindTree };
+export { bosswindProps, ensureBosswindSizeBaseVar, getBosswindDefaults, getBosswindFontSizeKeys, getBosswindMeta, registerBosswindDictionary, rewriteBosswindInput, rewriteBosswindTree };

package/dist/prop/bosswind/tailwind-theme.cjs

@@ -1,4 +1,3 @@
-
 //#region src/prop/bosswind/tailwind-theme.ts
 const theme = {
 	animation: {
@@ -270,41 +269,8 @@ const theme = {
 		"in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
 	},
 	size: {
-		"0": 0,
-		"1": 3,
-		"2": 6,
-		"3": 9,
-		"4": 12,
-		"5": 15,
-		"6": 18,
-		"7": 21,
-		"8": 24,
-		"9": 27,
-		"10": 30,
-		"11": 33,
-		"12": 36,
-		"14": 42,
-		"16": 48,
-		"20": 60,
-		"24": 72,
-		"28": 84,
-		"32": 96,
-		"36": 108,
-		"40": 120,
-		"44": 132,
-		"48": 144,
-		"52": 156,
-		"56": 168,
-		"60": 180,
-		"64": 192,
-		"72": 216,
-		"80": 240,
-		"96": 288,
+		base: 3,
 		px: 1,
-		"0.5": 1.5,
-		"1.5": 4.5,
-		"2.5": 7.5,
-		"3.5": 10.5,
 		"1/2": "50%",
 		"1/3": "33.333333%",
 		"2/3": "66.666667%",
@@ -697,7 +663,5 @@ const theme = {
 		fr: "minmax(0, 1fr)"
 	}
 };
-var tailwind_theme_default = theme;
-
 //#endregion
-exports.default = tailwind_theme_default;
+exports.default = theme;

package/dist/prop/bosswind/tailwind-theme.mjs

@@ -269,41 +269,8 @@ const theme = {
 		"in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
 	},
 	size: {
-		"0": 0,
-		"1": 3,
-		"2": 6,
-		"3": 9,
-		"4": 12,
-		"5": 15,
-		"6": 18,
-		"7": 21,
-		"8": 24,
-		"9": 27,
-		"10": 30,
-		"11": 33,
-		"12": 36,
-		"14": 42,
-		"16": 48,
-		"20": 60,
-		"24": 72,
-		"28": 84,
-		"32": 96,
-		"36": 108,
-		"40": 120,
-		"44": 132,
-		"48": 144,
-		"52": 156,
-		"56": 168,
-		"60": 180,
-		"64": 192,
-		"72": 216,
-		"80": 240,
-		"96": 288,
+		base: 3,
 		px: 1,
-		"0.5": 1.5,
-		"1.5": 4.5,
-		"2.5": 7.5,
-		"3.5": 10.5,
 		"1/2": "50%",
 		"1/3": "33.333333%",
 		"2/3": "66.666667%",
@@ -696,7 +663,5 @@ const theme = {
 		fr: "minmax(0, 1fr)"
 	}
 };
-var tailwind_theme_default = theme;
-
 //#endregion
-export { tailwind_theme_default as default };
+export { theme as default };

package/dist/prop/child/runtime-only.cjs

@@ -1,4 +1,4 @@
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/prop/child/runtime-only.ts
 const name = "child";
 const createChildContext = (selector) => {
@@ -11,8 +11,7 @@ const onInit = (api) => {
 		description: "Arbitrary selector nesting"
 	});
 };
-
 //#endregion
 exports.createChildContext = createChildContext;
 exports.name = name;
-exports.onInit = onInit;
+exports.onInit = onInit;

package/dist/prop/child/runtime-only.mjs

@@ -10,6 +10,5 @@ const onInit = (api) => {
 		description: "Arbitrary selector nesting"
 	});
 };
-
 //#endregion
-export { createChildContext, name, onInit };
+export { createChildContext, name, onInit };

package/dist/prop/child/server.cjs

@@ -1,8 +1,8 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_prop_pseudo_server = require('../pseudo/server.cjs');
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_prop_pseudo_server = require("../pseudo/server.cjs");
 //#region src/prop/child/server.ts
-var server_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+var server_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	dependencies: () => dependencies,
 	name: () => name,
 	onBoot: () => onBoot,
@@ -68,15 +68,14 @@ const onProp = async (api, { prop, contexts, preferVariables, file }) => {
 		contexts.pop();
 	}
 };
-
 //#endregion
 exports.dependencies = dependencies;
 exports.name = name;
 exports.onBoot = onBoot;
 exports.onProp = onProp;
-Object.defineProperty(exports, 'server_exports', {
-  enumerable: true,
-  get: function () {
-    return server_exports;
-  }
-});
+Object.defineProperty(exports, "server_exports", {
+	enumerable: true,
+	get: function() {
+		return server_exports;
+	}
+});

package/dist/prop/child/server.mjs

@@ -1,6 +1,5 @@
-import { __exportAll } from "../../_virtual/rolldown_runtime.mjs";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
 import { dependencies as dependencies$1 } from "../pseudo/server.mjs";
-
 //#region src/prop/child/server.ts
 var server_exports = /* @__PURE__ */ __exportAll({
 	dependencies: () => dependencies,
@@ -68,6 +67,5 @@ const onProp = async (api, { prop, contexts, preferVariables, file }) => {
 		contexts.pop();
 	}
 };
-
 //#endregion
-export { dependencies, name, onBoot, onProp, server_exports };
+export { dependencies, name, onBoot, onProp, server_exports };

package/dist/prop/css/getDtsTemplate.cjs

@@ -1,8 +1,7 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 let node_fs_promises = require("node:fs/promises");
-node_fs_promises = require_rolldown_runtime.__toESM(node_fs_promises);
+node_fs_promises = require_runtime.__toESM(node_fs_promises);
 let node_module = require("node:module");
-
 //#region src/prop/css/getDtsTemplate.ts
 const baseInterfaces = [
 	"StandardLonghandProperties",
@@ -19,6 +18,8 @@ const baseInterfaces = [
 	"SvgPropertiesHyphen"
 ];
 const lcfirst = (str) => str.charAt(0).toLowerCase() + str.slice(1);
+const isIdentifier = (str) => /^[$A-Z_a-z][$\w]*$/.test(str);
+const formatDeclarationName = (str) => isIdentifier(str) ? str : JSON.stringify(str);
 let cachedTemplate = null;
 async function getDtsTemplate() {
 	if (cachedTemplate) return cachedTemplate;
@@ -44,13 +45,14 @@ async function getDtsTemplate() {
 			if (!match) continue;
 			const [, _name, values] = match;
 			const name = lcfirst(_name);
+			const declarationName = formatDeclarationName(name);
 			csstypeObject[name] = {
 				description: csstypeObject[name]?.description || comment.join("\n"),
 				types: csstypeObject[name]?.types || values.trim().split("|").map((a) => a.trim()).filter((a) => a),
 				iface
 			};
 			csstypeTemplate.push([`css:${name}:description`, ""]);
-			csstypeTemplate.push([`css:${name}:declaration`, line.replace(/;$/, "").replace(`?: `, () => "?: $$PropValues | ")]);
+			csstypeTemplate.push([`css:${name}:declaration`, `  ${declarationName}?: $$PropValues | ${values.trim()}`]);
 			comment = [];
 		} else if (csstypeTemplate.at(-1)?.[0] === null) {
 			const last = csstypeTemplate.at(-1);
@@ -60,6 +62,5 @@ async function getDtsTemplate() {
 	})();
 	return cachedTemplate;
 }
-
 //#endregion
-exports.default = getDtsTemplate;
+exports.default = getDtsTemplate;

package/dist/prop/css/getDtsTemplate.mjs

@@ -1,6 +1,5 @@
 import { createRequire } from "node:module";
 import fs from "node:fs/promises";
-
 //#region src/prop/css/getDtsTemplate.ts
 const baseInterfaces = [
 	"StandardLonghandProperties",
@@ -17,6 +16,8 @@ const baseInterfaces = [
 	"SvgPropertiesHyphen"
 ];
 const lcfirst = (str) => str.charAt(0).toLowerCase() + str.slice(1);
+const isIdentifier = (str) => /^[$A-Z_a-z][$\w]*$/.test(str);
+const formatDeclarationName = (str) => isIdentifier(str) ? str : JSON.stringify(str);
 let cachedTemplate = null;
 async function getDtsTemplate() {
 	if (cachedTemplate) return cachedTemplate;
@@ -42,13 +43,14 @@ async function getDtsTemplate() {
 			if (!match) continue;
 			const [, _name, values] = match;
 			const name = lcfirst(_name);
+			const declarationName = formatDeclarationName(name);
 			csstypeObject[name] = {
 				description: csstypeObject[name]?.description || comment.join("\n"),
 				types: csstypeObject[name]?.types || values.trim().split("|").map((a) => a.trim()).filter((a) => a),
 				iface
 			};
 			csstypeTemplate.push([`css:${name}:description`, ""]);
-			csstypeTemplate.push([`css:${name}:declaration`, line.replace(/;$/, "").replace(`?: `, () => "?: $$PropValues | ")]);
+			csstypeTemplate.push([`css:${name}:declaration`, `  ${declarationName}?: $$PropValues | ${values.trim()}`]);
 			comment = [];
 		} else if (csstypeTemplate.at(-1)?.[0] === null) {
 			const last = csstypeTemplate.at(-1);
@@ -58,6 +60,5 @@ async function getDtsTemplate() {
 	})();
 	return cachedTemplate;
 }
-
 //#endregion
-export { getDtsTemplate as default };
+export { getDtsTemplate as default };

package/dist/prop/css/runtime-only.cjs

@@ -1,6 +1,6 @@
-const require_names = require('../../api/names.cjs');
-const require_shared = require('../pseudo/shared.cjs');
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_names = require("../../api/names.cjs");
+const require_shared = require("../pseudo/shared.cjs");
 //#region src/prop/css/runtime-only.ts
 const resolvePropertyName = (prop) => prop.includes("-") ? prop : require_names.camelCaseToDash(prop);
 const buildRuntimeSelector = (className, contexts) => {
@@ -8,7 +8,6 @@ const buildRuntimeSelector = (className, contexts) => {
 	const pseudoChain = contexts.filter((context) => require_shared.pseudoDependencies.has(context));
 	return require_names.applyChildSelectors(pseudoChain.length ? `${baseSelector}:${pseudoChain.join(":")}` : baseSelector, contexts);
 };
-
 //#endregion
 exports.buildRuntimeSelector = buildRuntimeSelector;
-exports.resolvePropertyName = resolvePropertyName;
+exports.resolvePropertyName = resolvePropertyName;

package/dist/prop/css/runtime-only.mjs

@@ -1,6 +1,5 @@
 import { applyChildSelectors, camelCaseToDash } from "../../api/names.mjs";
 import { pseudoDependencies } from "../pseudo/shared.mjs";
-
 //#region src/prop/css/runtime-only.ts
 const resolvePropertyName = (prop) => prop.includes("-") ? prop : camelCaseToDash(prop);
 const buildRuntimeSelector = (className, contexts) => {
@@ -8,6 +7,5 @@ const buildRuntimeSelector = (className, contexts) => {
 	const pseudoChain = contexts.filter((context) => pseudoDependencies.has(context));
 	return applyChildSelectors(pseudoChain.length ? `${baseSelector}:${pseudoChain.join(":")}` : baseSelector, contexts);
 };
-
 //#endregion
-export { buildRuntimeSelector, resolvePropertyName };
+export { buildRuntimeSelector, resolvePropertyName };

package/dist/prop/css/server.cjs

@@ -1,11 +1,11 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_getDtsTemplate = require('./getDtsTemplate.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_getDtsTemplate = require("./getDtsTemplate.cjs");
 let _webref_css = require("@webref/css");
-
 //#region src/prop/css/server.ts
-var server_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+var server_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	dependencies: () => dependencies,
-	name: () => name,
+	name: () => "css",
 	onBoot: () => onBoot,
 	onProp: () => onProp
 });
@@ -13,7 +13,7 @@ const name = "css";
 const dependencies = new Set(["css"]);
 const onBoot = async (api) => {
 	const [typeObject, typeTemplate] = await require_getDtsTemplate.default();
-	api.file.js.dts.replace("body", `$$:FinalProps`, (v) => `${v} & StandardProperties`);
+	api.file.js.dts.replace("body", `$$:FinalProps`, (v) => `${v} & Properties & $$CSSMissingProps`);
 	typeTemplate.forEach((entry) => {
 		api.file.js.dts.set("body", ...entry);
 	});
@@ -86,15 +86,14 @@ const onProp = async (api, { name, prop, contexts, preferVariables }) => {
 	api.css.rule(propertyName, value === null ? `var(${api.contextToCSSVariable(name, value, contexts, api.selectorPrefix)})` : value, isImportant ? { important: true } : void 0);
 	if (!contexts.length) api.css.write();
 };
-
 //#endregion
 exports.dependencies = dependencies;
 exports.name = name;
 exports.onBoot = onBoot;
 exports.onProp = onProp;
-Object.defineProperty(exports, 'server_exports', {
-  enumerable: true,
-  get: function () {
-    return server_exports;
-  }
-});
+Object.defineProperty(exports, "server_exports", {
+	enumerable: true,
+	get: function() {
+		return server_exports;
+	}
+});