tailwind-styled-v4 5.0.34 → 5.0.36

package/dist/index.mjs

@@ -1589,6 +1589,56 @@ var init_streamingNative = __esm({
     init_nativeBridge();
   }
 });
+function loadTailwindEngine() {
+  if (_twEngine) return _twEngine;
+  if (_twEngineError) throw _twEngineError;
+  try {
+    const tw2 = require2("tailwindcss");
+    if (typeof tw2.compile !== "function") {
+      throw new Error("tailwindcss v4 not found \u2014 compile() API missing. Check tailwindcss version >= 4.");
+    }
+    _twEngine = tw2;
+    return _twEngine;
+  } catch (e) {
+    _twEngineError = e instanceof Error ? e : new Error(String(e));
+    throw _twEngineError;
+  }
+}
+async function generateRawCss(classes, cssEntryContent, root) {
+  if (classes.length === 0) return "";
+  const tw2 = loadTailwindEngine();
+  const input = cssEntryContent ?? "@import 'tailwindcss';";
+  const { readFileSync, existsSync: existsSync3 } = await import('fs');
+  const { dirname: dirname2, resolve: resolve2 } = await import('path');
+  const projectRoot = root ?? process.cwd();
+  const req = createRequire(resolve2(projectRoot, "package.json"));
+  const loadStylesheet = async (id, base) => {
+    try {
+      const cssId = id === "tailwindcss" ? "tailwindcss/index.css" : id === "tailwindcss/preflight" ? "tailwindcss/preflight.css" : id === "tailwindcss/utilities" ? "tailwindcss/utilities.css" : id === "tailwindcss/theme" ? "tailwindcss/theme.css" : id;
+      const pkgPath = req.resolve(cssId);
+      return { content: readFileSync(pkgPath, "utf-8"), base: dirname2(pkgPath) };
+    } catch {
+      try {
+        const absPath = resolve2(base, id);
+        if (existsSync3(absPath)) {
+          return { content: readFileSync(absPath, "utf-8"), base: dirname2(absPath) };
+        }
+      } catch {
+      }
+      return { content: "", base };
+    }
+  };
+  const compiler = await Promise.resolve(tw2.compile(input, { loadStylesheet }));
+  return compiler.build(classes);
+}
+var require2, _twEngine, _twEngineError;
+var init_tailwindEngine = __esm({
+  "packages/domain/compiler/src/tailwindEngine.ts"() {
+    require2 = createRequire(import.meta.url);
+    _twEngine = null;
+    _twEngineError = null;
+  }
+});
 
 // packages/domain/compiler/src/compiler/tailwindEngine.ts
 var tailwindEngine_exports = {};
@@ -1722,10 +1772,11 @@ async function runCssPipeline(classes, cssEntryContent, root, minify = true, min
   }
   _cacheMisses++;
   let rawCss;
-  let usedRustCompiler = false;
-  const theme = getThemeConfig();
-  rawCss = await generateCssNative(unique, { theme });
-  usedRustCompiler = true;
+  try {
+    rawCss = await generateRawCss(unique, cssEntryContent, root);
+  } catch {
+    rawCss = await generateCssNative(unique, { theme: getThemeConfig() });
+  }
   let finalCss = rawCss;
   if (minify) {
     if (minifier === "fast") {
@@ -1736,7 +1787,7 @@ async function runCssPipeline(classes, cssEntryContent, root, minify = true, min
   }
   if (process.env.DEBUG?.includes("compiler")) {
     console.log(
-      `[Compiler] Generated CSS from ${unique.length} classes (${usedRustCompiler ? "Rust" : "JavaScript"})`,
+      `[Compiler] Generated CSS from ${unique.length} classes`,
       `Size: ${finalCss.length} bytes`
     );
   }
@@ -1765,11 +1816,12 @@ function processTailwindCssWithTargets(css, targets) {
   return result.css;
 }
 var _cssCache, _cacheHits, _cacheMisses, MAX_CACHE_SIZE;
-var init_tailwindEngine = __esm({
+var init_tailwindEngine2 = __esm({
   "packages/domain/compiler/src/compiler/tailwindEngine.ts"() {
     init_nativeBridge();
     init_cssGeneratorNative();
     init_cssCompilationNative();
+    init_tailwindEngine();
     createRequire(import.meta.url);
     _cssCache = /* @__PURE__ */ new Map();
     _cacheHits = 0;
@@ -2807,7 +2859,7 @@ var init_src = __esm({
     };
     generateCssForClasses = async (classes, _tailwindConfig, root, cssEntryContent, minify = false) => {
       try {
-        const { runCssPipeline: runCssPipeline2 } = await Promise.resolve().then(() => (init_tailwindEngine(), tailwindEngine_exports));
+        const { runCssPipeline: runCssPipeline2 } = await Promise.resolve().then(() => (init_tailwindEngine2(), tailwindEngine_exports));
         const result = await runCssPipeline2(classes, cssEntryContent, root, minify);
         return result.css;
       } catch {
@@ -3317,7 +3369,7 @@ __export(internal_exports, {
 var init_internal = __esm({
   "packages/domain/compiler/src/internal.ts"() {
     init_src();
-    init_tailwindEngine();
+    init_tailwindEngine2();
     init_compiler();
     init_parser();
     init_analyzer();
@@ -5151,17 +5203,12 @@ function hashState(tag, state) {
   _hashStateCache.set(sortedKey, id);
   return id;
 }
-var _twClassesToCssCache = /* @__PURE__ */ new Map();
-function twClassesToCss(classes) {
-  const cached = _twClassesToCssCache.get(classes);
-  if (cached !== void 0) return cached;
+function generateStateRules(id, state) {
   const native = getNativeBinding();
-  if (!native?.twClassesToCss) {
-    throw new Error("FATAL: Native binding 'twClassesToCss' is required but not available.");
+  if (!native?.generateRuntimeStateCss) {
+    throw new Error("FATAL: Native binding 'generateRuntimeStateCss' is required but not available.");
   }
-  const result = native.twClassesToCss(classes);
-  _twClassesToCssCache.set(classes, result);
-  return result;
+  return native.generateRuntimeStateCss(id, JSON.stringify(state), null).map((rule) => rule.cssRule);
 }
 var _staticCssDetected = /* @__PURE__ */ new Set();
 var _batchedInjectFn = null;
@@ -5193,10 +5240,7 @@ function injectStateStyles(id, state) {
       }
     }
   }
-  const rules = Object.entries(state).map(([stateName, classes]) => {
-    const css = twClassesToCss(classes);
-    return css ? `.${id}[data-${stateName}="true"]{${css}}` : null;
-  }).filter(Boolean);
+  const rules = generateStateRules(id, state);
   if (rules.length === 0) return;
   if (_batchedInjectFn) {
     for (const rule of rules) _batchedInjectFn(rule);
@@ -5226,11 +5270,7 @@ function processState(tag, state, precomputedHash) {
 }
 function generateStateCss(tag, state) {
   const id = hashState(tag, state);
-  const rules = Object.entries(state).map(([stateName, classes]) => {
-    const css = twClassesToCss(classes);
-    return css ? `.${id}[data-${stateName}="true"]{${css}}` : null;
-  }).filter(Boolean);
-  return rules.join("\n");
+  return generateStateRules(id, state).join("\n");
 }
 function getStateRegistry() {
   return stateRegistry;
@@ -5635,7 +5675,13 @@ function lookupGenerated(componentId, props, defaultVariants, variantKeys) {
   }
   const binding = getNativeBinding();
   if (!binding?.buildVariantLookupKey) {
-    throw new Error("FATAL: Native binding 'buildVariantLookupKey' is required but not available.");
+    const parts = [];
+    for (const k of sortedKeys) {
+      const v = props[k] ?? defaultVariants?.[k];
+      if (v != null) parts.push(`${k}:${String(v)}`);
+    }
+    const key2 = parts.join("|");
+    return table[key2];
   }
   const relevantDefaults = {};
   const relevantProps = {};
@@ -5678,7 +5724,31 @@ function resolveVariantsNative(config, props) {
   const { variants = {}, defaultVariants = {} } = config;
   const binding = getNativeBinding();
   if (!binding?.resolveVariants) {
-    throw new Error("FATAL: Native binding 'resolveVariants' is required but not available. Build cannot continue.");
+    const variantKeys2 = Object.keys(variants);
+    const classes = [];
+    for (const key of variantKeys2) {
+      const value = props[key] ?? defaultVariants[key];
+      if (value != null) {
+        const variantClass = variants[key]?.[String(value)];
+        if (variantClass) classes.push(variantClass);
+      }
+    }
+    if (config.compoundVariants) {
+      for (const compound of config.compoundVariants) {
+        const { class: compoundClass, ...conditions } = compound;
+        const resolved = {};
+        for (const key of variantKeys2) {
+          resolved[key] = String(
+            props[key] ?? defaultVariants[key] ?? ""
+          );
+        }
+        const matches = Object.entries(conditions).every(
+          ([k, v]) => resolved[k] === v
+        );
+        if (matches) classes.push(compoundClass);
+      }
+    }
+    return classes.join(" ");
   }
   const variantKeys = Object.keys(variants);
   const configJson = _getConfigJson(config);