chaincss 2.1.29 → 2.1.31

package/dist/compiler/index.js

@@ -1,6 +1,5 @@
 // src/compiler/btt.ts
 import https from "https";
-import chalk2 from "chalk";
 
 // src/compiler/tokens.ts
 var defaultTokens = {
@@ -2801,7 +2800,7 @@ function createChain(useTokens = true) {
 }
 var chain = (useTokens = true) => createChain(useTokens);
 
-// src/compiler/btt.ts
+// src/compiler/timeline.ts
 var styleHistory = [];
 var styleChanges = [];
 var timelineEnabled = false;
@@ -2814,10 +2813,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);
@@ -2825,19 +2824,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)) {
@@ -2853,22 +2845,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,
@@ -2876,26 +2859,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"
         });
@@ -2905,31 +2888,128 @@ 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/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;
 }
@@ -2966,9 +3046,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;
@@ -2982,14 +3060,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_PROPERTIES;
     return chains.cachedValidProperties;
   }
@@ -3000,11 +3073,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;
@@ -3015,9 +3085,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) {
@@ -3032,21 +3100,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}  }
 `;
         }
       }
@@ -3059,11 +3119,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";
       }
@@ -3072,23 +3129,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 = [];
@@ -3099,77 +3150,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) => {
@@ -3180,25 +3201,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");
     }
@@ -3208,41 +3224,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)) {
@@ -3253,25 +3253,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]};
+          let tc = "";
+          for (const tp in theme.styles) {
+            if (tp === "selectors") continue;
+            tc += `  ${tp.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${theme.styles[tp]};
 `;
           }
-          if (themeCSS) {
-            let block = `${theme.styles.selectors?.join(", ") || element.selectors.join(", ")} {
-${themeCSS}}
-`;
-            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;
@@ -3279,137 +3275,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;
-}
 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