@kbach/react-native 1.0.0-beta.36 → 1.0.0-beta.37

package/README.md

@@ -307,6 +307,13 @@ parses without error but never takes effect. Supported today:
   `hover:focus:opacity-100`) requires every named condition to hold at once
   — chain order never matters (`dark:sm:` and `sm:dark:` are equivalent).
 
+**Class order doesn't matter for a variant vs a base class.** When two
+classes set the same property, the one with more active modifiers wins
+regardless of which you write first — `dark:bg-black bg-white` and
+`bg-white dark:bg-black` both render black in dark mode, matching how
+Tailwind behaves on the web. Two equally-specific classes (`bg-white
+bg-black`, or two `dark:` classes) still go last-one-wins.
+
 `group-hover:`/`peer-hover:` and friends are NOT implemented on native —
 doing so needs a React Context bridge (propagating an ancestor's hover/
 press/focus state down to descendants, since there's no `.group`/`.peer`

package/dist/index.js

@@ -1605,7 +1605,9 @@ var Evaluator = class {
 
 // src/jsEngine/resolveStyle.ts
 var RESPONSIVE_BREAKPOINTS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+var STATE_HOLD_MARKER = "_kbon";
 function nativeModifierState(modifier, theme, colorScheme, pressed, width) {
+  if (modifier === STATE_HOLD_MARKER) return true;
   if (modifier === "dark") return colorScheme === "dark";
   if (modifier === "active") return pressed;
   if (RESPONSIVE_BREAKPOINTS.has(modifier)) {
@@ -1744,6 +1746,8 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   const warnings = [];
   let shadowOffset = null;
   const transformOps = /* @__PURE__ */ new Map();
+  const keySpecificity = /* @__PURE__ */ new Map();
+  const transformSpecificity = /* @__PURE__ */ new Map();
   for (const rawToken of classString.split(/\s+/).filter(Boolean)) {
     const token = substituteModeAwareColorToken(rawToken, theme, colorScheme);
     const parsed = parseClass(token);
@@ -1753,31 +1757,44 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
     if (!allModifiersHold) continue;
     const decls = resolveUtilityNative(parsed, theme);
     if (decls === null) continue;
+    const spec = parsed.modifiers.length;
     for (const d of decls) {
       if (d.property.startsWith("__")) {
         continue;
       }
       if (d.property === "shadow-offset-x" || d.property === "shadow-offset-y") {
+        if (spec < (keySpecificity.get("shadowOffset") ?? 0)) continue;
         const n = Number(d.value);
         if (!Number.isFinite(n)) continue;
         if (shadowOffset === null) shadowOffset = {};
         shadowOffset[d.property === "shadow-offset-x" ? "width" : "height"] = n;
+        keySpecificity.set("shadowOffset", spec);
         continue;
       }
       if (d.property === "transform-op-none") {
         transformOps.clear();
+        transformSpecificity.clear();
         continue;
       }
       const opKey = TRANSFORM_OP_KEYS.get(d.property);
       if (opKey !== void 0) {
+        if (spec < (transformSpecificity.get(opKey) ?? 0)) continue;
         const { value: value2, warning: warning2 } = rnStyleValue(d.property, d.value);
         if (warning2 !== null) warnings.push(warning2);
-        if (value2 !== null) transformOps.set(opKey, value2);
+        if (value2 !== null) {
+          transformOps.set(opKey, value2);
+          transformSpecificity.set(opKey, spec);
+        }
         continue;
       }
+      const key = kebabToCamel(d.property);
+      if (spec < (keySpecificity.get(key) ?? 0)) continue;
       const { value, warning } = rnStyleValue(d.property, d.value);
       if (warning !== null) warnings.push(warning);
-      if (value !== null) style[kebabToCamel(d.property)] = value;
+      if (value !== null) {
+        style[key] = value;
+        keySpecificity.set(key, spec);
+      }
     }
   }
   if (shadowOffset !== null) {

package/dist/jsx-dev-runtime.js

@@ -725,9 +725,10 @@ function propBasedModifierState(name, states, hostRest) {
   if (ariaInner !== null) return evalAttrCondition(hostRest, "aria-", ariaInner);
   return null;
 }
-function stripModifiers(parts, namesToStrip) {
+var STATE_HOLD_MARKER = "_kbon";
+function markSatisfiedStateModifiers(parts, namesToReplace) {
   const utility = parts[parts.length - 1] ?? "";
-  const modifiers = parts.slice(0, -1).filter((m) => !namesToStrip.has(m));
+  const modifiers = parts.slice(0, -1).map((m) => namesToReplace.has(m) ? STATE_HOLD_MARKER : m);
   return [...modifiers, utility].join(":");
 }
 function substituteStateModifiers(classStrRaw, states, hostRest) {
@@ -745,7 +746,7 @@ function substituteStateModifiers(classStrRaw, states, hostRest) {
     }
     if (required.every(([, v]) => v === true)) {
       const requiredNames = new Set(required.map(([m]) => m));
-      kept.push(stripModifiers(parts, requiredNames));
+      kept.push(markSatisfiedStateModifiers(parts, requiredNames));
     }
   }
   return kept.join(" ");
@@ -1988,7 +1989,9 @@ function resolveUtilityNative(parsed, theme) {
 
 // src/jsEngine/resolveStyle.ts
 var RESPONSIVE_BREAKPOINTS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+var STATE_HOLD_MARKER2 = "_kbon";
 function nativeModifierState(modifier, theme, colorScheme, pressed, width) {
+  if (modifier === STATE_HOLD_MARKER2) return true;
   if (modifier === "dark") return colorScheme === "dark";
   if (modifier === "active") return pressed;
   if (RESPONSIVE_BREAKPOINTS.has(modifier)) {
@@ -2127,6 +2130,8 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   const warnings = [];
   let shadowOffset = null;
   const transformOps = /* @__PURE__ */ new Map();
+  const keySpecificity = /* @__PURE__ */ new Map();
+  const transformSpecificity = /* @__PURE__ */ new Map();
   for (const rawToken of classString.split(/\s+/).filter(Boolean)) {
     const token = substituteModeAwareColorToken(rawToken, theme, colorScheme);
     const parsed = parseClass(token);
@@ -2136,31 +2141,44 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
     if (!allModifiersHold) continue;
     const decls = resolveUtilityNative(parsed, theme);
     if (decls === null) continue;
+    const spec = parsed.modifiers.length;
     for (const d of decls) {
       if (d.property.startsWith("__")) {
         continue;
       }
       if (d.property === "shadow-offset-x" || d.property === "shadow-offset-y") {
+        if (spec < (keySpecificity.get("shadowOffset") ?? 0)) continue;
         const n = Number(d.value);
         if (!Number.isFinite(n)) continue;
         if (shadowOffset === null) shadowOffset = {};
         shadowOffset[d.property === "shadow-offset-x" ? "width" : "height"] = n;
+        keySpecificity.set("shadowOffset", spec);
         continue;
       }
       if (d.property === "transform-op-none") {
         transformOps.clear();
+        transformSpecificity.clear();
         continue;
       }
       const opKey = TRANSFORM_OP_KEYS.get(d.property);
       if (opKey !== void 0) {
+        if (spec < (transformSpecificity.get(opKey) ?? 0)) continue;
         const { value: value2, warning: warning2 } = rnStyleValue(d.property, d.value);
         if (warning2 !== null) warnings.push(warning2);
-        if (value2 !== null) transformOps.set(opKey, value2);
+        if (value2 !== null) {
+          transformOps.set(opKey, value2);
+          transformSpecificity.set(opKey, spec);
+        }
         continue;
       }
+      const key = kebabToCamel(d.property);
+      if (spec < (keySpecificity.get(key) ?? 0)) continue;
       const { value, warning } = rnStyleValue(d.property, d.value);
       if (warning !== null) warnings.push(warning);
-      if (value !== null) style[kebabToCamel(d.property)] = value;
+      if (value !== null) {
+        style[key] = value;
+        keySpecificity.set(key, spec);
+      }
     }
   }
   if (shadowOffset !== null) {

package/dist/jsx-runtime.js

@@ -726,9 +726,10 @@ function propBasedModifierState(name, states, hostRest) {
   if (ariaInner !== null) return evalAttrCondition(hostRest, "aria-", ariaInner);
   return null;
 }
-function stripModifiers(parts, namesToStrip) {
+var STATE_HOLD_MARKER = "_kbon";
+function markSatisfiedStateModifiers(parts, namesToReplace) {
   const utility = parts[parts.length - 1] ?? "";
-  const modifiers = parts.slice(0, -1).filter((m) => !namesToStrip.has(m));
+  const modifiers = parts.slice(0, -1).map((m) => namesToReplace.has(m) ? STATE_HOLD_MARKER : m);
   return [...modifiers, utility].join(":");
 }
 function substituteStateModifiers(classStrRaw, states, hostRest) {
@@ -746,7 +747,7 @@ function substituteStateModifiers(classStrRaw, states, hostRest) {
     }
     if (required.every(([, v]) => v === true)) {
       const requiredNames = new Set(required.map(([m]) => m));
-      kept.push(stripModifiers(parts, requiredNames));
+      kept.push(markSatisfiedStateModifiers(parts, requiredNames));
     }
   }
   return kept.join(" ");
@@ -1979,7 +1980,9 @@ function resolveUtilityNative(parsed, theme) {
 
 // src/jsEngine/resolveStyle.ts
 var RESPONSIVE_BREAKPOINTS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl"]);
+var STATE_HOLD_MARKER2 = "_kbon";
 function nativeModifierState(modifier, theme, colorScheme, pressed, width) {
+  if (modifier === STATE_HOLD_MARKER2) return true;
   if (modifier === "dark") return colorScheme === "dark";
   if (modifier === "active") return pressed;
   if (RESPONSIVE_BREAKPOINTS.has(modifier)) {
@@ -2118,6 +2121,8 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
   const warnings = [];
   let shadowOffset = null;
   const transformOps = /* @__PURE__ */ new Map();
+  const keySpecificity = /* @__PURE__ */ new Map();
+  const transformSpecificity = /* @__PURE__ */ new Map();
   for (const rawToken of classString.split(/\s+/).filter(Boolean)) {
     const token = substituteModeAwareColorToken(rawToken, theme, colorScheme);
     const parsed = parseClass(token);
@@ -2127,31 +2132,44 @@ function resolveStyleJsWithWarnings(classString, theme, colorScheme, pressed, wi
     if (!allModifiersHold) continue;
     const decls = resolveUtilityNative(parsed, theme);
     if (decls === null) continue;
+    const spec = parsed.modifiers.length;
     for (const d of decls) {
       if (d.property.startsWith("__")) {
         continue;
       }
       if (d.property === "shadow-offset-x" || d.property === "shadow-offset-y") {
+        if (spec < (keySpecificity.get("shadowOffset") ?? 0)) continue;
         const n = Number(d.value);
         if (!Number.isFinite(n)) continue;
         if (shadowOffset === null) shadowOffset = {};
         shadowOffset[d.property === "shadow-offset-x" ? "width" : "height"] = n;
+        keySpecificity.set("shadowOffset", spec);
         continue;
       }
       if (d.property === "transform-op-none") {
         transformOps.clear();
+        transformSpecificity.clear();
         continue;
       }
       const opKey = TRANSFORM_OP_KEYS.get(d.property);
       if (opKey !== void 0) {
+        if (spec < (transformSpecificity.get(opKey) ?? 0)) continue;
         const { value: value2, warning: warning2 } = rnStyleValue(d.property, d.value);
         if (warning2 !== null) warnings.push(warning2);
-        if (value2 !== null) transformOps.set(opKey, value2);
+        if (value2 !== null) {
+          transformOps.set(opKey, value2);
+          transformSpecificity.set(opKey, spec);
+        }
         continue;
       }
+      const key = kebabToCamel(d.property);
+      if (spec < (keySpecificity.get(key) ?? 0)) continue;
       const { value, warning } = rnStyleValue(d.property, d.value);
       if (warning !== null) warnings.push(warning);
-      if (value !== null) style[kebabToCamel(d.property)] = value;
+      if (value !== null) {
+        style[key] = value;
+        keySpecificity.set(key, spec);
+      }
     }
   }
   if (shadowOffset !== null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react-native",
-  "version": "1.0.0-beta.36",
+  "version": "1.0.0-beta.37",
   "description": "Kbach's utility-class styling engine for React Native — the same class names as @kbach/react, resolved to a StyleSheet-ready style object via a Kotlin/JNI TurboModule (native), the same WASM engine @kbach/react uses (Expo Web / react-native-web), or a pure-JS fallback engine (Expo Go). Ships its own native Android module — one npm install, no separate native package. Beta. Native is Android-only (no iOS bridge yet); works with the React Native CLI, an Expo dev client, AND Expo Go (a reduced-coverage pure-JS fallback, since Expo Go can't load any custom native module).",
   "keywords": [
     "css",