chaincss 2.1.29 → 2.1.31

package/dist/index.js

@@ -3436,8 +3436,8 @@ function useSmartStyles(styleBuilder, deps = [], options = {}) {
 }
 function createSmartComponent(Component, baseStyles) {
   const SmartComponent = (props) => {
-    const styles = useSmartStyles((chain2) => {
-      let instance = chain2();
+    const styles = useSmartStyles((chain3) => {
+      let instance = chain3();
       if (baseStyles) {
         instance = baseStyles(instance);
       }
@@ -3467,7 +3467,7 @@ function withSmartStyles(WrappedComponent, styles) {
 import fs6 from "fs";
 import path5 from "path";
 import crypto4 from "crypto";
-import chalk3 from "chalk";
+import chalk2 from "chalk";
 import { fileURLToPath, pathToFileURL } from "url";
 
 // src/core/constants.ts
@@ -3669,9 +3669,7 @@ function formatCSS(css, minify = false) {
 var currentLogLevel = process.env.DEBUG ? "debug" : "info";
 
 // src/compiler/btt.ts
-import fs2 from "fs";
 import https from "https";
-import chalk2 from "chalk";
 
 // src/compiler/commonProps.ts
 var COMMON_CSS_PROPERTIES2 = [
@@ -3754,7 +3752,7 @@ var COMMON_CSS_PROPERTIES2 = [
   "z-index"
 ];
 
-// src/compiler/btt.ts
+// src/compiler/timeline.ts
 var styleHistory = [];
 var styleChanges = [];
 var timelineEnabled = false;
@@ -3767,10 +3765,10 @@ function enableTimeline(enable = true) {
   }
 }
 function getStyleHistory() {
-  return styleHistory;
+  return [...styleHistory];
 }
 function getStyleChanges() {
-  return styleChanges;
+  return [...styleChanges];
 }
 function getStyleDiff(snapshotId1, snapshotId2) {
   const snapshot1 = styleHistory.find((s) => s.id === snapshotId1);
@@ -3778,19 +3776,12 @@ function getStyleDiff(snapshotId1, snapshotId2) {
   if (!snapshot1 || !snapshot2) {
     return { error: "Snapshot not found" };
   }
-  const diff = {
-    added: {},
-    removed: {},
-    modified: {}
-  };
+  const diff = { added: {}, removed: {}, modified: {} };
   for (const [key, value] of Object.entries(snapshot2.styles)) {
     if (!(key in snapshot1.styles)) {
       diff.added[key] = value;
     } else if (JSON.stringify(snapshot1.styles[key]) !== JSON.stringify(value)) {
-      diff.modified[key] = {
-        old: snapshot1.styles[key],
-        new: value
-      };
+      diff.modified[key] = { old: snapshot1.styles[key], new: value };
     }
   }
   for (const [key, value] of Object.entries(snapshot1.styles)) {
@@ -3806,22 +3797,13 @@ function takeSnapshot(selector, styles, source) {
   const existing = styleHistory.find((s) => s.selector === selector && s.hash === hash);
   if (existing) return existing.id;
   const id = `snapshot_${currentSnapshotId++}`;
-  const snapshot = {
-    id,
-    timestamp: Date.now(),
-    selector,
-    styles: { ...styles },
-    source,
-    hash
-  };
-  styleHistory.push(snapshot);
-  const previousSnapshot = styleHistory.slice(-2)[0];
-  if (previousSnapshot && previousSnapshot.selector === selector) {
+  styleHistory.push({ id, timestamp: Date.now(), selector, styles: { ...styles }, source, hash });
+  const previous = styleHistory[styleHistory.length - 2];
+  if (previous && previous.selector === selector) {
     for (const [key, value] of Object.entries(styles)) {
-      const oldValue = previousSnapshot.styles[key];
-      if (!(key in previousSnapshot.styles)) {
+      if (!(key in previous.styles)) {
         styleChanges.push({
-          id: `change_${Date.now()}_${Math.random()}`,
+          id: `change_${Date.now()}_${Math.random().toString(36).slice(2)}`,
           timestamp: Date.now(),
           selector,
           property: key,
@@ -3829,26 +3811,26 @@ function takeSnapshot(selector, styles, source) {
           newValue: value,
           type: "add"
         });
-      } else if (JSON.stringify(oldValue) !== JSON.stringify(value)) {
+      } else if (JSON.stringify(previous.styles[key]) !== JSON.stringify(value)) {
         styleChanges.push({
-          id: `change_${Date.now()}_${Math.random()}`,
+          id: `change_${Date.now()}_${Math.random().toString(36).slice(2)}`,
           timestamp: Date.now(),
           selector,
           property: key,
-          oldValue,
+          oldValue: previous.styles[key],
           newValue: value,
           type: "modify"
         });
       }
     }
-    for (const [key] of Object.entries(previousSnapshot.styles)) {
+    for (const [key] of Object.entries(previous.styles)) {
       if (!(key in styles)) {
         styleChanges.push({
-          id: `change_${Date.now()}_${Math.random()}`,
+          id: `change_${Date.now()}_${Math.random().toString(36).slice(2)}`,
           timestamp: Date.now(),
           selector,
           property: key,
-          oldValue: previousSnapshot.styles[key],
+          oldValue: previous.styles[key],
           newValue: void 0,
           type: "remove"
         });
@@ -3858,31 +3840,156 @@ function takeSnapshot(selector, styles, source) {
   return id;
 }
 function exportTimeline() {
-  return JSON.stringify({
-    history: styleHistory,
-    changes: styleChanges,
-    exportedAt: Date.now()
-  }, null, 2);
+  return JSON.stringify({ history: styleHistory, changes: styleChanges, exportedAt: Date.now() }, null, 2);
 }
 function clearTimeline() {
   styleHistory = [];
   styleChanges = [];
   currentSnapshotId = 0;
 }
+function isTimelineEnabled() {
+  return timelineEnabled;
+}
+
+// src/compiler/scanner.ts
+import fs2 from "fs";
+function scanFileForStyles(filePath, optimizer, source = null) {
+  const errors = [];
+  let foundCount = 0;
+  try {
+    const content = source !== null ? source : fs2.readFileSync(filePath, "utf8");
+    if (!content || content.trim().length === 0) return { foundCount: 0, errors };
+    const styleRegex = /(?:chain|smartChain|\$)\(((?:[^()]|\([^()]*\))*)\)/g;
+    let match;
+    while ((match = styleRegex.exec(content)) !== null) {
+      try {
+        const styleBody = match[1].trim();
+        const cleanBody = styleBody.replace(/^['"\`]|['"\`]$/g, "");
+        if (cleanBody && optimizer && typeof optimizer.trackStyles === "function") {
+          optimizer.trackStyles([{ selectors: { "&": cleanBody } }]);
+          foundCount++;
+        }
+      } catch (parseError) {
+        errors.push(parseError);
+      }
+    }
+  } catch (err) {
+    errors.push(err);
+  }
+  return { foundCount, errors };
+}
+
+// src/compiler/recipe.ts
+function recipe(options) {
+  const { base, variants = {}, defaultVariants = {}, compoundVariants = [] } = options;
+  const baseStyle = typeof base === "function" ? base() : base;
+  const variantStyles = {};
+  for (const [variantName, variantMap] of Object.entries(variants)) {
+    variantStyles[variantName] = {};
+    for (const [variantKey, variantStyle] of Object.entries(variantMap)) {
+      variantStyles[variantName][variantKey] = typeof variantStyle === "function" ? variantStyle() : variantStyle;
+    }
+  }
+  const compoundStyles = compoundVariants.map((cv) => ({
+    condition: cv.variants || cv,
+    style: typeof cv.style === "function" ? cv.style() : cv.style
+  }));
+  function mergeStyles(...styles) {
+    const merged = { selectors: [] };
+    for (const style of styles) {
+      if (!style) continue;
+      for (const [key, value] of Object.entries(style)) {
+        if (key === "selectors") {
+          const newSelectors = Array.isArray(value) ? value : [value];
+          merged.selectors = [.../* @__PURE__ */ new Set([...merged.selectors || [], ...newSelectors])];
+        } else if (key === "hover" && typeof value === "object") {
+          if (!merged.hover) merged.hover = {};
+          Object.assign(merged.hover, value);
+        } else if (key !== "selectors") {
+          merged[key] = value;
+        }
+      }
+    }
+    return merged;
+  }
+  function pick(variantSelection = {}) {
+    const selected = { ...defaultVariants, ...variantSelection };
+    const stylesToMerge = [];
+    if (baseStyle) stylesToMerge.push(baseStyle);
+    for (const [variantName, variantValue] of Object.entries(selected)) {
+      const variantStyle = variantStyles[variantName]?.[variantValue];
+      if (variantStyle) stylesToMerge.push(variantStyle);
+    }
+    for (const cv of compoundStyles) {
+      if (Object.entries(cv.condition).every(([key, value]) => selected[key] === value) && cv.style) {
+        stylesToMerge.push(cv.style);
+      }
+    }
+    const merged = mergeStyles(...stylesToMerge);
+    let styleBuilder = chain();
+    for (const [prop, value] of Object.entries(merged)) {
+      if (prop === "selectors" || prop === "hover") continue;
+      if (styleBuilder[prop]) styleBuilder = styleBuilder[prop](value);
+    }
+    if (merged.hover) {
+      styleBuilder = styleBuilder.hover();
+      for (const [hoverProp, hoverValue] of Object.entries(merged.hover)) {
+        if (styleBuilder[hoverProp]) styleBuilder = styleBuilder[hoverProp](hoverValue);
+      }
+      styleBuilder = styleBuilder.end();
+    }
+    return styleBuilder.$el(...merged.selectors || []);
+  }
+  pick.variants = variants;
+  pick.defaultVariants = defaultVariants;
+  pick.base = baseStyle;
+  pick.getAllVariants = () => {
+    const result = [];
+    const variantKeys = Object.keys(variants);
+    function generate(current, index) {
+      if (index === variantKeys.length) {
+        result.push({ ...current });
+        return;
+      }
+      for (const v of Object.keys(variants[variantKeys[index]])) {
+        current[variantKeys[index]] = v;
+        generate(current, index + 1);
+      }
+    }
+    generate({}, 0);
+    return result;
+  };
+  pick.getVariantClassNames = () => {
+    const classNames = {};
+    for (const variant of pick.getAllVariants()) {
+      const key = Object.entries(variant).map(([k, v]) => `${k}-${v}`).join("_");
+      const def = pick(variant);
+      if (def.selectors?.[0]) classNames[key] = def.selectors[0].replace(/^\./, "");
+    }
+    return classNames;
+  };
+  pick.compileAll = () => {
+    const all = pick.getAllVariants();
+    const styles = [];
+    if (baseStyle?.selectors) styles.push(baseStyle);
+    for (const v of all) {
+      const d = pick(v);
+      if (d?.selectors) styles.push(d);
+    }
+    return run(...styles);
+  };
+  return pick;
+}
+
+// src/compiler/btt.ts
 var enableSourceComments = true;
 function getSourceLocation() {
   if (!enableSourceComments) return null;
   const stack = new Error().stack;
   if (!stack) return null;
-  const stackLines = stack.split("\n");
-  for (let i = 0; i < stackLines.length; i++) {
-    const line = stackLines[i];
+  for (const line of stack.split("\n")) {
     const match = line.match(/([^/]+\.chain\.js):(\d+):\d+/);
-    if (match) {
-      const fileName = match[1];
-      const lineNumber = match[2];
-      return `${fileName}:${lineNumber}`;
-    }
+    if (match) return `${match[1]}:${match[2]}`;
   }
   return null;
 }
@@ -3919,9 +4026,7 @@ var fetchWithHttps = (url) => {
   });
 };
 var loadCSSProperties = async () => {
-  if (chains.cachedValidProperties !== null && chains.cachedValidProperties.length > 0) {
-    return chains.cachedValidProperties;
-  }
+  if (chains.cachedValidProperties?.length > 0) return chains.cachedValidProperties;
   try {
     const url = "https://raw.githubusercontent.com/mdn/data/main/css/properties.json";
     let data;
@@ -3935,14 +4040,9 @@ var loadCSSProperties = async () => {
       data = await fetchWithHttps(url);
     }
     const allProperties = Object.keys(data);
-    const baseProperties = /* @__PURE__ */ new Set();
-    allProperties.forEach((prop) => {
-      const baseProp = prop.replace(/^-(webkit|moz|ms|o)-/, "");
-      baseProperties.add(baseProp);
-    });
-    chains.cachedValidProperties = Array.from(baseProperties).sort();
+    chains.cachedValidProperties = allProperties.map((p) => p.replace(/^-(webkit|moz|ms|o)-/, "")).filter((v, i, a) => a.indexOf(v) === i).sort();
     return chains.cachedValidProperties;
-  } catch (error) {
+  } catch {
     chains.cachedValidProperties = COMMON_CSS_PROPERTIES2;
     return chains.cachedValidProperties;
   }
@@ -3953,11 +4053,8 @@ var chains = {
   classMap: {},
   atomicStats: null,
   async initializeProperties() {
-    if (this.cachedValidProperties && this.cachedValidProperties.length > 0) {
-      return;
-    }
-    const properties = await loadCSSProperties();
-    this.cachedValidProperties = properties;
+    if (this.cachedValidProperties?.length > 0) return;
+    this.cachedValidProperties = await loadCSSProperties();
   },
   getCachedProperties() {
     return this.cachedValidProperties;
@@ -3968,9 +4065,7 @@ function setAtomicOptimizer(optimizer) {
   atomicOptimizer = optimizer;
 }
 function configureAtomic(opts) {
-  if (atomicOptimizer) {
-    Object.assign(atomicOptimizer.options, opts);
-  }
+  if (atomicOptimizer) Object.assign(atomicOptimizer.options, opts);
 }
 var tokens2 = tokens;
 function createTokens2(tokenValues) {
@@ -3985,21 +4080,13 @@ function processAtRule(rule, parentSelectors = null) {
       output = `@media ${rule.query} {
 `;
       if (rule.styles && typeof rule.styles === "object") {
-        let ruleBody = "";
-        for (const prop in rule.styles) {
-          const kebabKey = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-          ruleBody += `    ${kebabKey}: ${rule.styles[prop]};
+        let body = "";
+        for (const prop in rule.styles) body += `    ${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${rule.styles[prop]};
 `;
-        }
-        if (ruleBody.trim()) {
-          const selector = parentSelectors && parentSelectors.length > 0 ? parentSelectors.join(", ") : ".unknown-selector";
-          const sourceLocation = getSourceLocation();
-          if (enableSourceComments && sourceLocation) {
-            output += `  /* Generated from: ${sourceLocation} */
-`;
-          }
-          output += `  ${selector} {
-${ruleBody}  }
+        if (body.trim()) {
+          const sel = parentSelectors?.length ? parentSelectors.join(", ") : ".unknown-selector";
+          output += `  ${sel} {
+${body}  }
 `;
         }
       }
@@ -4012,11 +4099,8 @@ ${ruleBody}  }
         output += `  ${step} {
 `;
         for (const prop in rule.steps[step]) {
-          if (prop !== "selectors") {
-            const kebabKey = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-            output += `    ${kebabKey}: ${rule.steps[step][prop]};
+          if (prop !== "selectors") output += `    ${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${rule.steps[step][prop]};
 `;
-          }
         }
         output += "  }\n";
       }
@@ -4025,23 +4109,17 @@ ${ruleBody}  }
     case "font-face":
       output = "@font-face {\n";
       for (const prop in rule.properties) {
-        if (prop !== "selectors") {
-          const kebabKey = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-          output += `  ${kebabKey}: ${rule.properties[prop]};
+        if (prop !== "selectors") output += `  ${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${rule.properties[prop]};
 `;
-        }
       }
       output += "}\n";
       break;
-    default:
-      output = "";
-      break;
   }
   return output;
 }
 var run = (...args) => {
   if (args.length === 0) return "";
-  const validStyles = args.filter((value) => value && typeof value === "object");
+  const validStyles = args.filter((v) => v && typeof v === "object");
   if (validStyles.length === 0) return "";
   let cssOutput = "";
   const styleObjs = [];
@@ -4052,77 +4130,47 @@ var run = (...args) => {
       cssOutput += processAtRule(value) + "\n";
       return;
     }
-    if (value.selectors) {
-      let mainRuleBody = "";
-      let subRulesOutput = "";
-      for (const key in value) {
-        if (!value.hasOwnProperty(key)) continue;
-        if ([
-          "selectors",
-          "atRules",
-          "hover",
-          "nestedRules",
-          "use",
-          "nest",
-          "themes",
-          "_componentName",
-          "_generateComponent",
-          "_framework",
-          "_propsDefinition"
-        ].includes(key)) continue;
-        if (key === "atRules" && Array.isArray(value[key])) {
-          value[key].forEach((rule) => {
-            subRulesOutput += processAtRule(rule, value.selectors);
-          });
-          continue;
-        }
-        if (key === "nestedRules" && Array.isArray(value[key])) {
-          value[key].forEach((rule) => {
-            let nestedBody = "";
-            for (const prop in rule.styles) {
-              const kebabKey2 = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-              nestedBody += `    ${kebabKey2}: ${rule.styles[prop]};
-`;
-            }
-            if (nestedBody) {
-              subRulesOutput += `${value.selectors.join(", ")} ${rule.selector} {
-${nestedBody}  }
+    if (!value.selectors) return;
+    let mainBody = "", subOutput = "";
+    for (const key in value) {
+      if (!value.hasOwnProperty(key)) continue;
+      if (["selectors", "atRules", "hover", "nestedRules", "use", "nest", "themes", "_componentName", "_generateComponent", "_framework", "_propsDefinition"].includes(key)) continue;
+      if (key === "atRules" && Array.isArray(value[key])) {
+        value[key].forEach((r) => {
+          subOutput += processAtRule(r, value.selectors);
+        });
+        continue;
+      }
+      if (key === "nestedRules" && Array.isArray(value[key])) {
+        value[key].forEach((r) => {
+          let nb = "";
+          for (const p in r.styles) nb += `    ${p.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${r.styles[p]};
 `;
-            }
-          });
-          continue;
-        }
-        if (key === "hover" && typeof value[key] === "object") {
-          let hoverBody = "";
-          for (const hoverKey in value[key]) {
-            const kebabKey2 = hoverKey.replace(/([A-Z])/g, "-$1").toLowerCase();
-            hoverBody += `  ${kebabKey2}: ${value[key][hoverKey]};
+          if (nb) subOutput += `${value.selectors.join(", ")} ${r.selector} {
+${nb}  }
 `;
-          }
-          if (hoverBody) {
-            subRulesOutput += `${value.selectors.join(", ")}:hover {
-${hoverBody}}
+        });
+        continue;
+      }
+      if (key === "hover" && typeof value[key] === "object") {
+        let hb = "";
+        for (const hk in value[key]) hb += `  ${hk.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value[key][hk]};
 `;
-          }
-          continue;
-        }
-        const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-        mainRuleBody += `  ${kebabKey}: ${value[key]};
+        if (hb) subOutput += `${value.selectors.join(", ")}:hover {
+${hb}}
 `;
+        continue;
       }
-      if (mainRuleBody.trim()) {
-        cssOutput += `${value.selectors.join(", ")} {
-${mainRuleBody}}
+      mainBody += `  ${key.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value[key]};
 `;
-      }
-      cssOutput += subRulesOutput;
     }
+    if (mainBody.trim()) cssOutput += `${value.selectors.join(", ")} {
+${mainBody}}
+`;
+    cssOutput += subOutput;
   });
   cssOutput = cssOutput.replace(/\n{3,}/g, "\n\n").trim();
-  if (atomicOptimizer && atomicOptimizer.options.enabled) {
-    const result = atomicOptimizer.optimize(styleObjs);
-    return result.css;
-  }
+  if (atomicOptimizer?.options.enabled) return atomicOptimizer.optimize(styleObjs).css;
   return cssOutput;
 };
 var compile = (obj) => {
@@ -4133,25 +4181,20 @@ var compile = (obj) => {
     if (!obj.hasOwnProperty(key)) continue;
     const element = obj[key];
     if (element && element.variants && typeof element.compileAll === "function") {
-      const cleanKey = key.includes("_") ? key.split("_").pop() : key;
-      const recipeOutput = element.compileAll(cleanKey);
-      cssString += recipeOutput + "\n";
+      cssString += element.compileAll(key.includes("_") ? key.split("_").pop() : key) + "\n";
       continue;
     }
-    if (!element || !element.selectors || !element.selectors[0]) continue;
+    if (!element?.selectors?.[0]) continue;
     const selectorKey = element.selectors.join(",");
     if (processedSelectors.has(selectorKey)) continue;
     processedSelectors.add(selectorKey);
     collected.push(element);
     const sourceLocation = getSourceLocation();
-    let elementCSS = "";
-    let subRulesCSS = "";
-    if (timelineEnabled) {
+    let elementCSS = "", subRulesCSS = "";
+    if (isTimelineEnabled()) {
       const styles = {};
       for (const prop in element) {
-        if (!["selectors", "atRules", "hover", "nestedRules", "use", "nest", "themes"].includes(prop)) {
-          styles[prop] = element[prop];
-        }
+        if (!["selectors", "atRules", "hover", "nestedRules", "use", "nest", "themes"].includes(prop)) styles[prop] = element[prop];
       }
       takeSnapshot(element.selectors[0], styles, sourceLocation || "unknown");
     }
@@ -4161,41 +4204,25 @@ var compile = (obj) => {
       if (prop.startsWith("_") || !element.hasOwnProperty(prop)) continue;
       const value = element[prop];
       if (value === void 0 || value === null) continue;
-      const kebabKey = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-      elementCSS += `  ${kebabKey}: ${value};
+      elementCSS += `  ${prop.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value};
 `;
     }
-    if (elementCSS.trim()) {
-      let block = `${element.selectors.join(", ")} {
+    if (elementCSS.trim()) cssString += addSourceComment(`${element.selectors.join(", ")} {
 ${elementCSS}}
-`;
-      cssString += addSourceComment(block, sourceLocation);
-    }
+`, sourceLocation);
     if (element.hover && typeof element.hover === "object") {
-      let hoverBody = "";
-      for (const hProp in element.hover) {
-        const hKebab = hProp.replace(/([A-Z])/g, "-$1").toLowerCase();
-        hoverBody += `  ${hKebab}: ${element.hover[hProp]};
-`;
-      }
-      if (hoverBody) {
-        let block = `${element.selectors.join(", ")}:hover {
-${hoverBody}}
+      let hb = "";
+      for (const hp in element.hover) hb += `  ${hp.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${element.hover[hp]};
 `;
-        cssString += addSourceComment(block, sourceLocation);
-      }
+      if (hb) cssString += addSourceComment(`${element.selectors.join(", ")}:hover {
+${hb}}
+`, sourceLocation);
     }
     for (const prop in element) {
       if ((prop.startsWith(".") || prop.startsWith("&")) && typeof element[prop] === "object") {
-        const subElement = element[prop];
-        const parentSelector = element.selectors[0];
-        const subSelector = prop.startsWith("&") ? prop.replace("&", parentSelector) : `${parentSelector} ${prop}`;
-        cssString += compile({
-          [subSelector]: {
-            selectors: [subSelector],
-            ...subElement
-          }
-        }) + "\n";
+        const parentSel = element.selectors[0];
+        const subSel = prop.startsWith("&") ? prop.replace("&", parentSel) : `${parentSel} ${prop}`;
+        cssString += compile({ [subSel]: { selectors: [subSel], ...element[prop] } }) + "\n";
       }
     }
     if (element.atRules && Array.isArray(element.atRules)) {
@@ -4206,25 +4233,21 @@ ${hoverBody}}
     if (element.themes && Array.isArray(element.themes)) {
       element.themes.forEach((theme) => {
         if (theme.styles) {
-          let themeCSS = "";
-          for (const tProp in theme.styles) {
-            if (tProp === "selectors") continue;
-            const tKebab = tProp.replace(/([A-Z])/g, "-$1").toLowerCase();
-            themeCSS += `  ${tKebab}: ${theme.styles[tProp]};
-`;
-          }
-          if (themeCSS) {
-            let block = `${theme.styles.selectors?.join(", ") || element.selectors.join(", ")} {
-${themeCSS}}
+          let tc = "";
+          for (const tp in theme.styles) {
+            if (tp === "selectors") continue;
+            tc += `  ${tp.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${theme.styles[tp]};
 `;
-            subRulesCSS += addSourceComment(block, sourceLocation);
           }
+          if (tc) subRulesCSS += addSourceComment(`${theme.styles.selectors?.join(", ") || element.selectors.join(", ")} {
+${tc}}
+`, sourceLocation);
         }
       });
     }
     cssString += subRulesCSS;
   }
-  if (atomicOptimizer && atomicOptimizer.options.enabled) {
+  if (atomicOptimizer?.options.enabled) {
     const result = atomicOptimizer.optimize(collected);
     chains.cssOutput = result.css;
     return result.css;
@@ -4232,175 +4255,8 @@ ${themeCSS}}
   chains.cssOutput = cssString.trim();
   return chains.cssOutput;
 };
-function recipe(options) {
-  const {
-    base,
-    variants = {},
-    defaultVariants = {},
-    compoundVariants = []
-  } = options;
-  const baseStyle = typeof base === "function" ? base() : base;
-  const variantStyles = {};
-  for (const [variantName, variantMap] of Object.entries(variants)) {
-    variantStyles[variantName] = {};
-    for (const [variantKey, variantStyle] of Object.entries(variantMap)) {
-      variantStyles[variantName][variantKey] = typeof variantStyle === "function" ? variantStyle() : variantStyle;
-    }
-  }
-  const compoundStyles = compoundVariants.map((cv) => ({
-    condition: cv.variants || cv,
-    style: typeof cv.style === "function" ? cv.style() : cv.style
-  }));
-  function mergeStyles(...styles) {
-    const merged = { selectors: [] };
-    for (const style of styles) {
-      if (!style) continue;
-      for (const [key, value] of Object.entries(style)) {
-        if (key === "selectors") {
-          const newSelectors = Array.isArray(value) ? value : [value];
-          merged.selectors = [.../* @__PURE__ */ new Set([...merged.selectors || [], ...newSelectors])];
-        } else if (key === "hover" && typeof value === "object") {
-          if (!merged.hover) merged.hover = {};
-          Object.assign(merged.hover, value);
-        } else if (key !== "selectors") {
-          merged[key] = value;
-        }
-      }
-    }
-    return merged;
-  }
-  function pick(variantSelection = {}) {
-    const selected = { ...defaultVariants, ...variantSelection };
-    const stylesToMerge = [];
-    if (baseStyle) stylesToMerge.push(baseStyle);
-    for (const [variantName, variantValue] of Object.entries(selected)) {
-      const variantStyle = variantStyles[variantName]?.[variantValue];
-      if (variantStyle) stylesToMerge.push(variantStyle);
-    }
-    for (const cv of compoundStyles) {
-      const matches = Object.entries(cv.condition).every(
-        ([key, value]) => selected[key] === value
-      );
-      if (matches && cv.style) stylesToMerge.push(cv.style);
-    }
-    const merged = mergeStyles(...stylesToMerge);
-    let styleBuilder = chain();
-    for (const [prop, value] of Object.entries(merged)) {
-      if (prop === "selectors" || prop === "hover") continue;
-      if (styleBuilder[prop]) {
-        styleBuilder = styleBuilder[prop](value);
-      }
-    }
-    if (merged.hover) {
-      styleBuilder = styleBuilder.hover();
-      for (const [hoverProp, hoverValue] of Object.entries(merged.hover)) {
-        if (styleBuilder[hoverProp]) {
-          styleBuilder = styleBuilder[hoverProp](hoverValue);
-        }
-      }
-      styleBuilder = styleBuilder.end();
-    }
-    const selectors = merged.selectors || [];
-    return styleBuilder.$el(...selectors);
-  }
-  pick.variants = variants;
-  pick.defaultVariants = defaultVariants;
-  pick.base = baseStyle;
-  pick.getAllVariants = () => {
-    const result = [];
-    const variantKeys = Object.keys(variants);
-    function generate(current, index) {
-      if (index === variantKeys.length) {
-        result.push({ ...current });
-        return;
-      }
-      const variantName = variantKeys[index];
-      for (const variantValue of Object.keys(variants[variantName])) {
-        current[variantName] = variantValue;
-        generate(current, index + 1);
-      }
-    }
-    generate({}, 0);
-    return result;
-  };
-  pick.getVariantClassNames = () => {
-    const allVariants = pick.getAllVariants();
-    const classNames = {};
-    for (const variant of allVariants) {
-      const variantKey = Object.entries(variant).map(([k, v]) => `${k}-${v}`).join("_");
-      const styleDef = pick(variant);
-      if (styleDef.selectors && styleDef.selectors[0]) {
-        classNames[variantKey] = styleDef.selectors[0].replace(/^\./, "");
-      }
-    }
-    return classNames;
-  };
-  pick.compileAll = () => {
-    const allVariants = pick.getAllVariants();
-    const styles = [];
-    if (baseStyle && baseStyle.selectors) {
-      styles.push(baseStyle);
-    }
-    for (const variant of allVariants) {
-      const styleDef = pick(variant);
-      if (styleDef && styleDef.selectors) {
-        styles.push(styleDef);
-      }
-    }
-    for (const variantName of Object.keys(variants)) {
-      for (const variantKey of Object.keys(variants[variantName])) {
-        const variantStyle = variantStyles[variantName]?.[variantKey];
-        if (variantStyle && variantStyle.selectors) {
-          styles.push(variantStyle);
-        }
-      }
-    }
-    return run(...styles);
-  };
-  return pick;
-}
-function scanFileForStyles(filePath, optimizer, source = null) {
-  const errors = [];
-  let foundCount = 0;
-  try {
-    const content = source !== null ? source : fs2.readFileSync(filePath, "utf8");
-    if (!content || content.trim().length === 0) {
-      return { foundCount: 0, errors };
-    }
-    const styleRegex = /(?:chain|\$)\(((?:[^()]|\([^()]*\))*)\)/g;
-    let match;
-    while ((match = styleRegex.exec(content)) !== null) {
-      try {
-        const styleBody = match[1].trim();
-        const cleanBody = styleBody.replace(/^['"`]|['"`]$/g, "");
-        if (cleanBody) {
-          if (optimizer && typeof optimizer.trackStyles === "function") {
-            optimizer.trackStyles([{ selectors: { "&": cleanBody } }]);
-          }
-          foundCount++;
-        }
-      } catch (parseError) {
-        errors.push(parseError);
-        if (process.env.DEBUG) {
-          console.error(`[Scanner] Parse error in ${filePath}:`, parseError);
-        }
-      }
-    }
-    if (foundCount > 0 && process.env.DEBUG) {
-      console.log(chalk2.magenta(`[Scanner] Found ${foundCount} styles in ${filePath}`));
-    }
-  } catch (err) {
-    errors.push(err);
-    if (process.env.DEBUG) {
-      console.error(`[Scanner] Error processing ${filePath}:`, err);
-    }
-  }
-  return { foundCount, errors };
-}
 chains.initializeProperties().catch((err) => {
-  if (process.env.DEBUG) {
-    console.error("Failed to load CSS properties:", err.message);
-  }
+  if (process.env.DEBUG) console.error("Failed to load CSS properties:", err.message);
 });
 
 // src/compiler/atomic-optimizer.ts
@@ -6333,7 +6189,7 @@ var ChainCSSCompiler = class {
       if (oldest) {
         this.styleCache.delete(oldest);
         if (this.config.verbose) {
-          console.log(chalk3.gray(`  \u{1F9F9} Cache evicted: ${oldest.slice(0, 8)}...`));
+          console.log(chalk2.gray(`  \u{1F9F9} Cache evicted: ${oldest.slice(0, 8)}...`));
         }
       }
     }
@@ -6353,7 +6209,7 @@ var ChainCSSCompiler = class {
         console.log(`  \u2514\u2500 Processed ${processedCount} chain() styles from ${id.split("/").pop()}`);
       }
     } catch (error) {
-      console.error(chalk3.red(`  \u274C Error compiling source ${id}: ${error}`));
+      console.error(chalk2.red(`  \u274C Error compiling source ${id}: ${error}`));
     }
   }
   /**
@@ -6378,7 +6234,7 @@ var ChainCSSCompiler = class {
       }
     } catch (err) {
       if (this.config.verbose) {
-        console.warn(chalk3.yellow(`  \u26A0\uFE0F  Failed to parse style body: ${input.substring(0, 100)}...`));
+        console.warn(chalk2.yellow(`  \u26A0\uFE0F  Failed to parse style body: ${input.substring(0, 100)}...`));
       }
     }
     return {};
@@ -6587,7 +6443,7 @@ var ChainCSSCompiler = class {
       if (this.atomicOptimizer) this.atomicOptimizer.reset();
       this.accumulatedCSS = "";
       if (!this.config.silent) {
-        console.log(chalk3.blue("\n\u{1F50D} Phase 1: Scanning & Usage Analysis..."));
+        console.log(chalk2.blue("\n\u{1F50D} Phase 1: Scanning & Usage Analysis..."));
       }
       const BATCH_SIZE = PERFORMANCE.BATCH_SIZE || 10;
       const errors = [];
@@ -6612,7 +6468,7 @@ var ChainCSSCompiler = class {
             }
           } catch (err) {
             if (this.config.verbose) {
-              console.warn(chalk3.yellow(`  \u26A0\uFE0F  Scanning fallback for ${path5.basename(file)}`));
+              console.warn(chalk2.yellow(`  \u26A0\uFE0F  Scanning fallback for ${path5.basename(file)}`));
             }
             const result = scanFileForStyles(file, this.atomicOptimizer);
             if (result.errors.length > 0) {
@@ -6623,14 +6479,14 @@ var ChainCSSCompiler = class {
         });
         await Promise.allSettled(batchPromises);
         if (this.config.verbose && i % (BATCH_SIZE * 5) === 0) {
-          console.log(chalk3.gray(`  \u{1F4CA} Processed ${Math.min(i + BATCH_SIZE, components.length)}/${components.length} files`));
+          console.log(chalk2.gray(`  \u{1F4CA} Processed ${Math.min(i + BATCH_SIZE, components.length)}/${components.length} files`));
         }
       }
       if (errors.length > 0 && this.config.verbose) {
-        console.warn(chalk3.yellow(`  \u26A0\uFE0F  ${errors.length} scanning errors occurred`));
+        console.warn(chalk2.yellow(`  \u26A0\uFE0F  ${errors.length} scanning errors occurred`));
       }
       if (!this.config.silent) {
-        console.log(chalk3.blue("\n\u{1F3D7}\uFE0F  Phase 2: Generating Component Styles..."));
+        console.log(chalk2.blue("\n\u{1F3D7}\uFE0F  Phase 2: Generating Component Styles..."));
       }
       const publicDir = path5.resolve(process.cwd(), "public");
       const manifestDir = path5.resolve(process.cwd(), ".chaincss", "manifest");
@@ -6661,7 +6517,7 @@ var ChainCSSCompiler = class {
               const result = this.compileStyle(name, style);
               if (this.config.verbose) {
                 const className2 = Object.values(result.classMap)[0];
-                console.log(chalk3.gray(`   \u{1F4DD} ${name} \u2192 ${className2 || "(empty)"}`));
+                console.log(chalk2.gray(`   \u{1F4DD} ${name} \u2192 ${className2 || "(empty)"}`));
               }
               const className = Object.values(result.classMap)[0];
               if (className) {
@@ -6687,21 +6543,21 @@ var ChainCSSCompiler = class {
             }
             processedComponents++;
             if (this.config.verbose) {
-              console.log(chalk3.green(`   \u2728 ${baseName} \u2192 ${path5.relative(process.cwd(), classFilePath)}`));
+              console.log(chalk2.green(`   \u2728 ${baseName} \u2192 ${path5.relative(process.cwd(), classFilePath)}`));
             }
           }
         } catch (error) {
-          console.error(chalk3.red(`   \u274C Failed to process ${baseName}: ${error.message}`));
+          console.error(chalk2.red(`   \u274C Failed to process ${baseName}: ${error.message}`));
         }
       }
       if (!this.config.silent) {
-        console.log(chalk3.blue("\n\u{1F30D} Phase 3: Finalizing Global Assets..."));
+        console.log(chalk2.blue("\n\u{1F30D} Phase 3: Finalizing Global Assets..."));
       }
       const finalAtomicCSS = this.atomicOptimizer ? this.atomicOptimizer.generateAtomicCSS() : "";
       const globalCssPath = path5.join(publicDir, "global.css");
       fs6.writeFileSync(globalCssPath, formatCSS(finalAtomicCSS, this.config.output.minify));
       if (this.config.verbose) {
-        console.log(chalk3.blue(`   \u{1F4E6} Global CSS \u2192 ${path5.relative(process.cwd(), globalCssPath)} (${finalAtomicCSS.length} bytes)`));
+        console.log(chalk2.blue(`   \u{1F4E6} Global CSS \u2192 ${path5.relative(process.cwd(), globalCssPath)} (${finalAtomicCSS.length} bytes)`));
       }
       const manifestData = {
         version: VERSION,
@@ -6713,25 +6569,25 @@ var ChainCSSCompiler = class {
       const manifestPath = path5.join(manifestDir, "manifest.json");
       fs6.writeFileSync(manifestPath, JSON.stringify(manifestData, null, 2));
       if (this.config.verbose) {
-        console.log(chalk3.blue(`   \u{1F4E6} Manifest \u2192 ${path5.relative(process.cwd(), manifestPath)}`));
+        console.log(chalk2.blue(`   \u{1F4E6} Manifest \u2192 ${path5.relative(process.cwd(), manifestPath)}`));
       }
       if (!this.config.silent) {
-        console.log(chalk3.green(`
+        console.log(chalk2.green(`
 \u2705 Build Complete!`));
-        console.log(chalk3.gray(`   \u{1F4C1} Components processed: ${processedComponents}`));
-        console.log(chalk3.gray(`   \u{1F4C1} Class files generated: ${generatedClassFiles.length}`));
-        console.log(chalk3.gray(`   \u{1F4C1} Global CSS: ${path5.relative(process.cwd(), globalCssPath)}`));
-        console.log(chalk3.gray(`   \u{1F4C1} Manifest: ${path5.relative(process.cwd(), manifestPath)}`));
+        console.log(chalk2.gray(`   \u{1F4C1} Components processed: ${processedComponents}`));
+        console.log(chalk2.gray(`   \u{1F4C1} Class files generated: ${generatedClassFiles.length}`));
+        console.log(chalk2.gray(`   \u{1F4C1} Global CSS: ${path5.relative(process.cwd(), globalCssPath)}`));
+        console.log(chalk2.gray(`   \u{1F4C1} Manifest: ${path5.relative(process.cwd(), manifestPath)}`));
         if (this.atomicOptimizer) {
           const atomicCount = Object.keys(this.atomicOptimizer.atomicMap).length;
           const stats = this.atomicOptimizer.getStats();
-          console.log(chalk3.cyan(`
+          console.log(chalk2.cyan(`
 \u{1F4CA} Optimization Stats:`));
-          console.log(chalk3.gray(`   Atomic Rules: ${atomicCount}`));
-          console.log(chalk3.gray(`   Total Styles: ${stats.totalStyles}`));
-          console.log(chalk3.gray(`   Unique Properties: ${stats.uniqueProperties}`));
+          console.log(chalk2.gray(`   Atomic Rules: ${atomicCount}`));
+          console.log(chalk2.gray(`   Total Styles: ${stats.totalStyles}`));
+          console.log(chalk2.gray(`   Unique Properties: ${stats.uniqueProperties}`));
           if (stats.savings) {
-            console.log(chalk3.green(`   CSS Savings: ${stats.savings}`));
+            console.log(chalk2.green(`   CSS Savings: ${stats.savings}`));
           }
         }
       }