@bamboocss/generator 1.45.3 → 1.45.5

package/dist/index.cjs

@@ -2637,6 +2637,40 @@ const OS_DARK_QUERY = "@media (prefers-color-scheme: dark)";
 /** Compare a condition against a known query without tripping over spacing. */
 const normalize = (condition) => typeof condition === "string" ? condition.replace(/\s+/g, " ").trim() : void 0;
 /**
+* Does this value carry a comma at the top level?
+*
+* `light-dark()` takes exactly two arguments, and CSS offers no way to group a
+* comma-separated value into one of them — there is no parenthesized form of a shadow list.
+* So a token whose light or dark arm is itself a list cannot be folded: the arms splat into
+* three or more arguments, the function is invalid, and the browser drops the whole
+* declaration. That failure is silent and total — a `--shadows-sm` carrying two shadows
+* emitted `light-dark(a, b, c)` and every element referencing it rendered with no shadow at
+* all, while the class naming it looked perfectly correct.
+*
+* Multi-part `box-shadow` is the shape that bites, since a realistic elevation token is
+* almost always two shadows; `transition` and `background` lists are the same story.
+*
+* Depth-aware, so `rgb(16, 19, 26)` still folds — its commas are the function's own.
+* Quote-aware, so a font stack's `"Foo, Bar"` is not mistaken for a separator.
+*/
+const hasTopLevelComma = (value) => {
+	let depth = 0;
+	let quote;
+	for (let index = 0; index < value.length; index++) {
+		const char = value[index];
+		if (quote) {
+			if (char === "\\") index++;
+			else if (char === quote) quote = void 0;
+			continue;
+		}
+		if (char === "\"" || char === "'") quote = char;
+		else if (char === "(") depth++;
+		else if (char === ")") depth--;
+		else if (char === "," && depth === 0) return true;
+	}
+	return false;
+};
+/**
 * Collapse a token's `base`/`_osDark` pair into a single `light-dark()` declaration.
 *
 * Two declarations and a whole `@media (prefers-color-scheme: dark)` block become one line,
@@ -2673,6 +2707,7 @@ function foldLightDark(vars, conditions) {
 	for (const [name, darkValue] of osDark) {
 		const lightValue = base.get(name);
 		if (lightValue === void 0 || osLight?.has(name)) continue;
+		if (hasTopLevelComma(lightValue) || hasTopLevelComma(darkValue)) continue;
 		nextBase.set(name, `light-dark(${lightValue}, ${darkValue})`);
 		nextDark.delete(name);
 	}

package/dist/index.mjs

@@ -2611,6 +2611,40 @@ const OS_DARK_QUERY = "@media (prefers-color-scheme: dark)";
 /** Compare a condition against a known query without tripping over spacing. */
 const normalize = (condition) => typeof condition === "string" ? condition.replace(/\s+/g, " ").trim() : void 0;
 /**
+* Does this value carry a comma at the top level?
+*
+* `light-dark()` takes exactly two arguments, and CSS offers no way to group a
+* comma-separated value into one of them — there is no parenthesized form of a shadow list.
+* So a token whose light or dark arm is itself a list cannot be folded: the arms splat into
+* three or more arguments, the function is invalid, and the browser drops the whole
+* declaration. That failure is silent and total — a `--shadows-sm` carrying two shadows
+* emitted `light-dark(a, b, c)` and every element referencing it rendered with no shadow at
+* all, while the class naming it looked perfectly correct.
+*
+* Multi-part `box-shadow` is the shape that bites, since a realistic elevation token is
+* almost always two shadows; `transition` and `background` lists are the same story.
+*
+* Depth-aware, so `rgb(16, 19, 26)` still folds — its commas are the function's own.
+* Quote-aware, so a font stack's `"Foo, Bar"` is not mistaken for a separator.
+*/
+const hasTopLevelComma = (value) => {
+	let depth = 0;
+	let quote;
+	for (let index = 0; index < value.length; index++) {
+		const char = value[index];
+		if (quote) {
+			if (char === "\\") index++;
+			else if (char === quote) quote = void 0;
+			continue;
+		}
+		if (char === "\"" || char === "'") quote = char;
+		else if (char === "(") depth++;
+		else if (char === ")") depth--;
+		else if (char === "," && depth === 0) return true;
+	}
+	return false;
+};
+/**
 * Collapse a token's `base`/`_osDark` pair into a single `light-dark()` declaration.
 *
 * Two declarations and a whole `@media (prefers-color-scheme: dark)` block become one line,
@@ -2647,6 +2681,7 @@ function foldLightDark(vars, conditions) {
 	for (const [name, darkValue] of osDark) {
 		const lightValue = base.get(name);
 		if (lightValue === void 0 || osLight?.has(name)) continue;
+		if (hasTopLevelComma(lightValue) || hasTopLevelComma(darkValue)) continue;
 		nextBase.set(name, `light-dark(${lightValue}, ${darkValue})`);
 		nextDark.delete(name);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/generator",
-  "version": "1.45.3",
+  "version": "1.45.5",
   "description": "The css generator for css bamboo",
   "homepage": "https://bamboocss.com",
   "license": "MIT",
@@ -38,12 +38,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.5.26",
     "ts-pattern": "5.9.0",
-    "@bamboocss/core": "1.45.3",
-    "@bamboocss/is-valid-prop": "^1.45.3",
-    "@bamboocss/logger": "1.45.3",
-    "@bamboocss/shared": "1.45.3",
-    "@bamboocss/token-dictionary": "1.45.3",
-    "@bamboocss/types": "1.45.3"
+    "@bamboocss/core": "1.45.5",
+    "@bamboocss/is-valid-prop": "^1.45.5",
+    "@bamboocss/logger": "1.45.5",
+    "@bamboocss/shared": "1.45.5",
+    "@bamboocss/token-dictionary": "1.45.5",
+    "@bamboocss/types": "1.45.5"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"