@kbach/react 0.6.15 → 0.6.17

package/dist/vite-plugin.js

@@ -671,25 +671,6 @@ function resolveColor(value, colors, isArbitrary) {
       }
     }
   }
-  if (hex && !hex.startsWith("#") && !hex.startsWith("rgb") && hex !== "transparent" && hex !== "currentColor") {
-    if (hex in colors) {
-      const alias = colors[hex];
-      if (typeof alias === "string") hex = alias;
-      else if (typeof alias === "object" && "6" in alias) hex = alias["6"] ?? hex;
-    } else {
-      const aliasLastDash = hex.lastIndexOf("-");
-      if (aliasLastDash > 0) {
-        const aliasColorName = hex.slice(0, aliasLastDash);
-        const aliasShade = hex.slice(aliasLastDash + 1);
-        const aliasScale = colors[aliasColorName];
-        if (aliasScale && typeof aliasScale === "object") {
-          hex = aliasScale[aliasShade] ?? null;
-        } else if (typeof aliasScale === "string") {
-          hex = aliasScale;
-        }
-      }
-    }
-  }
   if (!hex) return null;
   if (!opacityPart) {
     if (!getEffectiveIsWeb() && hex.startsWith("#") && hex.length === 9) {
@@ -705,6 +686,8 @@ function resolveColor(value, colors, isArbitrary) {
     alpha = parseFloat(opacityPart) / 100;
   }
   if (isNaN(alpha)) return hex;
+  if (alpha < 0) alpha = 0;
+  else if (alpha > 1) alpha = 1;
   return hexToRgba(hex, alpha);
 }
 function parseHexRgb(hex) {
@@ -2519,6 +2502,14 @@ function isKnownModifier(name) {
 }
 
 // src/core/parser.ts
+var UNSAFE_ARBITRARY_VALUE = /[{};\\]|\/\*|\*\//;
+function isSafeArbitraryValue(value) {
+  if (!UNSAFE_ARBITRARY_VALUE.test(value)) return true;
+  if (process.env.NODE_ENV !== "production") {
+    kbachWarn(`Unsafe arbitrary value rejected: "${value}"`);
+  }
+  return false;
+}
 function parseClass(className) {
   const trimmed = className.trim();
   if (!trimmed) return null;
@@ -2557,6 +2548,7 @@ function parseClass(className) {
   if (bracketStart > 0 && remaining[bracketStart - 1] === "-" && remaining.endsWith("]")) {
     const utility = remaining.slice(0, bracketStart - 1);
     const value = remaining.slice(bracketStart + 1, -1).replace(/_/g, " ");
+    if (!isSafeArbitraryValue(value)) return null;
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
   if (remaining.endsWith("]") && bracketStart === -1) {
@@ -2566,6 +2558,7 @@ function parseClass(className) {
   }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
     const value = remaining.slice(1, -1).replace(/_/g, " ");
+    if (!isSafeArbitraryValue(value)) return null;
     return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
   }
   if (getBuiltinStandaloneNames().has(remaining)) {
@@ -2701,17 +2694,20 @@ function setDefaultFontFamily(font) {
   globalThis[FONT_KEY] = font;
 }
 var _styleEl = null;
+var _ruleIndexByKey = /* @__PURE__ */ new Map();
 function evictInjectedRule(rule) {
+  const idx = _ruleIndexByKey.get(rule);
+  _ruleIndexByKey.delete(rule);
+  if (idx === void 0) return;
   const sheet = _styleEl?.sheet;
   if (!sheet) return;
-  for (let i = 0; i < sheet.cssRules.length; i++) {
-    if (sheet.cssRules[i].cssText === rule) {
-      try {
-        sheet.deleteRule(i);
-      } catch {
-      }
-      return;
-    }
+  try {
+    sheet.deleteRule(idx);
+  } catch {
+    return;
+  }
+  for (const [key, i] of _ruleIndexByKey) {
+    if (i > idx) _ruleIndexByKey.set(key, i - 1);
   }
 }
 var _injectedRules = new LRUCache(5e4, evictInjectedRule);
@@ -3156,26 +3152,37 @@ function buildColorVarMap(theme, usedCSS) {
   const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
   let hm;
   while ((hm = hexRe.exec(usedCSS)) !== null) usedHexValues.add(hm[0].toLowerCase());
-  const map = /* @__PURE__ */ new Map();
+  const replacements = /* @__PURE__ */ new Map();
+  const declarations = /* @__PURE__ */ new Map();
   for (const [name, shades] of Object.entries(theme.colors ?? {})) {
     const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
     for (const [fullName, val] of entries) {
-      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val)) {
-        if (usedHexValues.has(val.toLowerCase())) {
-          map.set(val, `--color-${fullName}`);
-        }
+      if (typeof val !== "string" || !/^#[0-9a-fA-F]{3,8}$/.test(val)) continue;
+      if (usedHexValues.has(val.toLowerCase())) {
+        const varName = `--color-${fullName}`;
+        replacements.set(val, `var(${varName})`);
+        declarations.set(varName, val);
+      }
+      const rgb = parseHexRgb(val);
+      if (!rgb) continue;
+      const triplet = `${rgb[0]},${rgb[1]},${rgb[2]}`;
+      const rgbaPrefix = `rgba(${triplet},`;
+      if (usedCSS.includes(rgbaPrefix)) {
+        const rgbVarName = `--color-${fullName}-rgb`;
+        replacements.set(rgbaPrefix, `rgba(var(${rgbVarName}),`);
+        declarations.set(rgbVarName, triplet);
       }
     }
   }
-  return map;
+  return { replacements, declarations };
 }
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
-  const colorVars = buildColorVarMap(theme, allRaw);
-  const sortedColorVars = [...colorVars].sort(([a], [b]) => b.length - a.length);
+  const { replacements, declarations } = buildColorVarMap(theme, allRaw);
+  const sortedReplacements = [...replacements].sort(([a], [b]) => b.length - a.length);
   function applyVars(css) {
-    for (const [val, varName] of sortedColorVars)
-      css = css.split(val).join(`var(${varName})`);
+    for (const [pattern, replacement] of sortedReplacements)
+      css = css.split(pattern).join(replacement);
     return css;
   }
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
@@ -3186,9 +3193,9 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
     groups.get(label).push(applyVars(css));
   }
   const out = ["/* Generated by Kbach \u2014 do not edit */"];
-  if (colorVars.size > 0) {
+  if (declarations.size > 0) {
     out.push("\n:root {");
-    for (const [val, varName] of colorVars) out.push(`  ${varName}: ${val};`);
+    for (const [varName, val] of declarations) out.push(`  ${varName}: ${val};`);
     out.push("}");
   }
   const globalCSS = buildThemeGlobal(theme);

package/dist/vite-plugin.mjs

@@ -637,25 +637,6 @@ function resolveColor(value, colors, isArbitrary) {
       }
     }
   }
-  if (hex && !hex.startsWith("#") && !hex.startsWith("rgb") && hex !== "transparent" && hex !== "currentColor") {
-    if (hex in colors) {
-      const alias = colors[hex];
-      if (typeof alias === "string") hex = alias;
-      else if (typeof alias === "object" && "6" in alias) hex = alias["6"] ?? hex;
-    } else {
-      const aliasLastDash = hex.lastIndexOf("-");
-      if (aliasLastDash > 0) {
-        const aliasColorName = hex.slice(0, aliasLastDash);
-        const aliasShade = hex.slice(aliasLastDash + 1);
-        const aliasScale = colors[aliasColorName];
-        if (aliasScale && typeof aliasScale === "object") {
-          hex = aliasScale[aliasShade] ?? null;
-        } else if (typeof aliasScale === "string") {
-          hex = aliasScale;
-        }
-      }
-    }
-  }
   if (!hex) return null;
   if (!opacityPart) {
     if (!getEffectiveIsWeb() && hex.startsWith("#") && hex.length === 9) {
@@ -671,6 +652,8 @@ function resolveColor(value, colors, isArbitrary) {
     alpha = parseFloat(opacityPart) / 100;
   }
   if (isNaN(alpha)) return hex;
+  if (alpha < 0) alpha = 0;
+  else if (alpha > 1) alpha = 1;
   return hexToRgba(hex, alpha);
 }
 function parseHexRgb(hex) {
@@ -2485,6 +2468,14 @@ function isKnownModifier(name) {
 }
 
 // src/core/parser.ts
+var UNSAFE_ARBITRARY_VALUE = /[{};\\]|\/\*|\*\//;
+function isSafeArbitraryValue(value) {
+  if (!UNSAFE_ARBITRARY_VALUE.test(value)) return true;
+  if (process.env.NODE_ENV !== "production") {
+    kbachWarn(`Unsafe arbitrary value rejected: "${value}"`);
+  }
+  return false;
+}
 function parseClass(className) {
   const trimmed = className.trim();
   if (!trimmed) return null;
@@ -2523,6 +2514,7 @@ function parseClass(className) {
   if (bracketStart > 0 && remaining[bracketStart - 1] === "-" && remaining.endsWith("]")) {
     const utility = remaining.slice(0, bracketStart - 1);
     const value = remaining.slice(bracketStart + 1, -1).replace(/_/g, " ");
+    if (!isSafeArbitraryValue(value)) return null;
     return { original: trimmed, modifiers, negative, important, utility, value, isArbitrary: true };
   }
   if (remaining.endsWith("]") && bracketStart === -1) {
@@ -2532,6 +2524,7 @@ function parseClass(className) {
   }
   if (remaining.startsWith("[") && remaining.endsWith("]")) {
     const value = remaining.slice(1, -1).replace(/_/g, " ");
+    if (!isSafeArbitraryValue(value)) return null;
     return { original: trimmed, modifiers, negative, important, utility: "", value, isArbitrary: true };
   }
   if (getBuiltinStandaloneNames().has(remaining)) {
@@ -2667,17 +2660,20 @@ function setDefaultFontFamily(font) {
   globalThis[FONT_KEY] = font;
 }
 var _styleEl = null;
+var _ruleIndexByKey = /* @__PURE__ */ new Map();
 function evictInjectedRule(rule) {
+  const idx = _ruleIndexByKey.get(rule);
+  _ruleIndexByKey.delete(rule);
+  if (idx === void 0) return;
   const sheet = _styleEl?.sheet;
   if (!sheet) return;
-  for (let i = 0; i < sheet.cssRules.length; i++) {
-    if (sheet.cssRules[i].cssText === rule) {
-      try {
-        sheet.deleteRule(i);
-      } catch {
-      }
-      return;
-    }
+  try {
+    sheet.deleteRule(idx);
+  } catch {
+    return;
+  }
+  for (const [key, i] of _ruleIndexByKey) {
+    if (i > idx) _ruleIndexByKey.set(key, i - 1);
   }
 }
 var _injectedRules = new LRUCache(5e4, evictInjectedRule);
@@ -3122,26 +3118,37 @@ function buildColorVarMap(theme, usedCSS) {
   const hexRe = /#[0-9a-fA-F]{3,8}\b/g;
   let hm;
   while ((hm = hexRe.exec(usedCSS)) !== null) usedHexValues.add(hm[0].toLowerCase());
-  const map = /* @__PURE__ */ new Map();
+  const replacements = /* @__PURE__ */ new Map();
+  const declarations = /* @__PURE__ */ new Map();
   for (const [name, shades] of Object.entries(theme.colors ?? {})) {
     const entries = typeof shades === "string" ? [[name, shades]] : Object.entries(shades).map(([s, v]) => [`${name}-${s}`, v]);
     for (const [fullName, val] of entries) {
-      if (typeof val === "string" && /^#[0-9a-fA-F]{3,8}$/.test(val)) {
-        if (usedHexValues.has(val.toLowerCase())) {
-          map.set(val, `--color-${fullName}`);
-        }
+      if (typeof val !== "string" || !/^#[0-9a-fA-F]{3,8}$/.test(val)) continue;
+      if (usedHexValues.has(val.toLowerCase())) {
+        const varName = `--color-${fullName}`;
+        replacements.set(val, `var(${varName})`);
+        declarations.set(varName, val);
+      }
+      const rgb = parseHexRgb(val);
+      if (!rgb) continue;
+      const triplet = `${rgb[0]},${rgb[1]},${rgb[2]}`;
+      const rgbaPrefix = `rgba(${triplet},`;
+      if (usedCSS.includes(rgbaPrefix)) {
+        const rgbVarName = `--color-${fullName}-rgb`;
+        replacements.set(rgbaPrefix, `rgba(var(${rgbVarName}),`);
+        declarations.set(rgbVarName, triplet);
       }
     }
   }
-  return map;
+  return { replacements, declarations };
 }
 function formatKbachCSS(tokenCSS, theme, responsiveRe) {
   const allRaw = [...tokenCSS.values()].filter(Boolean).join("\n");
-  const colorVars = buildColorVarMap(theme, allRaw);
-  const sortedColorVars = [...colorVars].sort(([a], [b]) => b.length - a.length);
+  const { replacements, declarations } = buildColorVarMap(theme, allRaw);
+  const sortedReplacements = [...replacements].sort(([a], [b]) => b.length - a.length);
   function applyVars(css) {
-    for (const [val, varName] of sortedColorVars)
-      css = css.split(val).join(`var(${varName})`);
+    for (const [pattern, replacement] of sortedReplacements)
+      css = css.split(pattern).join(replacement);
     return css;
   }
   const groups = new Map(GROUP_ORDER.map((g) => [g, []]));
@@ -3152,9 +3159,9 @@ function formatKbachCSS(tokenCSS, theme, responsiveRe) {
     groups.get(label).push(applyVars(css));
   }
   const out = ["/* Generated by Kbach \u2014 do not edit */"];
-  if (colorVars.size > 0) {
+  if (declarations.size > 0) {
     out.push("\n:root {");
-    for (const [val, varName] of colorVars) out.push(`  ${varName}: ${val};`);
+    for (const [varName, val] of declarations) out.push(`  ${varName}: ${val};`);
     out.push("}");
   }
   const globalCSS = buildThemeGlobal(theme);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.15",
+  "version": "0.6.17",
   "description": "React / React Native components and hooks for the Kbach framework",
   "source": "./src/index.ts",
   "main": "./dist/index.js",