@symbo.ls/scratch 2.34.33 → 2.34.35

package/dist/cjs/index.js

@@ -6127,6 +6127,23 @@ var isBorderStyle = (str) => [
   "outset",
   "initial"
 ].some((v) => str.includes(v));
+var splitTopLevelCommas = (value) => {
+  const result = [];
+  let current = "";
+  let depth = 0;
+  for (const char of value) {
+    if (char === "(") depth += 1;
+    else if (char === ")" && depth > 0) depth -= 1;
+    if (char === "," && depth === 0) {
+      result.push(current);
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  if (current.length || !result.length) result.push(current);
+  return result;
+};
 var transformBorder = (border) => {
   const arr = (border + "").split(", ");
   return arr.map((v) => {
@@ -6149,7 +6166,7 @@ var transformTextStroke = (stroke) => {
 };
 var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
 var transformBoxShadow = (shadows, globalTheme) => shadows.split("|").map((shadow) => {
-  return shadow.split(",").map((v) => {
+  return splitTopLevelCommas(shadow).map((v) => {
     v = v.trim();
     if (v.slice(0, 2) === "--") return `var(${v})`;
     if (getColor(v).length > 2) {

package/dist/cjs/transforms/index.js

@@ -4982,6 +4982,23 @@ var isBorderStyle = (str) => [
   "outset",
   "initial"
 ].some((v) => str.includes(v));
+var splitTopLevelCommas = (value) => {
+  const result = [];
+  let current = "";
+  let depth = 0;
+  for (const char of value) {
+    if (char === "(") depth += 1;
+    else if (char === ")" && depth > 0) depth -= 1;
+    if (char === "," && depth === 0) {
+      result.push(current);
+      current = "";
+      continue;
+    }
+    current += char;
+  }
+  if (current.length || !result.length) result.push(current);
+  return result;
+};
 var transformBorder = (border) => {
   const arr = (border + "").split(", ");
   return arr.map((v) => {
@@ -5004,7 +5021,7 @@ var transformTextStroke = (stroke) => {
 };
 var transformShadow = (sh, globalTheme) => getShadow(sh, globalTheme);
 var transformBoxShadow = (shadows, globalTheme) => shadows.split("|").map((shadow) => {
-  return shadow.split(",").map((v) => {
+  return splitTopLevelCommas(shadow).map((v) => {
     v = v.trim();
     if (v.slice(0, 2) === "--") return `var(${v})`;
     if (getColor(v).length > 2) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.34.33",
+  "version": "2.34.35",
   "files": [
     "src",
     "dist"
@@ -25,9 +25,9 @@
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^2.34.33",
-    "@symbo.ls/utils": "^2.34.33",
+    "@domql/utils": "^2.34.35",
+    "@symbo.ls/utils": "^2.34.35",
     "color-contrast-checker": "^1.5.0"
   },
-  "gitHead": "a7ecaaa2792aea530bf0b4cef625904c63a0272a"
+  "gitHead": "0be12bcdd99c265fdeded6d756a1a3616a943ffc"
 }

package/src/transforms/index.js

@@ -30,6 +30,28 @@ const isBorderStyle = (str) =>
     'initial'
   ].some((v) => str.includes(v))
 
+const splitTopLevelCommas = (value) => {
+  const result = []
+  let current = ''
+  let depth = 0
+
+  for (const char of value) {
+    if (char === '(') depth += 1
+    else if (char === ')' && depth > 0) depth -= 1
+
+    if (char === ',' && depth === 0) {
+      result.push(current)
+      current = ''
+      continue
+    }
+
+    current += char
+  }
+
+  if (current.length || !result.length) result.push(current)
+  return result
+}
+
 export const transformBorder = (border) => {
   const arr = (border + '').split(', ')
   return arr
@@ -63,8 +85,7 @@ export const transformBoxShadow = (shadows, globalTheme) =>
   shadows
     .split('|')
     .map((shadow) => {
-      return shadow
-        .split(',')
+      return splitTopLevelCommas(shadow)
         .map((v) => {
           v = v.trim()
           if (v.slice(0, 2) === '--') return `var(${v})`