tailwind-styled-v4 5.1.10 → 5.1.12

package/dist/index.d.mts

@@ -288,15 +288,45 @@ interface ThemeConfig$1 {
 
 /**
  * tailwind-styled-v4 — createTwMerge()
- * Pure Node.js — requires native Rust binding.
+ *
+ * Native Rust binding (twMergeRaw) is used when available (Node.js, build
+ * time, SSR) for maximum performance/parity with the rest of the pipeline.
+ *
+ * Browser fallback (Bug C — "Uncaught Error: Native binding 'twMergeRaw' is
+ * required but not available." crashing in the browser):
+ *
+ * createComponent.ts calls twMerge() unconditionally inside the React render
+ * function for EVERY tw.* component, on EVERY render — including the very
+ * first client-side render of any component that runs/re-renders in the
+ * browser. A `.node` native addon can never load inside a browser JS engine,
+ * so this isn't a rare edge case, it's unconditional: any tw.* component
+ * rendering client-side needs a working fallback path.
+ *
+ * getNativeBinding() returns `null` (not a throw) when running in the
+ * browser — see native.ts. When that happens we use mergeFallback.ts, a
+ * hand-written pure-TS port of the SAME algorithm as `tw_merge_raw` in
+ * tw_merge.rs (conflict_group / split_variants / merge_class_string),
+ * instead of the third-party `tailwind-merge` package. This keeps merge
+ * behavior defined by one algorithm — ours — rather than risking the
+ * browser and the server silently disagreeing on merged className output
+ * because two different implementations drifted apart. The cost: when
+ * tw_merge.rs's conflict_group() changes, mergeFallback.ts must be updated
+ * by hand to match (see comments there).
  */
 
 interface MergeOptions {
+    /**
+     * NOTE: not currently applied — matches the native path, which calls
+     * `native.twMergeRaw(inputs)` without ever forwarding a prefix either.
+     * Kept on the type for API stability; wire it through conflictGroup()
+     * in mergeFallback.ts (and tw_merge_raw on the Rust side) together if a
+     * custom Tailwind prefix needs to be supported correctly end-to-end.
+     */
     prefix?: string;
     separator?: string;
     theme?: ThemeConfig$1;
 }
-declare function createTwMerge(_options?: MergeOptions): (...classLists: Array<string | undefined | null | false>) => string;
+declare function createTwMerge(options?: MergeOptions): (...classLists: Array<string | undefined | null | false>) => string;
 declare const twMerge: (...classLists: Array<string | undefined | null | false>) => string;
 declare function mergeWithRules(rules: Record<string, (classes: string[]) => string>, ...classLists: string[]): string;
 

package/dist/index.d.ts

@@ -288,15 +288,45 @@ interface ThemeConfig$1 {
 
 /**
  * tailwind-styled-v4 — createTwMerge()
- * Pure Node.js — requires native Rust binding.
+ *
+ * Native Rust binding (twMergeRaw) is used when available (Node.js, build
+ * time, SSR) for maximum performance/parity with the rest of the pipeline.
+ *
+ * Browser fallback (Bug C — "Uncaught Error: Native binding 'twMergeRaw' is
+ * required but not available." crashing in the browser):
+ *
+ * createComponent.ts calls twMerge() unconditionally inside the React render
+ * function for EVERY tw.* component, on EVERY render — including the very
+ * first client-side render of any component that runs/re-renders in the
+ * browser. A `.node` native addon can never load inside a browser JS engine,
+ * so this isn't a rare edge case, it's unconditional: any tw.* component
+ * rendering client-side needs a working fallback path.
+ *
+ * getNativeBinding() returns `null` (not a throw) when running in the
+ * browser — see native.ts. When that happens we use mergeFallback.ts, a
+ * hand-written pure-TS port of the SAME algorithm as `tw_merge_raw` in
+ * tw_merge.rs (conflict_group / split_variants / merge_class_string),
+ * instead of the third-party `tailwind-merge` package. This keeps merge
+ * behavior defined by one algorithm — ours — rather than risking the
+ * browser and the server silently disagreeing on merged className output
+ * because two different implementations drifted apart. The cost: when
+ * tw_merge.rs's conflict_group() changes, mergeFallback.ts must be updated
+ * by hand to match (see comments there).
  */
 
 interface MergeOptions {
+    /**
+     * NOTE: not currently applied — matches the native path, which calls
+     * `native.twMergeRaw(inputs)` without ever forwarding a prefix either.
+     * Kept on the type for API stability; wire it through conflictGroup()
+     * in mergeFallback.ts (and tw_merge_raw on the Rust side) together if a
+     * custom Tailwind prefix needs to be supported correctly end-to-end.
+     */
     prefix?: string;
     separator?: string;
     theme?: ThemeConfig$1;
 }
-declare function createTwMerge(_options?: MergeOptions): (...classLists: Array<string | undefined | null | false>) => string;
+declare function createTwMerge(options?: MergeOptions): (...classLists: Array<string | undefined | null | false>) => string;
 declare const twMerge: (...classLists: Array<string | undefined | null | false>) => string;
 declare function mergeWithRules(rules: Record<string, (classes: string[]) => string>, ...classLists: string[]): string;
 

package/dist/index.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -247,7 +248,7 @@ var nativeBinding = null;
 var bindingLoadAttempted = false;
 var getBinding = () => {
   if (isBrowser2) {
-    throw new Error(NATIVE_UNAVAILABLE_MESSAGE + "\n\nNative bindings are not available in browser. Use the compiled CSS output instead.");
+    return null;
   }
   if (nativeBinding) return nativeBinding;
   if (bindingLoadAttempted) {
@@ -255,10 +256,10 @@ var getBinding = () => {
   }
   bindingLoadAttempted = true;
   try {
-    const runtimeDir = isBrowser2 ? "" : (0, import_node_path2.dirname)(
+    const runtimeDir = (0, import_node_path2.dirname)(
       typeof __filename !== "undefined" ? __filename : typeof import_meta2 !== "undefined" && importMetaUrl ? (0, import_node_url2.fileURLToPath)(importMetaUrl) : process.cwd()
     );
-    const result = isBrowser2 ? { path: null, source: "not-found", platform: "browser", tried: [] } : resolveNativeBinary(runtimeDir);
+    const result = resolveNativeBinary(runtimeDir);
     if (result.path && result.path.endsWith(".node")) {
       const mod = _loadNative(result.path);
       if (mod?.batchSplitClasses) {
@@ -397,7 +398,291 @@ function getContainerRegistry() {
 
 // packages/domain/core/src/merge.ts
 init_cjs_shims();
-function createTwMerge(_options = {}) {
+
+// packages/domain/core/src/mergeFallback.ts
+init_cjs_shims();
+var TEXT_SIZE_SUFFIXES = /* @__PURE__ */ new Set([
+  "xs",
+  "sm",
+  "base",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "8xl",
+  "9xl"
+]);
+function isTextSize(suffix) {
+  if (TEXT_SIZE_SUFFIXES.has(suffix)) return true;
+  if (suffix.startsWith("[")) return true;
+  return false;
+}
+function isAsciiDigits(s) {
+  if (s.length === 0) return true;
+  for (let i = 0; i < s.length; i++) {
+    const code = s.charCodeAt(i);
+    if (code < 48 || code > 57) return false;
+  }
+  return true;
+}
+function isU32(s) {
+  return s.length > 0 && /^[0-9]+$/.test(s);
+}
+var DISPLAY_VALUES = /* @__PURE__ */ new Set([
+  "block",
+  "inline-block",
+  "inline",
+  "flex",
+  "inline-flex",
+  "grid",
+  "inline-grid",
+  "table",
+  "inline-table",
+  "table-row",
+  "table-cell",
+  "table-column",
+  "table-caption",
+  "contents",
+  "list-item",
+  "hidden",
+  "flow-root"
+]);
+var POSITION_VALUES = /* @__PURE__ */ new Set(["static", "relative", "absolute", "fixed", "sticky"]);
+var FONT_WEIGHT_NAMES = /* @__PURE__ */ new Set([
+  "thin",
+  "extralight",
+  "light",
+  "normal",
+  "medium",
+  "semibold",
+  "bold",
+  "extrabold",
+  "black"
+]);
+var TEXT_ALIGN_VALUES = /* @__PURE__ */ new Set(["left", "center", "right", "justify", "start", "end"]);
+var BORDER_SIDE_PREFIXES = ["t-", "r-", "b-", "l-", "x-", "y-", "s-", "e-"];
+var BORDER_STYLE_VALUES = /* @__PURE__ */ new Set(["solid", "dashed", "dotted", "double", "hidden", "none"]);
+function conflictGroup(base) {
+  const bracket = base.indexOf("[");
+  if (bracket !== -1) {
+    const prefix = base.slice(0, bracket).replace(/-+$/, "");
+    return prefix.length > 0 ? prefix : "arbitrary";
+  }
+  if (DISPLAY_VALUES.has(base)) return "display";
+  if (POSITION_VALUES.has(base)) return "position";
+  if (base.startsWith("overflow-x-")) return "overflow-x";
+  if (base.startsWith("overflow-y-")) return "overflow-y";
+  if (base.startsWith("overflow-")) return "overflow";
+  if (base.startsWith("flex-")) return "flex";
+  if (base.startsWith("grid-cols-")) return "grid-cols";
+  if (base.startsWith("grid-rows-")) return "grid-rows";
+  if (base.startsWith("grid-flow-")) return "grid-flow";
+  if (base.startsWith("col-")) return "col";
+  if (base.startsWith("row-")) return "row";
+  if (base === "grow" || base.startsWith("grow-")) return "grow";
+  if (base === "shrink" || base.startsWith("shrink-")) return "shrink";
+  if (base.startsWith("gap-x-")) return "gap-x";
+  if (base.startsWith("gap-y-")) return "gap-y";
+  if (base.startsWith("gap-")) return "gap";
+  if (base.startsWith("justify-items-")) return "justify-items";
+  if (base.startsWith("justify-self-")) return "justify-self";
+  if (base.startsWith("justify-")) return "justify";
+  if (base.startsWith("items-")) return "items";
+  if (base.startsWith("self-")) return "self";
+  if (base.startsWith("place-content-")) return "place-content";
+  if (base.startsWith("place-items-")) return "place-items";
+  if (base.startsWith("place-self-")) return "place-self";
+  if (base.startsWith("content-")) return "content";
+  if (base.startsWith("px-")) return "px";
+  if (base.startsWith("py-")) return "py";
+  if (base.startsWith("pt-")) return "pt";
+  if (base.startsWith("pr-")) return "pr";
+  if (base.startsWith("pb-")) return "pb";
+  if (base.startsWith("pl-")) return "pl";
+  if (base.startsWith("ps-")) return "ps";
+  if (base.startsWith("pe-")) return "pe";
+  if (base.startsWith("p-")) return "p";
+  if (base.startsWith("mx-")) return "mx";
+  if (base.startsWith("my-")) return "my";
+  if (base.startsWith("mt-")) return "mt";
+  if (base.startsWith("mr-")) return "mr";
+  if (base.startsWith("mb-")) return "mb";
+  if (base.startsWith("ml-")) return "ml";
+  if (base.startsWith("ms-")) return "ms";
+  if (base.startsWith("me-")) return "me";
+  if (base === "-m" || base.startsWith("m-") || base.startsWith("-m-")) return "m";
+  if (base.startsWith("space-x-")) return "space-x";
+  if (base.startsWith("space-y-")) return "space-y";
+  if (base.startsWith("size-")) return "size";
+  if (base.startsWith("min-w-")) return "min-w";
+  if (base.startsWith("max-w-")) return "max-w";
+  if (base.startsWith("w-")) return "w";
+  if (base.startsWith("min-h-")) return "min-h";
+  if (base.startsWith("max-h-")) return "max-h";
+  if (base.startsWith("h-")) return "h";
+  if (base.startsWith("inset-x-")) return "inset-x";
+  if (base.startsWith("inset-y-")) return "inset-y";
+  if (base.startsWith("inset-")) return "inset";
+  if (base.startsWith("top-")) return "top";
+  if (base.startsWith("right-") || base.startsWith("end-")) return "right";
+  if (base.startsWith("bottom-")) return "bottom";
+  if (base.startsWith("left-") || base.startsWith("start-")) return "left";
+  if (base.startsWith("z-")) return "z";
+  if (base.startsWith("opacity-")) return "opacity";
+  if (base.startsWith("bg-")) {
+    if (base.startsWith("bg-opacity-")) return "bg-opacity";
+    return "bg";
+  }
+  if (base.startsWith("from-")) return "from";
+  if (base.startsWith("via-")) return "via";
+  if (base.startsWith("to-")) return "to";
+  if (base.startsWith("text-")) {
+    const suffix = base.slice("text-".length);
+    if (isTextSize(suffix)) return "text-size";
+    if (suffix.startsWith("opacity-")) return "text-opacity";
+    if (TEXT_ALIGN_VALUES.has(suffix)) return "text-align";
+    return "text-color";
+  }
+  if (base.startsWith("font-")) {
+    const suffix = base.slice("font-".length);
+    if (FONT_WEIGHT_NAMES.has(suffix) || isAsciiDigits(suffix)) return "font-weight";
+    return "font-family";
+  }
+  if (base.startsWith("leading-")) return "leading";
+  if (base.startsWith("tracking-")) return "tracking";
+  if (base.startsWith("border-")) {
+    const suffix = base.slice("border-".length);
+    const sidePrefix = BORDER_SIDE_PREFIXES.find((p) => suffix.startsWith(p));
+    if (sidePrefix) {
+      const side = suffix.slice(0, 1);
+      const rest = suffix.slice(2);
+      if (isU32(rest) || rest.length === 0) return `border-${side}-width`;
+      return `border-${side}-color`;
+    }
+    if (isU32(suffix) || suffix.length === 0) return "border-width";
+    if (suffix.startsWith("opacity-")) return "border-opacity";
+    if (suffix === "collapse" || suffix === "separate") return "border-collapse";
+    if (BORDER_STYLE_VALUES.has(suffix)) return "border-style";
+    return "border-color";
+  }
+  if (base === "border") return "border-width";
+  if (base.startsWith("outline-")) return "outline";
+  if (base === "outline") return "outline";
+  if (base.startsWith("rounded-t") || base.startsWith("rounded-r") || base.startsWith("rounded-b") || base.startsWith("rounded-l") || base.startsWith("rounded-s") || base.startsWith("rounded-e")) {
+    const firstChar = base.slice("rounded-".length).charAt(0) || "x";
+    return `rounded-${firstChar}`;
+  }
+  if (base === "rounded" || base.startsWith("rounded-")) return "rounded";
+  if (base === "shadow" || base.startsWith("shadow-")) return "shadow";
+  if (base.startsWith("ring-offset-")) return "ring-offset";
+  if (base === "ring") return "ring-width";
+  if (base.startsWith("ring-")) {
+    const rest = base.slice("ring-".length);
+    const isWidth = rest === "0" || rest === "1" || rest === "2" || rest === "4" || rest === "8" || /^-?\d+(\.\d+)?$/.test(rest) || rest.startsWith("[") && rest.endsWith("]");
+    if (isWidth) return "ring-width";
+    if (rest === "inset") return "ring-inset";
+    return "ring-color";
+  }
+  if (base.startsWith("rotate-")) return "rotate";
+  if (base.startsWith("scale-x-")) return "scale-x";
+  if (base.startsWith("scale-y-")) return "scale-y";
+  if (base.startsWith("scale-")) return "scale";
+  if (base.startsWith("translate-x-")) return "translate-x";
+  if (base.startsWith("translate-y-")) return "translate-y";
+  if (base.startsWith("skew-x-")) return "skew-x";
+  if (base.startsWith("skew-y-")) return "skew-y";
+  if (base === "transition" || base.startsWith("transition-")) return "transition";
+  if (base.startsWith("duration-")) return "duration";
+  if (base.startsWith("ease-")) return "ease";
+  if (base.startsWith("delay-")) return "delay";
+  if (base === "animate" || base.startsWith("animate-")) return "animate";
+  if (base.startsWith("cursor-")) return "cursor";
+  if (base.startsWith("pointer-events-")) return "pointer-events";
+  if (base.startsWith("select-")) return "select";
+  if (base === "visible" || base === "invisible" || base === "collapse") return "visibility";
+  if (base.startsWith("object-")) return "object";
+  if (base.startsWith("aspect-")) return "aspect";
+  if (base.startsWith("order-")) return "order";
+  if (base.startsWith("whitespace-")) return "whitespace";
+  if (base.startsWith("list-")) return "list";
+  if (base.startsWith("fill-")) return "fill";
+  if (base.startsWith("stroke-")) return "stroke";
+  if (base.startsWith("backdrop-")) {
+    const rest = base.slice("backdrop-".length);
+    const seg = rest.split("-")[0] || "x";
+    return `backdrop-${seg}`;
+  }
+  if (base.startsWith("scroll-")) return "scroll";
+  if (base.startsWith("snap-")) return "snap";
+  if (base.startsWith("touch-")) return "touch";
+  if (base.startsWith("decoration-")) return "text-decoration";
+  if (base.startsWith("caret-")) return "caret";
+  if (base.startsWith("accent-")) return "accent";
+  if (base.startsWith("appearance-")) return "appearance";
+  if (base === "isolate" || base === "isolation-auto") return "isolation";
+  if (base.startsWith("mix-blend-")) return "mix-blend";
+  if (base.startsWith("bg-blend-")) return "bg-blend";
+  if (base.startsWith("float-")) return "float";
+  if (base.startsWith("clear-")) return "clear";
+  if (base.startsWith("break-")) return "break";
+  if (base.startsWith("columns-")) return "columns";
+  return null;
+}
+function splitVariants(klass) {
+  let depth = 0;
+  let lastColon = 0;
+  for (let i = 0; i < klass.length; i++) {
+    const ch = klass.charCodeAt(i);
+    if (ch === 91) depth++;
+    else if (ch === 93) depth = depth > 0 ? depth - 1 : 0;
+    else if (ch === 58 && depth === 0) lastColon = i + 1;
+  }
+  if (lastColon === 0) return ["", klass];
+  return [klass.slice(0, lastColon), klass.slice(lastColon)];
+}
+function mergeClassStringJs(input) {
+  const tokens = input.split(/\s+/).filter(Boolean);
+  if (tokens.length === 0) return "";
+  if (tokens.length === 1) return tokens[0];
+  const groupOwner = /* @__PURE__ */ new Map();
+  const slots = [];
+  for (const token of tokens) {
+    const [variants, base] = splitVariants(token);
+    const group = conflictGroup(base);
+    if (group !== null) {
+      const key = `${variants}::${group}`;
+      const prevIdx = groupOwner.get(key);
+      if (prevIdx !== void 0) slots[prevIdx] = null;
+      groupOwner.set(key, slots.length);
+      slots.push(token);
+    } else {
+      slots.push(token);
+    }
+  }
+  return slots.filter((s) => s !== null).join(" ");
+}
+function twMergeRawJs(classLists) {
+  const joined = classLists.map((s) => s.trim()).filter((s) => s.length > 0).join(" ");
+  if (joined.length === 0) return "";
+  return mergeClassStringJs(joined);
+}
+
+// packages/domain/core/src/merge.ts
+var warnedFallback = false;
+function warnFallbackOnce() {
+  if (warnedFallback) return;
+  warnedFallback = true;
+  if (typeof console !== "undefined") {
+    console.warn(
+      "[tailwind-styled-v4] Native binding 'twMergeRaw' tidak tersedia (normal di browser) \u2014 pakai pure-TS port dari algoritma Rust-nya. Hasil className tetap benar; ini cuma informasi, bukan error."
+    );
+  }
+}
+function createTwMerge(options = {}) {
   return function twMerge2(...classLists) {
     const inputs = [];
     for (let i = 0; i < classLists.length; i++) {
@@ -406,10 +691,11 @@ function createTwMerge(_options = {}) {
     }
     if (inputs.length === 0) return "";
     const native = getNativeBinding();
-    if (!native?.twMergeRaw) {
-      throw new Error("Native binding 'twMergeRaw' is required but not available.");
+    if (native?.twMergeRaw) {
+      return native.twMergeRaw(inputs);
     }
-    return native.twMergeRaw(inputs);
+    warnFallbackOnce();
+    return twMergeRawJs(inputs);
   };
 }
 var twMerge = createTwMerge();
@@ -899,8 +1185,49 @@ function wrapWithSubProxy(component, tagLabel) {
   });
 }
 
+// packages/domain/core/src/parseTemplateFallback.ts
+init_cjs_shims();
+var SUB_RE = /(?:\[([a-zA-Z][a-zA-Z0-9_-]*)\]|([a-zA-Z][a-zA-Z0-9_-]*))\s*\{([^}]*)\}/g;
+var COMMENT_RE = /\/\/[^\n]*/g;
+function collapseSpaces(s) {
+  return s.replace(/\s+/g, " ").trim();
+}
+function cleanBlock(raw) {
+  const noComments = raw.replace(COMMENT_RE, "");
+  const lines = noComments.split("\n").map((l) => l.trim()).filter((l) => l.length > 0);
+  return collapseSpaces(lines.join(" "));
+}
+function parseTemplateJs(raw) {
+  const subs = {};
+  let base = raw;
+  for (const match of raw.matchAll(SUB_RE)) {
+    const fullMatch = match[0];
+    const name = match[1] ?? match[2] ?? "";
+    const innerRaw = match[3] ?? "";
+    if (name) {
+      subs[name] = cleanBlock(innerRaw);
+    }
+    base = base.replace(fullMatch, "");
+  }
+  return {
+    base: cleanBlock(base),
+    subs,
+    hasSubs: Object.keys(subs).length > 0
+  };
+}
+
 // packages/domain/core/src/twProxy.ts
 var _parsedTemplateCache = /* @__PURE__ */ new Map();
+var warnedParseTemplateFallback = false;
+function warnParseTemplateFallbackOnce() {
+  if (warnedParseTemplateFallback) return;
+  warnedParseTemplateFallback = true;
+  if (typeof console !== "undefined") {
+    console.warn(
+      "[tailwind-styled-v4] Native binding 'parseTemplate' tidak tersedia (normal di browser, untuk komponen yang di-chain dengan .extend/.withVariants/.animate/.withSub) \u2014 pakai pure-TS port dari algoritma Rust-nya. Hasil tetap benar; ini cuma informasi, bukan error."
+    );
+  }
+}
 function parseTemplate(strings, exprs) {
   const raw = strings.raw.reduce((acc, str, i) => {
     const expr = exprs[i];
@@ -910,12 +1237,15 @@ function parseTemplate(strings, exprs) {
   const cached = _parsedTemplateCache.get(raw);
   if (cached) return cached;
   const binding = getNativeBinding();
-  if (!binding?.parseTemplate) {
-    throw new Error("FATAL: Native binding 'parseTemplate' is required but not available.");
+  let result;
+  if (binding?.parseTemplate) {
+    const r = binding.parseTemplate(raw);
+    const subs = r.hasSubs ? JSON.parse(r.subsJson) : {};
+    result = { base: r.base, subs, hasSubs: r.hasSubs };
+  } else {
+    warnParseTemplateFallbackOnce();
+    result = parseTemplateJs(raw);
   }
-  const r = binding.parseTemplate(raw);
-  const subs = r.hasSubs ? JSON.parse(r.subsJson) : {};
-  const result = { base: r.base, subs, hasSubs: r.hasSubs };
   _parsedTemplateCache.set(raw, result);
   return result;
 }