boss-css 0.0.13 → 0.0.15

package/dist/prop/bosswind/shared.mjs

@@ -1,3 +1,5 @@
+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([
@@ -579,10 +581,16 @@ const registerBosswindDictionary = (api) => {
 		api.dictionary.set(entry.name, prop);
 	}
 };
-const cloneProp = (prop, value) => ({
-	...prop,
-	value
-});
+const selectorValueUnset = Symbol("selectorValueUnset");
+const cloneProp = (prop, value, selectorName, selectorValue = selectorValueUnset) => {
+	const next = {
+		...prop,
+		value
+	};
+	if (selectorName && selectorName !== prop.selectorName) next.selectorName = selectorName;
+	if (selectorValue !== selectorValueUnset) next.selectorValue = selectorValue;
+	return next;
+};
 const combineAxisValues = (xValue, yValue, defaults) => {
 	if (typeof xValue === "function" || typeof yValue === "function") return () => [resolveTranslateScaleValue(typeof xValue === "function" ? xValue() : xValue, defaults.x), resolveTranslateScaleValue(typeof yValue === "function" ? yValue() : yValue, defaults.y)];
 	return [resolveTranslateScaleValue(xValue, defaults.x), resolveTranslateScaleValue(yValue, defaults.y)];
@@ -605,14 +613,20 @@ const resolveAxisPairs = (entries, node) => {
 	}
 	return results;
 };
-const applyAxisPairsToTree = (entries, node, output, used) => {
+const applyAxisPairsToTree = (entries, node, output, used, getSelectorName) => {
 	const pairs = resolveAxisPairs(entries, node);
 	if (!pairs.length) return;
 	for (const pair of pairs) {
 		if (!Number.isFinite(pair.emitIndex)) continue;
 		const xValue = node[pair.x]?.value ?? null;
 		const yValue = node[pair.y]?.value ?? null;
-		output[pair.prop] = cloneProp(node[pair.x] || node[pair.y], combineAxisValues(xValue, yValue, pair.defaults));
+		const xIndex = entries.findIndex(([name]) => name === pair.x);
+		const yIndex = entries.findIndex(([name]) => name === pair.y);
+		const sourceName = xIndex === -1 ? pair.y : yIndex === -1 ? pair.x : xIndex <= yIndex ? pair.x : pair.y;
+		const selectorName = getSelectorName ? getSelectorName(sourceName) : void 0;
+		const sourceProp = node[sourceName] || node[pair.x] || node[pair.y];
+		const selectorValue = sourceProp?.selectorValue !== void 0 ? sourceProp.selectorValue : sourceProp?.value;
+		output[pair.prop] = cloneProp(sourceProp, combineAxisValues(xValue, yValue, pair.defaults), selectorName, selectorValue);
 		used.set(pair.x, true);
 		used.set(pair.y, true);
 		used.set(`__emit:${pair.emitIndex}:${pair.prop}`, true);
@@ -625,22 +639,29 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 		const rawEntries = Object.entries(node);
 		const entries = [];
 		const normalizedNode = {};
+		const rawNameByNormalized = /* @__PURE__ */ new Map();
 		rawEntries.forEach(([rawName, prop]) => {
 			const name = normalizeBosswindName(rawName);
 			if (Object.prototype.hasOwnProperty.call(normalizedNode, name)) return;
 			normalizedNode[name] = prop;
+			rawNameByNormalized.set(name, rawName);
 			entries.push([name, prop]);
 		});
+		const getSelectorName = (name) => rawNameByNormalized.get(name) ?? name;
 		const output = {};
 		const used = /* @__PURE__ */ new Map();
-		applyAxisPairsToTree(entries, normalizedNode, output, used);
+		applyAxisPairsToTree(entries, normalizedNode, output, used, getSelectorName);
 		const hasSkewX = Object.prototype.hasOwnProperty.call(normalizedNode, "skewX");
 		const hasSkewY = Object.prototype.hasOwnProperty.call(normalizedNode, "skewY");
 		if (!Object.prototype.hasOwnProperty.call(normalizedNode, "transform") && (hasSkewX || hasSkewY)) {
 			const transformValue = resolveSkewTransformValue(hasSkewX ? normalizedNode.skewX?.value ?? null : null, hasSkewY ? normalizedNode.skewY?.value ?? null : null, hasSkewX, hasSkewY);
 			if (transformValue) {
-				const sourceProp = normalizedNode.skewX || normalizedNode.skewY;
-				if (sourceProp) output.transform = cloneProp(sourceProp, transformValue);
+				const sourceName = hasSkewX ? "skewX" : "skewY";
+				const sourceProp = normalizedNode[sourceName];
+				if (sourceProp) {
+					const selectorValue = sourceProp.selectorValue !== void 0 ? sourceProp.selectorValue : sourceProp.value;
+					output.transform = cloneProp(sourceProp, transformValue, getSelectorName(sourceName), selectorValue);
+				}
 				used.set("skewX", true);
 				used.set("skewY", true);
 			}
@@ -659,7 +680,7 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 			const value = prop?.value;
 			if (name === "flex" || name === "grid") {
 				if (value === null || value === true) {
-					output.display = cloneProp(prop, name);
+					output.display = cloneProp(prop, name, getSelectorName(name), null);
 					usedBosswind = true;
 					return;
 				}
@@ -669,7 +690,7 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 			if (displayKeywords.has(name)) {
 				if (value === null || value === true) {
 					const displayValue = displayKeywords.get(name);
-					if (displayValue) output.display = cloneProp(prop, displayValue);
+					if (displayValue) output.display = cloneProp(prop, displayValue, getSelectorName(name), null);
 				}
 				usedBosswind = true;
 				return;
@@ -677,7 +698,7 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 			if (positionKeywords.has(name)) {
 				if (value === null || value === true) {
 					const positionValue = positionKeywords.get(name);
-					if (positionValue) output.position = cloneProp(prop, positionValue);
+					if (positionValue) output.position = cloneProp(prop, positionValue, getSelectorName(name), null);
 				}
 				usedBosswind = true;
 				return;
@@ -685,7 +706,7 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 			if (booleanAliases.has(name)) {
 				if (value === null || value === true) {
 					const entry = booleanAliases.get(name);
-					if (entry) output[entry.prop] = cloneProp(prop, entry.value);
+					if (entry) output[entry.prop] = cloneProp(prop, entry.value, getSelectorName(name), null);
 				}
 				usedBosswind = true;
 				return;
@@ -695,13 +716,13 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 				usedText = true;
 				if (value === null || value === true) return;
 				const resolved = resolveTextTarget(api, value, config, tokens);
-				output[resolved.prop] = cloneProp(prop, resolved.value);
+				output[resolved.prop] = cloneProp(prop, resolved.value, getSelectorName(name));
 				return;
 			}
 			if (name === bgAlias) {
 				usedBosswind = true;
 				if (value === null || value === true) return;
-				output.backgroundColor = cloneProp(prop, typeof value === "string" && tokens?.color ? toTokenPath(value, tokens.color) : value);
+				output.backgroundColor = cloneProp(prop, typeof value === "string" && tokens?.color ? toTokenPath(value, tokens.color) : value, getSelectorName(name));
 				return;
 			}
 			if (name === borderAlias) {
@@ -709,36 +730,39 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 				if (parser === "jsx") {
 					const resolvedToken = resolveBorderToken(value, tokens);
 					if (resolvedToken) {
-						output[resolvedToken.prop] = cloneProp(prop, resolvedToken.value);
+						output[resolvedToken.prop] = cloneProp(prop, resolvedToken.value, getSelectorName(name));
 						return;
 					}
-					output[name] = prop;
+					if (value === null || value === true) output[name] = cloneProp(prop, value, getSelectorName(name), null);
+					else output[name] = cloneProp(prop, value, getSelectorName(name));
 					return;
 				}
 				const resolved = resolveBorderTarget(value, config, tokens);
 				if (!resolved) {
-					output[name] = prop;
+					output[name] = cloneProp(prop, value, getSelectorName(name));
 					return;
 				}
-				output[resolved.prop] = cloneProp(prop, resolved.value);
+				if (value === null || value === true) output[resolved.prop] = cloneProp(prop, resolved.value, getSelectorName(name), null);
+				else output[resolved.prop] = cloneProp(prop, resolved.value, getSelectorName(name));
 				return;
 			}
 			if (name === "shadow") {
 				usedBosswind = true;
-				if (value === null || value === true) output.boxShadow = cloneProp(prop, resolveShadowValue(value, config));
-				else output.boxShadow = prop;
+				if (value === null || value === true) output.boxShadow = cloneProp(prop, resolveShadowValue(value, config), getSelectorName(name), null);
+				else output.boxShadow = cloneProp(prop, value, getSelectorName(name));
 				return;
 			}
 			if (name === "rounded") {
 				usedBosswind = true;
-				if (value === null || value === true) output.borderRadius = cloneProp(prop, resolveRoundedValue(value, config));
-				else output.borderRadius = prop;
+				if (value === null || value === true) output.borderRadius = cloneProp(prop, resolveRoundedValue(value, config), getSelectorName(name), null);
+				else output.borderRadius = cloneProp(prop, value, getSelectorName(name));
 				return;
 			}
 			if (name === "grow" || name === "shrink") {
 				usedBosswind = true;
 				const target = name === "grow" ? "flexGrow" : "flexShrink";
-				output[target] = cloneProp(prop, resolveGrowShrinkValue(name, value));
+				if (value === null || value === true) output[target] = cloneProp(prop, resolveGrowShrinkValue(name, value), getSelectorName(name), null);
+				else output[target] = cloneProp(prop, resolveGrowShrinkValue(name, value), getSelectorName(name));
 				return;
 			}
 			if (aliasMap.has(name)) {
@@ -747,7 +771,7 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 				const targets = aliasMap.get(name) || [];
 				const resolvedValue = name === "shadow" ? resolveShadowValue(value, config) : value;
 				targets.forEach((target) => {
-					output[target] = cloneProp(prop, resolvedValue);
+					output[target] = cloneProp(prop, resolvedValue, getSelectorName(name));
 				});
 				return;
 			}
@@ -761,7 +785,7 @@ const rewriteBosswindTree = (api, tree, config, tokens, parser) => {
 		usedText
 	};
 };
-const applyAxisPairsToInput = (entries, input, output, used) => {
+const applyAxisPairsToInput = (entries, input, output, used, getSelectorName, setSelector) => {
 	const pairs = resolveAxisPairs(entries, input);
 	if (!pairs.length) return;
 	for (const pair of pairs) {
@@ -769,6 +793,10 @@ const applyAxisPairsToInput = (entries, input, output, used) => {
 		const xValue = input[pair.x];
 		const yValue = input[pair.y];
 		output[pair.prop] = combineAxisValues(xValue, yValue, pair.defaults);
+		const xIndex = entries.findIndex(([name]) => name === pair.x);
+		const yIndex = entries.findIndex(([name]) => name === pair.y);
+		const sourceName = xIndex === -1 ? pair.y : yIndex === -1 ? pair.x : xIndex <= yIndex ? pair.x : pair.y;
+		setSelector(pair.prop, getSelectorName(sourceName));
 		used.set(pair.x, true);
 		used.set(pair.y, true);
 		used.set(`__emit:${pair.emitIndex}:${pair.prop}`, true);
@@ -778,21 +806,31 @@ const rewriteBosswindInput = (api, input, config) => {
 	const rawEntries = Object.entries(input);
 	const entries = [];
 	const normalizedInput = {};
+	const rawNameByNormalized = /* @__PURE__ */ new Map();
 	rawEntries.forEach(([rawName, value]) => {
 		const name = normalizeBosswindName(rawName);
 		if (Object.prototype.hasOwnProperty.call(normalizedInput, name)) return;
 		normalizedInput[name] = value;
+		rawNameByNormalized.set(name, rawName);
 		entries.push([name, value]);
 	});
+	const selectorMap = /* @__PURE__ */ new Map();
+	const getSelectorName = (name) => rawNameByNormalized.get(name) ?? name;
+	const setSelector = (prop, name, valueOverride) => {
+		const entry = { name };
+		if (valueOverride !== void 0) entry.value = valueOverride;
+		selectorMap.set(prop, entry);
+	};
 	const output = {};
 	const used = /* @__PURE__ */ new Map();
-	applyAxisPairsToInput(entries, normalizedInput, output, used);
+	applyAxisPairsToInput(entries, normalizedInput, output, used, getSelectorName, setSelector);
 	const hasSkewX = Object.prototype.hasOwnProperty.call(normalizedInput, "skewX");
 	const hasSkewY = Object.prototype.hasOwnProperty.call(normalizedInput, "skewY");
 	if (!Object.prototype.hasOwnProperty.call(normalizedInput, "transform") && (hasSkewX || hasSkewY)) {
 		const transformValue = resolveSkewTransformValue(hasSkewX ? normalizedInput.skewX : null, hasSkewY ? normalizedInput.skewY : null, hasSkewX, hasSkewY);
 		if (transformValue) {
 			output.transform = transformValue;
+			setSelector("transform", getSelectorName(hasSkewX ? "skewX" : "skewY"));
 			used.set("skewX", true);
 			used.set("skewY", true);
 		}
@@ -805,28 +843,39 @@ const rewriteBosswindInput = (api, input, config) => {
 			return;
 		}
 		if (name === "flex" || name === "grid") {
-			if (value === null || value === true) output.display = name;
-			else output[name] = value;
+			if (value === null || value === true) {
+				output.display = name;
+				setSelector("display", getSelectorName(name), null);
+			} else output[name] = value;
 			return;
 		}
 		if (displayKeywords.has(name)) {
 			if (value === null || value === true) {
 				const displayValue = displayKeywords.get(name);
-				if (displayValue) output.display = displayValue;
+				if (displayValue) {
+					output.display = displayValue;
+					setSelector("display", getSelectorName(name), null);
+				}
 			}
 			return;
 		}
 		if (positionKeywords.has(name)) {
 			if (value === null || value === true) {
 				const positionValue = positionKeywords.get(name);
-				if (positionValue) output.position = positionValue;
+				if (positionValue) {
+					output.position = positionValue;
+					setSelector("position", getSelectorName(name), null);
+				}
 			}
 			return;
 		}
 		if (booleanAliases.has(name)) {
 			if (value === null || value === true) {
 				const entry = booleanAliases.get(name);
-				if (entry) output[entry.prop] = entry.value;
+				if (entry) {
+					output[entry.prop] = entry.value;
+					setSelector(entry.prop, getSelectorName(name), null);
+				}
 			}
 			return;
 		}
@@ -834,43 +883,56 @@ const rewriteBosswindInput = (api, input, config) => {
 			if (value === null || value === true) return;
 			const resolved = resolveTextTarget(api, value, config, void 0);
 			output[resolved.prop] = resolved.value;
+			setSelector(resolved.prop, getSelectorName(name));
 			return;
 		}
 		if (name === bgAlias) {
 			if (value === null || value === true) return;
 			output.backgroundColor = value;
+			setSelector("backgroundColor", getSelectorName(name));
 			return;
 		}
 		if (name === borderAlias) {
 			const resolvedToken = resolveBorderToken(value, api.tokens);
 			if (resolvedToken) {
 				output[resolvedToken.prop] = resolvedToken.value;
+				setSelector(resolvedToken.prop, getSelectorName(name));
 				return;
 			}
 			output[name] = value;
+			if (value === null || value === true) setSelector(name, getSelectorName(name), null);
+			else setSelector(name, getSelectorName(name));
 			return;
 		}
 		if (name === "shadow") {
 			output.boxShadow = resolveShadowValue(value, config);
+			if (value === null || value === true) setSelector("boxShadow", getSelectorName(name), null);
+			else setSelector("boxShadow", getSelectorName(name));
 			return;
 		}
 		if (name === "rounded") {
 			output.borderRadius = resolveRoundedValue(value, config);
+			if (value === null || value === true) setSelector("borderRadius", getSelectorName(name), null);
+			else setSelector("borderRadius", getSelectorName(name));
 			return;
 		}
 		if (name === "grow" || name === "shrink") {
 			output[name === "grow" ? "flexGrow" : "flexShrink"] = resolveGrowShrinkValue(name, value);
+			if (value === null || value === true) setSelector(name === "grow" ? "flexGrow" : "flexShrink", getSelectorName(name), null);
+			else setSelector(name === "grow" ? "flexGrow" : "flexShrink", getSelectorName(name));
 			return;
 		}
 		if (aliasMap.has(name)) {
 			if (value === null || value === true) return;
 			(aliasMap.get(name) || []).forEach((target) => {
 				output[target] = value;
+				setSelector(target, getSelectorName(name));
 			});
 			return;
 		}
 		output[name] = value;
 	});
+	setBosswindSelectorMap(output, selectorMap);
 	return output;
 };
 const getBosswindDefaults = (theme) => {

package/dist/prop/child/server.cjs

@@ -43,8 +43,9 @@ const onProp = async (api, { prop, contexts, preferVariables, file }) => {
 				childProp.rawName = resolved.raw;
 			}
 			const classToken = childProp.classToken;
-			const selectorValue = childProp.selectorValue ?? childProp.value;
-			const className = classToken ? null : api.contextToClassName(resolved.name, selectorValue, contexts, true, api.selectorPrefix);
+			const selectorName = childProp.selectorName ?? resolved.name;
+			const selectorValue = preferVariables ? null : childProp.selectorValue !== void 0 ? childProp.selectorValue : childProp.value;
+			const className = classToken ? null : api.contextToClassName(selectorName, selectorValue, contexts, true, api.selectorPrefix);
 			const baseSelector = classToken ? api.classTokenToSelector(classToken) : `.${className}`;
 			const baseWithPseudos = pseudoChain.length ? `${baseSelector}:${pseudoChain.join(":")}` : baseSelector;
 			const selector = api.applyChildSelectors(baseWithPseudos, contexts);

package/dist/prop/child/server.mjs

@@ -43,8 +43,9 @@ const onProp = async (api, { prop, contexts, preferVariables, file }) => {
 				childProp.rawName = resolved.raw;
 			}
 			const classToken = childProp.classToken;
-			const selectorValue = childProp.selectorValue ?? childProp.value;
-			const className = classToken ? null : api.contextToClassName(resolved.name, selectorValue, contexts, true, api.selectorPrefix);
+			const selectorName = childProp.selectorName ?? resolved.name;
+			const selectorValue = preferVariables ? null : childProp.selectorValue !== void 0 ? childProp.selectorValue : childProp.value;
+			const className = classToken ? null : api.contextToClassName(selectorName, selectorValue, contexts, true, api.selectorPrefix);
 			const baseSelector = classToken ? api.classTokenToSelector(classToken) : `.${className}`;
 			const baseWithPseudos = pseudoChain.length ? `${baseSelector}:${pseudoChain.join(":")}` : baseSelector;
 			const selector = api.applyChildSelectors(baseWithPseudos, contexts);

package/dist/prop/css/server.cjs

@@ -72,11 +72,12 @@ const onBoot = async (api) => {
 const onProp = async (api, { name, prop, contexts, preferVariables }) => {
 	const { value, selectorValue = value, classToken, important } = prop;
 	const propertyName = api.dictionary.get(name)?.property ?? api.camelCaseToDash(name);
+	const selectorName = prop.selectorName ?? name;
 	if (name === "container" && value && typeof value === "object" && !Array.isArray(value)) return;
 	if (!contexts.length) {
 		const selector = classToken ? api.classTokenToSelector(classToken) : null;
 		api.css.selector({
-			className: selector ? null : api.contextToClassName(name, selectorValue, contexts, true, api.selectorPrefix),
+			className: selector ? null : api.contextToClassName(selectorName, selectorValue, contexts, true, api.selectorPrefix),
 			selector
 		});
 	}

package/dist/prop/css/server.mjs

@@ -72,11 +72,12 @@ const onBoot = async (api) => {
 const onProp = async (api, { name, prop, contexts, preferVariables }) => {
 	const { value, selectorValue = value, classToken, important } = prop;
 	const propertyName = api.dictionary.get(name)?.property ?? api.camelCaseToDash(name);
+	const selectorName = prop.selectorName ?? name;
 	if (name === "container" && value && typeof value === "object" && !Array.isArray(value)) return;
 	if (!contexts.length) {
 		const selector = classToken ? api.classTokenToSelector(classToken) : null;
 		api.css.selector({
-			className: selector ? null : api.contextToClassName(name, selectorValue, contexts, true, api.selectorPrefix),
+			className: selector ? null : api.contextToClassName(selectorName, selectorValue, contexts, true, api.selectorPrefix),
 			selector
 		});
 	}

package/dist/prop/pseudo/server.cjs

@@ -60,8 +60,9 @@ const onProp = async (api, { name: _name, prop, contexts, preferVariables, file
 			prop$1.rawName = resolved.raw;
 		}
 		const classToken = prop$1.classToken;
-		const selectorValue = api.strategy === "classname-first" || api.strategy === "classname-only" ? prop$1.selectorValue ?? prop$1.value : prop$1.value;
-		const className = classToken ? null : api.contextToClassName(resolved.name, selectorValue, contexts, true, api.selectorPrefix);
+		const selectorName = prop$1.selectorName ?? resolved.name;
+		const selectorValue = preferVariables ? null : prop$1.selectorValue !== void 0 ? prop$1.selectorValue : prop$1.value;
+		const className = classToken ? null : api.contextToClassName(selectorName, selectorValue, contexts, true, api.selectorPrefix);
 		const baseSelector = classToken ? api.classTokenToSelector(classToken) : `.${className}`;
 		const baseWithPseudos = pseudoChain.length ? `${baseSelector}:${pseudoChain.join(":")}` : baseSelector;
 		const selector = api.applyChildSelectors(baseWithPseudos, contexts);

package/dist/prop/pseudo/server.mjs

@@ -60,8 +60,9 @@ const onProp = async (api, { name: _name, prop, contexts, preferVariables, file
 			prop$1.rawName = resolved.raw;
 		}
 		const classToken = prop$1.classToken;
-		const selectorValue = api.strategy === "classname-first" || api.strategy === "classname-only" ? prop$1.selectorValue ?? prop$1.value : prop$1.value;
-		const className = classToken ? null : api.contextToClassName(resolved.name, selectorValue, contexts, true, api.selectorPrefix);
+		const selectorName = prop$1.selectorName ?? resolved.name;
+		const selectorValue = preferVariables ? null : prop$1.selectorValue !== void 0 ? prop$1.selectorValue : prop$1.value;
+		const className = classToken ? null : api.contextToClassName(selectorName, selectorValue, contexts, true, api.selectorPrefix);
 		const baseSelector = classToken ? api.classTokenToSelector(classToken) : `.${className}`;
 		const baseWithPseudos = pseudoChain.length ? `${baseSelector}:${pseudoChain.join(":")}` : baseSelector;
 		const selector = api.applyChildSelectors(baseWithPseudos, contexts);

package/dist/strategy/classname-first/browser.cjs

@@ -1,6 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_framework = require('../../shared/framework.cjs');
 const require_cx_index = require('../../cx/index.cjs');
+const require_selectors = require('../../prop/bosswind/selectors.cjs');
 let _boss_css_is_css_prop = require("@boss-css/is-css-prop");
 _boss_css_is_css_prop = require_rolldown_runtime.__toESM(_boss_css_is_css_prop);
 
@@ -21,6 +22,7 @@ const resolveDynamicValue = (value) => {
 const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) => {
 	const classNameProp = require_framework.getClassNameProp(api.framework);
 	const outputRecord = output;
+	const selectorMap = require_selectors.getBosswindSelectorMap(input);
 	for (const prop in input) {
 		const value = input[prop];
 		if (prop === "child" && value && typeof value === "object" && !Array.isArray(value)) {
@@ -50,7 +52,11 @@ const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) =
 		const resolvedTokenValue = resolveTokenValue(value);
 		const isDynamicFn = typeof resolvedTokenValue === "function";
 		const selectorValue = isDynamicFn ? null : resolvedTokenValue;
-		const className = api.contextToClassName(prop, selectorValue, contexts, false, api.selectorPrefix);
+		const selectorEntry = selectorMap?.get(prop);
+		const selectorProp = selectorEntry?.name ?? prop;
+		const selectorOverride = selectorEntry && Object.prototype.hasOwnProperty.call(selectorEntry, "value") ? selectorEntry.value : void 0;
+		const finalSelectorValue = selectorOverride !== void 0 ? selectorOverride : selectorValue;
+		const className = api.contextToClassName(selectorProp, finalSelectorValue, contexts, false, api.selectorPrefix);
 		outputRecord[classNameProp] = require_cx_index.cx(outputRecord[classNameProp], className);
 		if (!isDynamicFn) continue;
 		const cssVarName = api.contextToCSSVariable(prop, null, contexts, api.selectorPrefix);

package/dist/strategy/classname-first/browser.mjs

@@ -1,5 +1,6 @@
 import { getClassNameProp } from "../../shared/framework.mjs";
 import { cx } from "../../cx/index.mjs";
+import { getBosswindSelectorMap } from "../../prop/bosswind/selectors.mjs";
 import isCSSProp from "@boss-css/is-css-prop";
 
 //#region src/strategy/classname-first/browser.ts
@@ -19,6 +20,7 @@ const resolveDynamicValue = (value) => {
 const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) => {
 	const classNameProp = getClassNameProp(api.framework);
 	const outputRecord = output;
+	const selectorMap = getBosswindSelectorMap(input);
 	for (const prop in input) {
 		const value = input[prop];
 		if (prop === "child" && value && typeof value === "object" && !Array.isArray(value)) {
@@ -48,7 +50,11 @@ const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) =
 		const resolvedTokenValue = resolveTokenValue(value);
 		const isDynamicFn = typeof resolvedTokenValue === "function";
 		const selectorValue = isDynamicFn ? null : resolvedTokenValue;
-		const className = api.contextToClassName(prop, selectorValue, contexts, false, api.selectorPrefix);
+		const selectorEntry = selectorMap?.get(prop);
+		const selectorProp = selectorEntry?.name ?? prop;
+		const selectorOverride = selectorEntry && Object.prototype.hasOwnProperty.call(selectorEntry, "value") ? selectorEntry.value : void 0;
+		const finalSelectorValue = selectorOverride !== void 0 ? selectorOverride : selectorValue;
+		const className = api.contextToClassName(selectorProp, finalSelectorValue, contexts, false, api.selectorPrefix);
 		outputRecord[classNameProp] = cx(outputRecord[classNameProp], className);
 		if (!isDynamicFn) continue;
 		const cssVarName = api.contextToCSSVariable(prop, null, contexts, api.selectorPrefix);

package/dist/strategy/classname-first/runtime-only.cjs

@@ -6,6 +6,7 @@ const require_shared = require('../../prop/at/shared.cjs');
 const require_prop_at_runtime_only = require('../../prop/at/runtime-only.cjs');
 const require_prop_child_runtime_only = require('../../prop/child/runtime-only.cjs');
 const require_prop_css_runtime_only = require('../../prop/css/runtime-only.cjs');
+const require_selectors = require('../../prop/bosswind/selectors.cjs');
 let _emotion_hash = require("@emotion/hash");
 _emotion_hash = require_rolldown_runtime.__toESM(_emotion_hash);
 let _boss_css_is_css_prop = require("@boss-css/is-css-prop");
@@ -34,6 +35,7 @@ const handleKeyframes = (api, { output, tag, contexts, prop, value }) => {
 		const normalizedStep = require_shared.normalizeKeyframeStep(step);
 		if (!normalizedStep) continue;
 		const stepContexts = [...keyframesContexts, step];
+		const selectorMap = require_selectors.getBosswindSelectorMap(stepValue);
 		for (const [propName, rawValue] of Object.entries(stepValue)) {
 			if (!(0, _boss_css_is_css_prop.default)(tag, propName)) continue;
 			let resolved = resolveRuntimeValue(rawValue);
@@ -43,8 +45,12 @@ const handleKeyframes = (api, { output, tag, contexts, prop, value }) => {
 				resolved = token.value;
 				selectorValue = token.selectorValue;
 			}
-			const className = api.contextToClassName(propName, selectorValue, stepContexts, false, api.selectorPrefix);
-			const cssClassName = api.contextToClassName(propName, selectorValue, stepContexts, true, api.selectorPrefix);
+			const selectorEntry = selectorMap?.get(propName);
+			const selectorProp = selectorEntry?.name ?? propName;
+			const selectorOverride = selectorEntry && Object.prototype.hasOwnProperty.call(selectorEntry, "value") ? selectorEntry.value : void 0;
+			const finalSelectorValue = selectorOverride !== void 0 ? selectorOverride : selectorValue;
+			const className = api.contextToClassName(selectorProp, finalSelectorValue, stepContexts, false, api.selectorPrefix);
+			const cssClassName = api.contextToClassName(selectorProp, finalSelectorValue, stepContexts, true, api.selectorPrefix);
 			output[classNameProp] = require_cx_index.cx(output[classNameProp], className);
 			const selector = require_prop_css_runtime_only.buildRuntimeSelector(cssClassName, stepContexts);
 			selectors.add(selector);
@@ -85,6 +91,7 @@ const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) =
 	const classNameProp = require_framework.getClassNameProp(api.framework);
 	const outputRecord = output;
 	const inputRecord = input;
+	const selectorMap = require_selectors.getBosswindSelectorMap(inputRecord);
 	for (const prop in inputRecord) {
 		const rawValue = inputRecord[prop];
 		if (prop === "child" && rawValue && typeof rawValue === "object" && !Array.isArray(rawValue)) {
@@ -125,8 +132,12 @@ const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) =
 			value = token.value;
 			selectorValue = token.selectorValue;
 		}
-		const className = api.contextToClassName(prop, selectorValue, contexts, false, api.selectorPrefix);
-		const cssClassName = api.contextToClassName(prop, selectorValue, contexts, true, api.selectorPrefix);
+		const selectorEntry = selectorMap?.get(prop);
+		const selectorProp = selectorEntry?.name ?? prop;
+		const selectorOverride = selectorEntry && Object.prototype.hasOwnProperty.call(selectorEntry, "value") ? selectorEntry.value : void 0;
+		const finalSelectorValue = selectorOverride !== void 0 ? selectorOverride : selectorValue;
+		const className = api.contextToClassName(selectorProp, finalSelectorValue, contexts, false, api.selectorPrefix);
+		const cssClassName = api.contextToClassName(selectorProp, finalSelectorValue, contexts, true, api.selectorPrefix);
 		outputRecord[classNameProp] = require_cx_index.cx(outputRecord[classNameProp], className);
 		insertRuntimeRule(api, cssClassName, contexts, prop, value);
 	}

package/dist/strategy/classname-first/runtime-only.mjs

@@ -5,6 +5,7 @@ import { buildKeyframesRule, normalizeKeyframeStep, parseKeyframesContext } from
 import { resolveAtQuery } from "../../prop/at/runtime-only.mjs";
 import { createChildContext } from "../../prop/child/runtime-only.mjs";
 import { buildRuntimeSelector, resolvePropertyName } from "../../prop/css/runtime-only.mjs";
+import { getBosswindSelectorMap } from "../../prop/bosswind/selectors.mjs";
 import hash from "@emotion/hash";
 import isCSSProp from "@boss-css/is-css-prop";
 
@@ -31,6 +32,7 @@ const handleKeyframes = (api, { output, tag, contexts, prop, value }) => {
 		const normalizedStep = normalizeKeyframeStep(step);
 		if (!normalizedStep) continue;
 		const stepContexts = [...keyframesContexts, step];
+		const selectorMap = getBosswindSelectorMap(stepValue);
 		for (const [propName, rawValue] of Object.entries(stepValue)) {
 			if (!isCSSProp(tag, propName)) continue;
 			let resolved = resolveRuntimeValue(rawValue);
@@ -40,8 +42,12 @@ const handleKeyframes = (api, { output, tag, contexts, prop, value }) => {
 				resolved = token.value;
 				selectorValue = token.selectorValue;
 			}
-			const className = api.contextToClassName(propName, selectorValue, stepContexts, false, api.selectorPrefix);
-			const cssClassName = api.contextToClassName(propName, selectorValue, stepContexts, true, api.selectorPrefix);
+			const selectorEntry = selectorMap?.get(propName);
+			const selectorProp = selectorEntry?.name ?? propName;
+			const selectorOverride = selectorEntry && Object.prototype.hasOwnProperty.call(selectorEntry, "value") ? selectorEntry.value : void 0;
+			const finalSelectorValue = selectorOverride !== void 0 ? selectorOverride : selectorValue;
+			const className = api.contextToClassName(selectorProp, finalSelectorValue, stepContexts, false, api.selectorPrefix);
+			const cssClassName = api.contextToClassName(selectorProp, finalSelectorValue, stepContexts, true, api.selectorPrefix);
 			output[classNameProp] = cx(output[classNameProp], className);
 			const selector = buildRuntimeSelector(cssClassName, stepContexts);
 			selectors.add(selector);
@@ -82,6 +88,7 @@ const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) =
 	const classNameProp = getClassNameProp(api.framework);
 	const outputRecord = output;
 	const inputRecord = input;
+	const selectorMap = getBosswindSelectorMap(inputRecord);
 	for (const prop in inputRecord) {
 		const rawValue = inputRecord[prop];
 		if (prop === "child" && rawValue && typeof rawValue === "object" && !Array.isArray(rawValue)) {
@@ -122,8 +129,12 @@ const onBrowserObjectStart = (api, { input, output = {}, tag, contexts = [] }) =
 			value = token.value;
 			selectorValue = token.selectorValue;
 		}
-		const className = api.contextToClassName(prop, selectorValue, contexts, false, api.selectorPrefix);
-		const cssClassName = api.contextToClassName(prop, selectorValue, contexts, true, api.selectorPrefix);
+		const selectorEntry = selectorMap?.get(prop);
+		const selectorProp = selectorEntry?.name ?? prop;
+		const selectorOverride = selectorEntry && Object.prototype.hasOwnProperty.call(selectorEntry, "value") ? selectorEntry.value : void 0;
+		const finalSelectorValue = selectorOverride !== void 0 ? selectorOverride : selectorValue;
+		const className = api.contextToClassName(selectorProp, finalSelectorValue, contexts, false, api.selectorPrefix);
+		const cssClassName = api.contextToClassName(selectorProp, finalSelectorValue, contexts, true, api.selectorPrefix);
 		outputRecord[classNameProp] = cx(outputRecord[classNameProp], className);
 		insertRuntimeRule(api, cssClassName, contexts, prop, value);
 	}

package/dist/strategy/classname-first/server.cjs

@@ -97,7 +97,7 @@ const onPropTree = async (api, { tree, parser, file, code }) => {
 			next[name] = {
 				...prop,
 				value: normalizedValue,
-				selectorValue: prop.selectorValue ?? normalizedValue
+				selectorValue: prop.selectorValue !== void 0 ? prop.selectorValue : normalizedValue
 			};
 		}
 		return next;

package/dist/strategy/classname-first/server.mjs

@@ -97,7 +97,7 @@ const onPropTree = async (api, { tree, parser, file, code }) => {
 			next[name] = {
 				...prop,
 				value: normalizedValue,
-				selectorValue: prop.selectorValue ?? normalizedValue
+				selectorValue: prop.selectorValue !== void 0 ? prop.selectorValue : normalizedValue
 			};
 		}
 		return next;

package/dist/transform/cache.cjs

@@ -1,6 +1,3 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-let node_fs = require("node:fs");
-node_fs = require_rolldown_runtime.__toESM(node_fs);
 
 //#region src/transform/cache.ts
 const cache = /* @__PURE__ */ new Map();

package/dist/transform/cache.mjs

@@ -1,5 +1,3 @@
-import fs from "node:fs";
-
 //#region src/transform/cache.ts
 const cache = /* @__PURE__ */ new Map();
 const setCache = (path, data) => {