@csszyx/compiler 0.1.2 → 0.1.3

package/dist/index.cjs

@@ -60,10 +60,6 @@ module.exports = __toCommonJS(index_exports);
 // src/compiler.ts
 var import_core = require("@csszyx/core");
 
-// src/transform.ts
-var babel = __toESM(require("@babel/core"), 1);
-var t = __toESM(require("@babel/types"), 1);
-
 // src/property-types.ts
 var PropertyCategory = /* @__PURE__ */ ((PropertyCategory2) => {
   PropertyCategory2[PropertyCategory2["SPACING"] = 0] = "SPACING";
@@ -230,6 +226,81 @@ function getCSSVariableName(property, variantPrefix) {
   return `--_sz-${prop}`;
 }
 
+// src/color-validation.ts
+var COLOR_STRING_KEYWORDS = /* @__PURE__ */ new Set([
+  "inherit",
+  "current",
+  "transparent",
+  "black",
+  "white",
+  "none"
+]);
+function isValidColorString(value) {
+  if (COLOR_STRING_KEYWORDS.has(value)) {
+    return true;
+  }
+  if (value.startsWith("--")) {
+    return true;
+  }
+  if (value.startsWith("#")) {
+    return true;
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    return true;
+  }
+  if (/^(rgb|hsl|oklch|color|hwb|lab|lch|oklab)\(/.test(value)) {
+    return true;
+  }
+  if (/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z0-9]+)*-\d+$/.test(value)) {
+    return true;
+  }
+  return false;
+}
+function hasSlashOpacity(value) {
+  const slashIdx = value.indexOf("/");
+  if (slashIdx === -1) {
+    return false;
+  }
+  return slashIdx > 0 && /\d$/.test(value.slice(0, slashIdx));
+}
+function stripInvalidColorStrings(sz) {
+  const result = {};
+  for (const [key, value] of Object.entries(sz)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      result[key] = stripInvalidColorStrings(value);
+      continue;
+    }
+    if (typeof value === "string" && PROPERTY_CATEGORY_MAP[key] === 1 /* COLOR */) {
+      const strVal = value.replace(/!$/, "");
+      if (hasSlashOpacity(strVal)) {
+        if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
+          const slashIdx = strVal.indexOf("/");
+          const colorPart = strVal.slice(0, slashIdx);
+          const opPart = strVal.slice(slashIdx + 1);
+          console.warn(
+            `[csszyx] "${key}: '${strVal}'" \u2014 string slash opacity is not supported. Use object form: { color: '${colorPart}', op: ${opPart} }.`
+          );
+        }
+        continue;
+      }
+      if (!isValidColorString(strVal)) {
+        if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
+          console.warn(
+            `[csszyx] "${key}: '${strVal}'" is not a recognized color value and will be ignored. Use a Tailwind color ("blue-500"), CSS variable ("--my-color"), hex/rgb/hsl ("#ff0000"), or object form ({ color: "blue-500", op: 50 }).`
+          );
+        }
+        continue;
+      }
+    }
+    result[key] = value;
+  }
+  return result;
+}
+
+// src/transform.ts
+var babel = __toESM(require("@babel/core"), 1);
+var t = __toESM(require("@babel/types"), 1);
+
 // src/transform-core.ts
 var PROPERTY_MAP = {
   // Background
@@ -1324,6 +1395,28 @@ function transform(szProp, prefix = "", mangleMap) {
       }
       continue;
     }
+    if (typeof value === "string" && PROPERTY_CATEGORY_MAP[rawKey] === 1 /* COLOR */) {
+      const strVal = value.replace(/!$/, "");
+      if (hasSlashOpacity(strVal)) {
+        if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
+          const slashIdx = strVal.indexOf("/");
+          const colorPart = strVal.slice(0, slashIdx);
+          const opPart = strVal.slice(slashIdx + 1);
+          console.warn(
+            `[csszyx] "${rawKey}: '${strVal}'" \u2014 string slash opacity is not supported. Use object form: { color: '${colorPart}', op: ${opPart} }.`
+          );
+        }
+        continue;
+      }
+      if (!isValidColorString(strVal)) {
+        if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
+          console.warn(
+            `[csszyx] "${rawKey}: '${strVal}'" is not a recognized color value and will be ignored. Use a Tailwind color ("blue-500"), CSS variable ("--my-color"), hex/rgb/hsl ("#ff0000"), or object form ({ color: "blue-500", op: 50 }).`
+          );
+        }
+        continue;
+      }
+    }
     if (typeof value === "object" && !Array.isArray(value)) {
       if (rawKey === "group") {
         const groupClasses = handleGroupPeer("group", value, prefix);
@@ -2480,8 +2573,9 @@ var CsszyxCompiler = class _CsszyxCompiler {
    */
   transform(sz) {
     if (this.wasmLoaded) {
+      const cleaned = stripInvalidColorStrings(sz);
       try {
-        return (0, import_core.transform_sz)(sz);
+        return (0, import_core.transform_sz)(cleaned);
       } catch (error) {
         console.warn(
           "[csszyx] WASM transformation failed, using JS fallback",

package/dist/index.d.cts

@@ -876,7 +876,7 @@ interface BackgroundProps {
     /** @see https://tailwindcss.com/docs/background-clip */
     bgClip?: 'border' | 'padding' | 'content' | 'text';
     /** @see https://tailwindcss.com/docs/background-color */
-    bg?: ColorPropValue | (string & {});
+    bg?: ColorPropValue;
     /** @see https://tailwindcss.com/docs/background-origin */
     bgOrigin?: 'border' | 'padding' | 'content';
     /** @see https://tailwindcss.com/docs/background-position */

package/dist/index.d.ts

@@ -876,7 +876,7 @@ interface BackgroundProps {
     /** @see https://tailwindcss.com/docs/background-clip */
     bgClip?: 'border' | 'padding' | 'content' | 'text';
     /** @see https://tailwindcss.com/docs/background-color */
-    bg?: ColorPropValue | (string & {});
+    bg?: ColorPropValue;
     /** @see https://tailwindcss.com/docs/background-origin */
     bgOrigin?: 'border' | 'padding' | 'content';
     /** @see https://tailwindcss.com/docs/background-position */

package/dist/index.js

@@ -8,10 +8,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/compiler.ts
 import { init, transform_sz, version as getWasmVersion } from "@csszyx/core";
 
-// src/transform.ts
-import * as babel from "@babel/core";
-import * as t from "@babel/types";
-
 // src/property-types.ts
 var PropertyCategory = /* @__PURE__ */ ((PropertyCategory2) => {
   PropertyCategory2[PropertyCategory2["SPACING"] = 0] = "SPACING";
@@ -178,6 +174,81 @@ function getCSSVariableName(property, variantPrefix) {
   return `--_sz-${prop}`;
 }
 
+// src/color-validation.ts
+var COLOR_STRING_KEYWORDS = /* @__PURE__ */ new Set([
+  "inherit",
+  "current",
+  "transparent",
+  "black",
+  "white",
+  "none"
+]);
+function isValidColorString(value) {
+  if (COLOR_STRING_KEYWORDS.has(value)) {
+    return true;
+  }
+  if (value.startsWith("--")) {
+    return true;
+  }
+  if (value.startsWith("#")) {
+    return true;
+  }
+  if (value.startsWith("[") && value.endsWith("]")) {
+    return true;
+  }
+  if (/^(rgb|hsl|oklch|color|hwb|lab|lch|oklab)\(/.test(value)) {
+    return true;
+  }
+  if (/^[a-zA-Z][a-zA-Z0-9]*(-[a-zA-Z0-9]+)*-\d+$/.test(value)) {
+    return true;
+  }
+  return false;
+}
+function hasSlashOpacity(value) {
+  const slashIdx = value.indexOf("/");
+  if (slashIdx === -1) {
+    return false;
+  }
+  return slashIdx > 0 && /\d$/.test(value.slice(0, slashIdx));
+}
+function stripInvalidColorStrings(sz) {
+  const result = {};
+  for (const [key, value] of Object.entries(sz)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      result[key] = stripInvalidColorStrings(value);
+      continue;
+    }
+    if (typeof value === "string" && PROPERTY_CATEGORY_MAP[key] === 1 /* COLOR */) {
+      const strVal = value.replace(/!$/, "");
+      if (hasSlashOpacity(strVal)) {
+        if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
+          const slashIdx = strVal.indexOf("/");
+          const colorPart = strVal.slice(0, slashIdx);
+          const opPart = strVal.slice(slashIdx + 1);
+          console.warn(
+            `[csszyx] "${key}: '${strVal}'" \u2014 string slash opacity is not supported. Use object form: { color: '${colorPart}', op: ${opPart} }.`
+          );
+        }
+        continue;
+      }
+      if (!isValidColorString(strVal)) {
+        if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
+          console.warn(
+            `[csszyx] "${key}: '${strVal}'" is not a recognized color value and will be ignored. Use a Tailwind color ("blue-500"), CSS variable ("--my-color"), hex/rgb/hsl ("#ff0000"), or object form ({ color: "blue-500", op: 50 }).`
+          );
+        }
+        continue;
+      }
+    }
+    result[key] = value;
+  }
+  return result;
+}
+
+// src/transform.ts
+import * as babel from "@babel/core";
+import * as t from "@babel/types";
+
 // src/transform-core.ts
 var PROPERTY_MAP = {
   // Background
@@ -1272,6 +1343,28 @@ function transform(szProp, prefix = "", mangleMap) {
       }
       continue;
     }
+    if (typeof value === "string" && PROPERTY_CATEGORY_MAP[rawKey] === 1 /* COLOR */) {
+      const strVal = value.replace(/!$/, "");
+      if (hasSlashOpacity(strVal)) {
+        if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
+          const slashIdx = strVal.indexOf("/");
+          const colorPart = strVal.slice(0, slashIdx);
+          const opPart = strVal.slice(slashIdx + 1);
+          console.warn(
+            `[csszyx] "${rawKey}: '${strVal}'" \u2014 string slash opacity is not supported. Use object form: { color: '${colorPart}', op: ${opPart} }.`
+          );
+        }
+        continue;
+      }
+      if (!isValidColorString(strVal)) {
+        if (process.env["NODE_ENV"] !== "production" && typeof window === "undefined") {
+          console.warn(
+            `[csszyx] "${rawKey}: '${strVal}'" is not a recognized color value and will be ignored. Use a Tailwind color ("blue-500"), CSS variable ("--my-color"), hex/rgb/hsl ("#ff0000"), or object form ({ color: "blue-500", op: 50 }).`
+          );
+        }
+        continue;
+      }
+    }
     if (typeof value === "object" && !Array.isArray(value)) {
       if (rawKey === "group") {
         const groupClasses = handleGroupPeer("group", value, prefix);
@@ -2428,8 +2521,9 @@ var CsszyxCompiler = class _CsszyxCompiler {
    */
   transform(sz) {
     if (this.wasmLoaded) {
+      const cleaned = stripInvalidColorStrings(sz);
       try {
-        return transform_sz(sz);
+        return transform_sz(cleaned);
       } catch (error) {
         console.warn(
           "[csszyx] WASM transformation failed, using JS fallback",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@csszyx/compiler",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Core compiler and transformation logic for csszyx",
   "keywords": [
     "csszyx",
@@ -38,7 +38,7 @@
     "@babel/core": "^7.23.7",
     "@babel/types": "^7.23.6",
     "@babel/traverse": "^7.23.7",
-    "@csszyx/core": "0.1.2"
+    "@csszyx/core": "0.1.3"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",