chaincss 2.1.38 → 2.2.0

package/dist/plugins/vite.js

@@ -1,7 +1,7 @@
 // src/core/compiler.ts
 import fs6 from "fs";
 import path5 from "path";
-import crypto4 from "crypto";
+import crypto5 from "crypto";
 import chalk from "chalk";
 import { fileURLToPath, pathToFileURL } from "url";
 
@@ -2530,6 +2530,425 @@ var PersistentCache = class {
   }
 };
 
+// src/compiler/style-graph.ts
+import crypto4 from "crypto";
+function calculateSpecificity(selector) {
+  let a = 0;
+  let b = 0;
+  let c = 0;
+  const idMatches = selector.match(/#[a-zA-Z0-9_-]+/g);
+  if (idMatches) a += idMatches.length;
+  const classMatches = selector.match(/\.[a-zA-Z0-9_-]+/g);
+  if (classMatches) b += classMatches.length;
+  const attrMatches = selector.match(/\[[^\]]+\]/g);
+  if (attrMatches) b += attrMatches.length;
+  const pseudoClassMatches = selector.match(/:[a-zA-Z-]+(?:\([^)]*\))?/g);
+  if (pseudoClassMatches) {
+    const notMatches = selector.match(/:not\(([^)]+)\)/g);
+    const regularPseudoClasses = pseudoClassMatches.length - (notMatches?.length || 0);
+    b += Math.max(0, regularPseudoClasses);
+  }
+  const elementMatches = selector.match(/^[a-zA-Z]+|[a-zA-Z]+(?=[.#[:])/g);
+  if (elementMatches) c += elementMatches.length;
+  return a * 1e4 + b * 100 + c;
+}
+function hashProperties(properties) {
+  const sorted = Object.entries(properties).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `${k}:${v}`).join(";");
+  return crypto4.createHash("md5").update(sorted).digest("hex").slice(0, 8);
+}
+function kebab2(prop) {
+  return prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+var StyleGraphBuilder = class {
+  entries = [];
+  nodes = /* @__PURE__ */ new Map();
+  edges = [];
+  orderCounter = 0;
+  addEntry(entry) {
+    entry.sourceOrder = this.orderCounter++;
+    this.entries.push(entry);
+  }
+  build() {
+    this.nodes.clear();
+    this.edges = [];
+    for (const entry of this.entries) {
+      const id = `node-${this.nodes.size}`;
+      const node = {
+        id,
+        selector: entry.selector,
+        properties: entry.properties,
+        specificity: calculateSpecificity(entry.selector),
+        dependencies: [],
+        dependents: [],
+        mediaQuery: entry.mediaQuery,
+        isDead: false,
+        hash: hashProperties(entry.properties),
+        sourceComponent: entry.sourceComponent
+      };
+      this.nodes.set(id, node);
+    }
+    const nodeArray = Array.from(this.nodes.values());
+    for (let i = 0; i < nodeArray.length; i++) {
+      for (let j = i + 1; j < nodeArray.length; j++) {
+        const a = nodeArray[i];
+        const b = nodeArray[j];
+        if (this.selectorsOverlap(a.selector, b.selector)) {
+          if (a.specificity <= b.specificity) {
+            this.edges.push({ from: a.id, to: b.id, type: "overrides" });
+            a.dependents.push(b.id);
+            b.dependencies.push(a.id);
+          }
+          if (b.specificity <= a.specificity) {
+            this.edges.push({ from: b.id, to: a.id, type: "overrides" });
+            b.dependents.push(a.id);
+            a.dependencies.push(b.id);
+          }
+        }
+      }
+    }
+    const rootNodes = nodeArray.filter((n) => n.dependencies.length === 0).map((n) => n.id);
+    const leafNodes = nodeArray.filter((n) => n.dependents.length === 0).map((n) => n.id);
+    return {
+      nodes: this.nodes,
+      edges: this.edges,
+      rootNodes,
+      leafNodes
+    };
+  }
+  selectorsOverlap(a, b) {
+    const partsA = a.split(/[\s>+~]+/).filter(Boolean);
+    const partsB = b.split(/[\s>+~]+/).filter(Boolean);
+    for (const pa of partsA) {
+      for (const pb of partsB) {
+        if (pa === pb) return true;
+        if (pa.startsWith(".") && pb.startsWith(".") && pa === pb) return true;
+      }
+    }
+    return false;
+  }
+};
+function eliminateDeadStyles(graph, knownSelectors) {
+  if (knownSelectors.length === 0) {
+    return { eliminated: 0, graph };
+  }
+  const reachable = /* @__PURE__ */ new Set();
+  const queue = [];
+  for (const [id, node] of graph.nodes) {
+    if (knownSelectors.some((ks) => node.selector.includes(ks) || ks.includes(node.selector))) {
+      reachable.add(id);
+      queue.push(id);
+    }
+  }
+  while (queue.length > 0) {
+    const current = queue.shift();
+    const node = graph.nodes.get(current);
+    if (!node) continue;
+    for (const depId of node.dependents) {
+      if (!reachable.has(depId)) {
+        reachable.add(depId);
+        queue.push(depId);
+      }
+    }
+  }
+  let eliminated = 0;
+  for (const [id, node] of graph.nodes) {
+    if (!reachable.has(id)) {
+      node.isDead = true;
+      eliminated++;
+    }
+  }
+  return { eliminated, graph };
+}
+function mergeIdenticalRules(graph, threshold) {
+  const hashGroups = /* @__PURE__ */ new Map();
+  for (const [, node] of graph.nodes) {
+    if (node.isDead) continue;
+    if (Object.keys(node.properties).length < threshold) continue;
+    const existing = hashGroups.get(node.hash) || [];
+    existing.push(node);
+    hashGroups.set(node.hash, existing);
+  }
+  let merged = 0;
+  for (const [, group] of hashGroups) {
+    if (group.length < 2) continue;
+    const mergedSelector = group.map((n) => n.selector).join(", ");
+    const primary = group[0];
+    primary.selector = mergedSelector;
+    for (let i = 1; i < group.length; i++) {
+      group[i].isDead = true;
+      merged++;
+    }
+  }
+  return { merged, graph };
+}
+function topologicalSort(graph) {
+  const visited = /* @__PURE__ */ new Set();
+  const sorted = [];
+  const visiting = /* @__PURE__ */ new Set();
+  function visit(id) {
+    if (visited.has(id)) return true;
+    if (visiting.has(id)) return false;
+    visiting.add(id);
+    const node = graph.nodes.get(id);
+    if (node) {
+      for (const depId of node.dependencies) {
+        if (!visit(depId)) return false;
+      }
+    }
+    visiting.delete(id);
+    visited.add(id);
+    if (node && !node.isDead) {
+      sorted.push(node);
+    }
+    return true;
+  }
+  for (const id of graph.rootNodes) {
+    if (!visit(id)) {
+      return Array.from(graph.nodes.values()).filter((n) => !n.isDead).sort((a, b) => a.sourceComponent?.localeCompare(b.sourceComponent || "") || 0);
+    }
+  }
+  for (const [id] of graph.nodes) {
+    if (!visited.has(id)) {
+      visit(id);
+    }
+  }
+  return sorted;
+}
+function generateCSSFromGraph(graph, sortOutput = "specificity") {
+  let nodes;
+  switch (sortOutput) {
+    case "specificity":
+      nodes = Array.from(graph.nodes.values()).filter((n) => !n.isDead).sort((a, b) => a.specificity - b.specificity);
+      break;
+    case "topological":
+      nodes = topologicalSort(graph);
+      break;
+    case "source-order":
+    default:
+      nodes = Array.from(graph.nodes.values()).filter((n) => !n.isDead);
+      break;
+  }
+  let css = "";
+  let currentMediaQuery;
+  for (const node of nodes) {
+    if (node.isDead) continue;
+    if (node.mediaQuery !== currentMediaQuery) {
+      if (currentMediaQuery) {
+        css += "}\n\n";
+      }
+      if (node.mediaQuery) {
+        css += `@media ${node.mediaQuery} {
+`;
+      }
+      currentMediaQuery = node.mediaQuery;
+    }
+    const rules = Object.entries(node.properties).map(([prop, value]) => `  ${kebab2(prop)}: ${value};`).join("\n");
+    if (rules) {
+      css += `${node.selector} {
+${rules}
+}
+`;
+    }
+  }
+  if (currentMediaQuery) {
+    css += "}\n";
+  }
+  return css;
+}
+var StyleGraphCompiler = class {
+  options;
+  constructor(options = {}) {
+    this.options = {
+      eliminateDead: options.eliminateDead ?? false,
+      knownSelectors: options.knownSelectors ?? [],
+      mergeIdentical: options.mergeIdentical ?? false,
+      mergeThreshold: options.mergeThreshold ?? 3,
+      sortOutput: options.sortOutput ?? "specificity",
+      verbose: options.verbose ?? false
+    };
+  }
+  /**
+   * Compile a set of style definitions through the graph compiler.
+   */
+  compile(styles) {
+    const startTime = Date.now();
+    const builder = new StyleGraphBuilder();
+    let preOptimizationSize = 0;
+    for (const [componentName, styleDef] of Object.entries(styles)) {
+      if (!styleDef || !styleDef.selectors) continue;
+      for (const selector of styleDef.selectors) {
+        const properties = {};
+        for (const [prop, value] of Object.entries(styleDef)) {
+          if (prop === "selectors" || prop === "atRules" || prop === "nestedRules" || prop === "hover" || prop === "themes" || prop.startsWith("_")) {
+            continue;
+          }
+          if (typeof value === "string" || typeof value === "number") {
+            properties[prop] = String(value);
+            preOptimizationSize += String(value).length + prop.length;
+          }
+        }
+        if (Object.keys(properties).length > 0) {
+          builder.addEntry({
+            selector,
+            properties,
+            sourceComponent: componentName,
+            sourceOrder: 0
+          });
+        }
+        if (styleDef.hover && typeof styleDef.hover === "object") {
+          const hoverProperties = {};
+          for (const [prop, value] of Object.entries(styleDef.hover)) {
+            if (typeof value === "string" || typeof value === "number") {
+              hoverProperties[prop] = String(value);
+            }
+          }
+          if (Object.keys(hoverProperties).length > 0) {
+            builder.addEntry({
+              selector: `${selector}:hover`,
+              properties: hoverProperties,
+              sourceComponent: componentName,
+              sourceOrder: 0
+            });
+          }
+        }
+        if (styleDef.atRules) {
+          for (const rule of styleDef.atRules) {
+            if (rule.type === "media" && rule.styles && rule.query) {
+              const mediaProperties = {};
+              for (const [prop, value] of Object.entries(rule.styles)) {
+                if (typeof value === "string" || typeof value === "number") {
+                  mediaProperties[prop] = String(value);
+                }
+              }
+              if (Object.keys(mediaProperties).length > 0) {
+                builder.addEntry({
+                  selector,
+                  properties: mediaProperties,
+                  sourceComponent: componentName,
+                  sourceOrder: 0,
+                  mediaQuery: rule.query
+                });
+              }
+            }
+          }
+        }
+      }
+    }
+    let graph = builder.build();
+    let eliminatedDead = 0;
+    if (this.options.eliminateDead && this.options.knownSelectors.length > 0) {
+      const result = eliminateDeadStyles(graph, this.options.knownSelectors);
+      eliminatedDead = result.eliminated;
+      graph = result.graph;
+    }
+    let mergedRules = 0;
+    if (this.options.mergeIdentical) {
+      const result = mergeIdenticalRules(graph, this.options.mergeThreshold);
+      mergedRules = result.merged;
+      graph = result.graph;
+    }
+    const css = generateCSSFromGraph(graph, this.options.sortOutput);
+    let postOptimizationSize = css.length;
+    if (postOptimizationSize === 0) {
+      postOptimizationSize = preOptimizationSize;
+    }
+    const classMap = {};
+    for (const [, node] of graph.nodes) {
+      if (!node.isDead && node.sourceComponent) {
+        if (classMap[node.sourceComponent]) {
+          classMap[node.sourceComponent] += ` ${node.selector.replace(/^\./, "")}`;
+        } else {
+          classMap[node.sourceComponent] = node.selector.replace(/^\./, "");
+        }
+      }
+    }
+    const totalNodes = graph.nodes.size;
+    const aliveNodes = totalNodes - eliminatedDead;
+    const savingsPercent = preOptimizationSize > 0 ? `${((preOptimizationSize - postOptimizationSize) / preOptimizationSize * 100).toFixed(1)}%` : "0%";
+    const stats = {
+      totalStyles: totalNodes,
+      atomicStyles: 0,
+      uniqueProperties: new Set(
+        Array.from(graph.nodes.values()).filter((n) => !n.isDead).flatMap((n) => Object.keys(n.properties))
+      ).size,
+      savings: savingsPercent,
+      compileTime: Date.now() - startTime
+    };
+    return {
+      css,
+      classMap,
+      atomicClasses: [],
+      stats,
+      graph,
+      eliminatedDead,
+      mergedRules,
+      optimizationTime: Date.now() - startTime,
+      preOptimizationSize,
+      postOptimizationSize
+    };
+  }
+  /**
+   * Analyze a style graph without generating CSS.
+   */
+  analyze(styles) {
+    const builder = new StyleGraphBuilder();
+    for (const [componentName, styleDef] of Object.entries(styles)) {
+      if (!styleDef || !styleDef.selectors) continue;
+      for (const selector of styleDef.selectors) {
+        const properties = {};
+        for (const [prop, value] of Object.entries(styleDef)) {
+          if (prop === "selectors" || prop.startsWith("_")) continue;
+          if (typeof value === "string" || typeof value === "number") {
+            properties[prop] = String(value);
+          }
+        }
+        if (Object.keys(properties).length > 0) {
+          builder.addEntry({ selector, properties, sourceComponent: componentName, sourceOrder: 0 });
+        }
+      }
+    }
+    return builder.build();
+  }
+  /**
+   * Get optimization statistics for a graph.
+   */
+  getStats(graph) {
+    const nodes = Array.from(graph.nodes.values());
+    const deadNodes = nodes.filter((n) => n.isDead).length;
+    const averageSpecificity = nodes.length > 0 ? nodes.reduce((sum, n) => sum + n.specificity, 0) / nodes.length : 0;
+    let maxDepth = 0;
+    const depths = /* @__PURE__ */ new Map();
+    function getDepth(id) {
+      if (depths.has(id)) return depths.get(id);
+      const node = graph.nodes.get(id);
+      if (!node || node.dependencies.length === 0) {
+        depths.set(id, 0);
+        return 0;
+      }
+      const max = Math.max(...node.dependencies.map((d) => getDepth(d)));
+      const depth = max + 1;
+      depths.set(id, depth);
+      return depth;
+    }
+    for (const [id] of graph.nodes) {
+      maxDepth = Math.max(maxDepth, getDepth(id));
+    }
+    return {
+      totalNodes: nodes.length,
+      deadNodes,
+      mergedGroups: 0,
+      averageSpecificity: Math.round(averageSpecificity * 100) / 100,
+      deepestDependencyChain: maxDepth
+    };
+  }
+  /**
+   * Update options.
+   */
+  configure(options) {
+    this.options = { ...this.options, ...options };
+  }
+};
+
 // src/core/compiler.ts
 var __filename = typeof import.meta !== "undefined" ? (() => {
   try {
@@ -2581,6 +3000,35 @@ var ChainCSSCompiler = class {
     this.initOptimizer();
     this.initPrefixer();
   }
+  /**
+  * Compile using the style graph compiler for advanced optimizations.
+  * 
+  * @example
+  * const result = compiler.compileWithGraph(styles, { 
+  *   eliminateDead: true, 
+  *   knownSelectors: ['.header', '.footer'],
+  *   mergeIdentical: true 
+  * });
+  */
+  compileWithGraph(styles, options) {
+    const graphCompiler = new StyleGraphCompiler({
+      ...options,
+      verbose: this.config.verbose
+    });
+    const result = graphCompiler.compile(styles);
+    if (this.config.verbose) {
+      if (result.eliminatedDead > 0) {
+        console.log(`  \u{1F9F9} Eliminated ${result.eliminatedDead} dead styles`);
+      }
+      if (result.mergedRules > 0) {
+        console.log(`  \u{1F517} Merged ${result.mergedRules} identical rules`);
+      }
+      if (result.optimizationTime > 0) {
+        console.log(`  \u26A1 Graph compilation: ${result.optimizationTime}ms`);
+      }
+    }
+    return result;
+  }
   hasStyles() {
     const combined = this.getCombinedCSS();
     return !!(combined && combined.trim().length > 0);
@@ -2618,7 +3066,7 @@ var ChainCSSCompiler = class {
     if (result.css && result.css.trim()) {
       this.accumulatedCSS += result.css + "\n";
     }
-    const cacheKey = crypto4.createHash("sha256").update(`${componentName}-${JSON.stringify(styleObj)}`).digest("hex").slice(0, 16);
+    const cacheKey = crypto5.createHash("sha256").update(`${componentName}-${JSON.stringify(styleObj)}`).digest("hex").slice(0, 16);
     this.addToCache(cacheKey, {
       result: {
         css: result.css || "",
@@ -2746,7 +3194,7 @@ var ChainCSSCompiler = class {
   // ============================================================================
   hashStyleDef(styleDef) {
     const { _componentName, _generateComponent, _framework, _propsDefinition, ...relevant } = styleDef;
-    return crypto4.createHash("sha256").update(JSON.stringify(relevant)).digest("hex").slice(0, 16);
+    return crypto5.createHash("sha256").update(JSON.stringify(relevant)).digest("hex").slice(0, 16);
   }
   async importModule(filePath) {
     const absolutePath = path5.resolve(filePath);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chaincss",
-  "version": "2.1.38",
+  "version": "2.2.0",
   "description": "ChainCSS - The first CSS-in-JS library with true auto-detection mixed mode. Zero runtime by default, dynamic when you need it.",
   "type": "module",
   "main": "./dist/index.js",

package/src/compiler/analyzer.ts

@@ -0,0 +1,62 @@
+// src/compiler/analyzer.ts
+import type { StyleDefinition, StyleDiagnostic, StyleAnalysis, BreakpointInference, DiagnosticSeverity } from '../core/types.js';
+import { intent } from './intent-engine.js';
+export type { StyleDiagnostic, StyleAnalysis, BreakpointInference, DiagnosticSeverity };
+
+const CONFLICTS: Array<{props: string[]; msg: string; sev: DiagnosticSeverity}> = [
+  {props: ['position','z-index','zIndex'], msg: 'z-index only works on positioned elements (not static)', sev: 'warning'},
+  {props: ['flex-direction','align-items','justify-content'], msg: 'Flex properties require display: flex', sev: 'warning'},
+  {props: ['grid-template-columns','grid-template-rows'], msg: 'Grid properties require display: grid', sev: 'warning'},
+  {props: ['overflow','overflow-x','overflow-y'], msg: 'Consider using the overflow shorthand', sev: 'hint'},
+];
+
+function detectShorthands(styles: Record<string,any>): StyleDiagnostic[] {
+  const d: StyleDiagnostic[] = [];
+  const m = ['margin-top','margin-right','margin-bottom','margin-left'].filter(p => p in styles);
+  if (m.length >= 3) d.push({property: 'margin', severity: 'hint', message: 'Use "margin" shorthand instead of: ' + m.join(', '), suggestion: 'margin'});
+  return d;
+}
+
+export class StyleAnalyzer {
+  private _diagnostics: StyleDiagnostic[] = [];
+  analyzeStyle(selector: string, styles: Record<string,any>, _opts?: any): StyleDiagnostic[] {
+    const r: StyleDiagnostic[] = [];
+    for (const [p, v] of Object.entries(styles)) {
+      if (p === 'selectors' || p.startsWith('_') || typeof v === 'object') continue;
+      const val = intent.validate(p, String(v));
+      if (!val.valid) r.push({property: p, value: String(v), selector, severity: 'warning', message: `"${v}" unrecognized for "${p}"`, suggestion: val.suggestion});
+    }
+    r.push(...detectShorthands(styles)); this._diagnostics.push(...r);
+    const sp = Object.keys(styles).filter(k => typeof styles[k] !== 'object');
+    for (const c of CONFLICTS) {
+      const ix = c.props.filter(k => sp.includes(k));
+      if (ix.length >= 2) r.push({property: c.props.join(', '), selector, severity: c.sev, message: c.msg});
+    }
+    return r;
+  }
+
+  analyze(sd: StyleDefinition): StyleAnalysis {
+    const ad: StyleDiagnostic[] = [];
+    const sels = sd.selectors || ['&'];
+    for (const s of sels) ad.push(...this.analyzeStyle(s, sd));
+    if (sd.hover && typeof sd.hover === 'object') for (const s of sels) ad.push(...this.analyzeStyle(s + ':hover', sd.hover as Record<string,any>));
+    return {
+      diagnostics: ad, conflicts: [],
+      breakpoints: [], unusedSelectors: [], deadStyles: [], duplicationWarnings: [], optimizationSuggestions: [],
+      stats: {
+        totalProperties: Object.keys(sd).filter(k => !['selectors','atRules','nestedRules','hover','themes'].includes(k) && !k.startsWith('_')).length,
+        totalSelectors: sels.length,
+        shorthandOpportunities: ad.filter(d => d.message.includes('shorthand')).length,
+        animationSuggestions: 0,
+        responsiveIssues: 0,
+      },
+    };
+  }
+
+  reset(): void { this._diagnostics = []; }
+  getDiagnostics(): StyleDiagnostic[] { return [...this._diagnostics]; }
+}
+
+export function analyze(sd: StyleDefinition): StyleAnalysis { return new StyleAnalyzer().analyze(sd); }
+export function analyzeStyle(sd: StyleDefinition): StyleAnalysis { return new StyleAnalyzer().analyze(sd); }
+export default StyleAnalyzer;

package/src/compiler/css-if-transpiler.ts

@@ -0,0 +1,117 @@
+// src/compiler/css-if-transpiler.ts
+/**
+ * CSS if() Transpiler
+ * Detects conditional style patterns and emits:
+ *   1. Native CSS if() — Chrome 137+
+ *   2. @supports fallback — Firefox, Safari
+ */
+
+export interface IfCondition {
+  property: string;
+  variable: string;
+  conditions: Record<string, string | number>;
+  defaultValue: string | number;
+}
+
+export interface DetectedCondition {
+  property: string;
+  variable: string;
+  conditions: Record<string, string | number>;
+  defaultValue: string | number;
+}
+
+/**
+ * Detect conditional patterns from _conditions metadata.
+ * When chain.when() branches set the same property to different values,
+ * those can be compiled to CSS if().
+ */
+export function detectIfPatterns(
+  styles: Record<string, any>
+): DetectedCondition[] {
+  const conditions: DetectedCondition[] = [];
+  if (!styles._conditions) return conditions;
+
+  const condEntries = Object.entries(styles._conditions || {});
+  for (const [variable, branches] of condEntries) {
+    const branch = branches as { true: Record<string, any>; false: Record<string, any> };
+    const trueStyles = branch.true || {};
+    const falseStyles = branch.false || {};
+
+    const allProps = new Set([...Object.keys(trueStyles), ...Object.keys(falseStyles)]);
+    for (const prop of allProps) {
+      if (prop.startsWith('_') || prop === 'selectors') continue;
+      const trueVal = trueStyles[prop];
+      const falseVal = falseStyles[prop];
+      if (trueVal !== undefined && falseVal !== undefined && trueVal !== falseVal) {
+        conditions.push({
+          property: prop,
+          variable: variable.startsWith('--') ? variable : '--' + variable,
+          conditions: { true: trueVal },
+          defaultValue: falseVal,
+        });
+      }
+    }
+  }
+  return conditions;
+}
+
+/**
+ * Generate CSS if() output for detected conditions.
+ */
+export function emitCSSIf(
+  selector: string,
+  detectedConditions: DetectedCondition[],
+  baseProperties: Record<string, string | number> = {}
+): string {
+  if (detectedConditions.length === 0) return '';
+
+  let css = '';
+
+  // Native CSS if() block
+  css += '/* Native CSS if() — Chrome 137+ */\n';
+  css += selector + ' {\n';
+  for (const [prop, value] of Object.entries(baseProperties)) {
+    css += '  ' + prop + ': ' + value + ';\n';
+  }
+  for (const cond of detectedConditions) {
+    const entries = Object.entries(cond.conditions);
+    if (entries.length === 1) {
+      const [condition, val] = entries[0];
+      css += '  ' + cond.property + ': if(style(' + cond.variable + ': ' + condition + '): ' + val + ' else ' + cond.defaultValue + ');\n';
+    } else {
+      let chain = '';
+      for (let i = 0; i < entries.length; i++) {
+        const [condition, val] = entries[i];
+        chain += i === 0
+          ? 'if(style(' + cond.variable + ': ' + condition + '): ' + val
+          : ' else if(style(' + cond.variable + ': ' + condition + '): ' + val;
+      }
+      chain += ' else ' + cond.defaultValue + ')'.repeat(entries.length);
+      css += '  ' + cond.property + ': ' + chain + ';\n';
+    }
+  }
+  css += '}\n\n';
+
+  // @supports fallback
+  css += '/* Fallback for browsers without CSS if() */\n';
+  css += '@supports not (property: if()) {\n';
+  css += '  ' + selector + ' {\n';
+  for (const [prop, value] of Object.entries(baseProperties)) {
+    css += '    ' + prop + ': ' + value + ';\n';
+  }
+  for (const cond of detectedConditions) {
+    css += '    ' + cond.property + ': ' + cond.defaultValue + ';\n';
+  }
+  css += '  }\n';
+  for (const cond of detectedConditions) {
+    for (const [condition, val] of Object.entries(cond.conditions)) {
+      const modClass = selector + '--' + cond.variable.replace('--', '') + '-' + condition;
+      css += '  ' + modClass + ' { ' + cond.property + ': ' + val + '; }\n';
+    }
+  }
+  css += '}\n';
+
+  return css;
+}
+
+export default { detectIfPatterns, emitCSSIf };