boss-css 0.0.16 → 0.0.18

package/dist/parser/jsx/browser.cjs

@@ -41,13 +41,18 @@ const onBrowserObjectStart = (api, { input, tag = "div", contexts = [], output =
 			delete input[prop];
 			continue;
 		}
-		if (ignoredProps.has(prop) || require_isDOMProp.default(tag, prop)) {
-			output[prop] = input[prop];
+		const value = input[prop];
+		const isNestedContextObject = value !== null && typeof value === "object" && !Array.isArray(value);
+		const resolved = api.dictionary.resolve(prop);
+		const hasDescriptor = Boolean(resolved.descriptor);
+		const isCssProp = (0, _boss_css_is_css_prop.default)(tag, prop);
+		if (ignoredProps.has(prop) || require_isDOMProp.default(tag, prop) || !isCssProp && !hasDescriptor && !isNestedContextObject) {
+			output[prop] = value;
 			delete input[prop];
 			continue;
 		}
 		if (typeof input[prop] === "function") {
-			if (isClassnameFirst && (0, _boss_css_is_css_prop.default)(tag, prop)) continue;
+			if (isClassnameFirst) continue;
 			input[prop] = input[prop]();
 		}
 	}

package/dist/parser/jsx/browser.mjs

@@ -39,13 +39,18 @@ const onBrowserObjectStart = (api, { input, tag = "div", contexts = [], output =
 			delete input[prop];
 			continue;
 		}
-		if (ignoredProps.has(prop) || isDOMProp(tag, prop)) {
-			output[prop] = input[prop];
+		const value = input[prop];
+		const isNestedContextObject = value !== null && typeof value === "object" && !Array.isArray(value);
+		const resolved = api.dictionary.resolve(prop);
+		const hasDescriptor = Boolean(resolved.descriptor);
+		const isCssProp = isCSSProp(tag, prop);
+		if (ignoredProps.has(prop) || isDOMProp(tag, prop) || !isCssProp && !hasDescriptor && !isNestedContextObject) {
+			output[prop] = value;
 			delete input[prop];
 			continue;
 		}
 		if (typeof input[prop] === "function") {
-			if (isClassnameFirst && isCSSProp(tag, prop)) continue;
+			if (isClassnameFirst) continue;
 			input[prop] = input[prop]();
 		}
 	}

package/dist/runtime/index.cjs

@@ -43,8 +43,7 @@ function resolveStyleTag(input) {
 function factory(tag) {
 	return function $$(props, ref, ...restArgs) {
 		const currentApi = getApi();
-		if (tag || ref !== void 0) {
-			let tagName = tag;
+		if (tag !== void 0 || ref !== void 0) {
 			const input = props ?? {};
 			const { children, as, ...rest } = input;
 			const runtimeApi = currentApi.runtimeApi;
@@ -56,12 +55,15 @@ function factory(tag) {
 				if (applyRef) applyRef(rest, ref);
 				else rest.ref = ref;
 			}
-			const asTag = typeof as === "string" ? as : void 0;
-			const displayName = asTag || tagName;
-			tagName = asTag || tagName || "div";
-			const Component = createComponent(tagName);
-			Component.displayName = displayName ? "$$." + displayName : "$$";
-			const output = resolveBossOutput(rest, tagName);
+			const asBossTag = as && typeof as === "function" && typeof as.__bossTag === "string" ? as.__bossTag : void 0;
+			const styleTag = (typeof as === "string" ? as : asBossTag) ?? (typeof tag === "string" ? tag : void 0) ?? "div";
+			const renderTarget = as ?? tag ?? "div";
+			const Component = typeof renderTarget === "string" ? createComponent(renderTarget) : renderTarget;
+			if (typeof Component === "function" && typeof Component.__bossTag === "string") {
+				const displayName = typeof as === "string" ? as : typeof tag === "string" ? tag : styleTag;
+				Component.displayName = displayName ? "$$." + displayName : "$$";
+			}
+			const output = resolveBossOutput(rest, styleTag);
 			if (dev !== void 0) return currentApi.runtimeApi?.createElement(Component, output, resolvedChildren, dev);
 			if (resolvedChildren === void 0) return currentApi.runtimeApi?.createElement(Component, output);
 			return currentApi.runtimeApi?.createElement(Component, output, resolvedChildren);

package/dist/runtime/index.mjs

@@ -43,8 +43,7 @@ function resolveStyleTag(input) {
 function factory(tag) {
 	return function $$(props, ref, ...restArgs) {
 		const currentApi = getApi();
-		if (tag || ref !== void 0) {
-			let tagName = tag;
+		if (tag !== void 0 || ref !== void 0) {
 			const input = props ?? {};
 			const { children, as, ...rest } = input;
 			const runtimeApi = currentApi.runtimeApi;
@@ -56,12 +55,15 @@ function factory(tag) {
 				if (applyRef) applyRef(rest, ref);
 				else rest.ref = ref;
 			}
-			const asTag = typeof as === "string" ? as : void 0;
-			const displayName = asTag || tagName;
-			tagName = asTag || tagName || "div";
-			const Component = createComponent(tagName);
-			Component.displayName = displayName ? "$$." + displayName : "$$";
-			const output = resolveBossOutput(rest, tagName);
+			const asBossTag = as && typeof as === "function" && typeof as.__bossTag === "string" ? as.__bossTag : void 0;
+			const styleTag = (typeof as === "string" ? as : asBossTag) ?? (typeof tag === "string" ? tag : void 0) ?? "div";
+			const renderTarget = as ?? tag ?? "div";
+			const Component = typeof renderTarget === "string" ? createComponent(renderTarget) : renderTarget;
+			if (typeof Component === "function" && typeof Component.__bossTag === "string") {
+				const displayName = typeof as === "string" ? as : typeof tag === "string" ? tag : styleTag;
+				Component.displayName = displayName ? "$$." + displayName : "$$";
+			}
+			const output = resolveBossOutput(rest, styleTag);
 			if (dev !== void 0) return currentApi.runtimeApi?.createElement(Component, output, resolvedChildren, dev);
 			if (resolvedChildren === void 0) return currentApi.runtimeApi?.createElement(Component, output);
 			return currentApi.runtimeApi?.createElement(Component, output, resolvedChildren);

package/dist/use/token/browser.cjs

@@ -64,7 +64,8 @@ const onBrowserObjectStart = (api, { input }) => {
 			else mutableInput[prop] = toTokenVar(path);
 		} else if (typeof prop === "string") {
 			const rawValue = mutableInput[prop];
-			if (typeof rawValue !== "string") continue;
+			if (typeof rawValue !== "string" && typeof rawValue !== "number") continue;
+			const rawTokenKey = String(rawValue);
 			const dashProp = api.camelCaseToDash?.(prop) ?? prop;
 			const groupCandidates = [];
 			const seen = /* @__PURE__ */ new Set();
@@ -77,8 +78,8 @@ const onBrowserObjectStart = (api, { input }) => {
 			for (const group of require_propMap.getTokenGroupsForProp(dashProp)) addCandidate(group);
 			addCandidate(prop);
 			addCandidate(dashProp);
-			const groupName = groupCandidates.find((group) => tokenPaths.has(`${group}.${rawValue}`));
-			if (groupName && !isClassnameFirst) mutableInput[prop] = toTokenVar(`${groupName}.${rawValue.replace("$$.token.", "")}`);
+			const groupName = groupCandidates.find((group) => tokenPaths.has(`${group}.${rawTokenKey}`));
+			if (groupName && !isClassnameFirst) mutableInput[prop] = toTokenVar(`${groupName}.${rawTokenKey.replace("$$.token.", "")}`);
 		}
 	}
 };

package/dist/use/token/browser.mjs

@@ -64,7 +64,8 @@ const onBrowserObjectStart = (api, { input }) => {
 			else mutableInput[prop] = toTokenVar(path);
 		} else if (typeof prop === "string") {
 			const rawValue = mutableInput[prop];
-			if (typeof rawValue !== "string") continue;
+			if (typeof rawValue !== "string" && typeof rawValue !== "number") continue;
+			const rawTokenKey = String(rawValue);
 			const dashProp = api.camelCaseToDash?.(prop) ?? prop;
 			const groupCandidates = [];
 			const seen = /* @__PURE__ */ new Set();
@@ -77,8 +78,8 @@ const onBrowserObjectStart = (api, { input }) => {
 			for (const group of getTokenGroupsForProp(dashProp)) addCandidate(group);
 			addCandidate(prop);
 			addCandidate(dashProp);
-			const groupName = groupCandidates.find((group) => tokenPaths.has(`${group}.${rawValue}`));
-			if (groupName && !isClassnameFirst) mutableInput[prop] = toTokenVar(`${groupName}.${rawValue.replace("$$.token.", "")}`);
+			const groupName = groupCandidates.find((group) => tokenPaths.has(`${group}.${rawTokenKey}`));
+			if (groupName && !isClassnameFirst) mutableInput[prop] = toTokenVar(`${groupName}.${rawTokenKey.replace("$$.token.", "")}`);
 		}
 	}
 };

package/dist/use/token/runtime-only.cjs

@@ -98,7 +98,8 @@ const getTokenPath = (api, prop, value) => {
 		path: value.replace("$$.token.", ""),
 		source: "group"
 	};
-	if (typeof value !== "string") return null;
+	if (typeof value !== "string" && typeof value !== "number") return null;
+	const rawTokenKey = String(value);
 	const { groups } = getTokenState(api);
 	const dashProp = api?.camelCaseToDash ? api.camelCaseToDash(prop) : prop;
 	const groupCandidates = [];
@@ -113,10 +114,9 @@ const getTokenPath = (api, prop, value) => {
 	addCandidate(prop);
 	addCandidate(dashProp);
 	if (!groupCandidates.length) return null;
-	if (typeof value !== "string") return null;
-	const tokenAlphaCandidate = parseTokenAlphaValue(value);
+	const tokenAlphaCandidate = typeof value === "string" ? parseTokenAlphaValue(value) : null;
 	const baseParts = tokenAlphaCandidate ? tokenAlphaCandidate.base.split(".") : [];
-	const rawParts = value.split(".");
+	const rawParts = rawTokenKey.split(".");
 	const colorTokens = groups?.color;
 	for (const group of groupCandidates) {
 		const values = groups?.[group];
@@ -133,12 +133,12 @@ const getTokenPath = (api, prop, value) => {
 			};
 		}
 		if (resolveTokenParts(values, rawParts) !== void 0) return {
-			path: `${group}.${value}`,
+			path: `${group}.${rawTokenKey}`,
 			source: "prop",
 			values
 		};
-		if (value in values) return {
-			path: `${group}.${value}`,
+		if (rawTokenKey in values) return {
+			path: `${group}.${rawTokenKey}`,
 			source: "prop",
 			values
 		};

package/dist/use/token/runtime-only.mjs

@@ -98,7 +98,8 @@ const getTokenPath = (api, prop, value) => {
 		path: value.replace("$$.token.", ""),
 		source: "group"
 	};
-	if (typeof value !== "string") return null;
+	if (typeof value !== "string" && typeof value !== "number") return null;
+	const rawTokenKey = String(value);
 	const { groups } = getTokenState(api);
 	const dashProp = api?.camelCaseToDash ? api.camelCaseToDash(prop) : prop;
 	const groupCandidates = [];
@@ -113,10 +114,9 @@ const getTokenPath = (api, prop, value) => {
 	addCandidate(prop);
 	addCandidate(dashProp);
 	if (!groupCandidates.length) return null;
-	if (typeof value !== "string") return null;
-	const tokenAlphaCandidate = parseTokenAlphaValue(value);
+	const tokenAlphaCandidate = typeof value === "string" ? parseTokenAlphaValue(value) : null;
 	const baseParts = tokenAlphaCandidate ? tokenAlphaCandidate.base.split(".") : [];
-	const rawParts = value.split(".");
+	const rawParts = rawTokenKey.split(".");
 	const colorTokens = groups?.color;
 	for (const group of groupCandidates) {
 		const values = groups?.[group];
@@ -133,12 +133,12 @@ const getTokenPath = (api, prop, value) => {
 			};
 		}
 		if (resolveTokenParts(values, rawParts) !== void 0) return {
-			path: `${group}.${value}`,
+			path: `${group}.${rawTokenKey}`,
 			source: "prop",
 			values
 		};
-		if (value in values) return {
-			path: `${group}.${value}`,
+		if (rawTokenKey in values) return {
+			path: `${group}.${rawTokenKey}`,
 			source: "prop",
 			values
 		};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "boss-css",
-    "version": "0.0.16",
+    "version": "0.0.18",
     "description": "Polymorphic, usage-driven CSS-in-JS.",
     "bin": {
         "boss": "./dist/cli/index.cjs",