react-native-css 3.0.3 → 3.0.5

package/src/compiler/compiler.ts

@@ -7,6 +7,8 @@ import {
   type MediaQuery as CSSMediaQuery,
   type CustomAtRules,
   type MediaRule,
+  type ParsedComponent,
+  type PropertyRule,
   type Rule,
   type Visitor,
 } from "lightningcss";
@@ -15,11 +17,19 @@ import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
 import type {
   CompilerOptions,
   ContainerQuery,
+  StyleDescriptor,
   StyleRuleMapping,
   UniqueVarInfo,
 } from "./compiler.types";
 import { parseContainerCondition } from "./container-query";
-import { parseDeclaration, round } from "./declarations";
+import {
+  parseAngle,
+  parseColor,
+  parseDeclaration,
+  parseLength,
+  reduceParseUnparsed,
+  round,
+} from "./declarations";
 import { inlineVariables } from "./inline-variables";
 import { extractKeyFrames } from "./keyframes";
 import { lightningcssLoader } from "./lightningcss-loader";
@@ -276,13 +286,15 @@ function extractRule(
         }
       }
       break;
+    case "property":
+      extractPropertyRule(rule.value, builder);
+      break;
     case "custom":
     case "font-face":
     case "font-palette-values":
     case "font-feature-values":
     case "namespace":
     case "layer-statement":
-    case "property":
     case "view-transition":
     case "ignored":
     case "unknown":
@@ -377,3 +389,65 @@ function extractContainer(
     extractRule(rule, builder, mapping);
   }
 }
+
+function extractPropertyRule(
+  propertyRule: PropertyRule,
+  builder: StylesheetBuilder,
+) {
+  const { initialValue, name } = propertyRule;
+
+  if (initialValue == null) {
+    return;
+  }
+
+  const varName = name.startsWith("--") ? name.slice(2) : name;
+  const value = parsePropertyInitialValue(initialValue, builder);
+
+  if (value !== undefined) {
+    builder.addRootVariable(varName, value);
+  }
+}
+
+function parsePropertyInitialValue(
+  component: ParsedComponent,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  switch (component.type) {
+    case "length":
+      return parseLength(component.value, builder);
+    case "number":
+    case "integer":
+      return round(component.value);
+    case "percentage":
+      return `${round(component.value * 100)}%`;
+    case "color":
+      return parseColor(component.value, builder);
+    case "angle":
+      return parseAngle(component.value, builder);
+    case "length-percentage":
+      return parseLength(component.value, builder);
+    case "token-list":
+      return reduceParseUnparsed(
+        component.value,
+        builder,
+        "@property",
+        false,
+      );
+    case "custom-ident":
+    case "literal":
+      return component.value;
+    case "repeated": {
+      const results = component.value.components
+        .map((c) => parsePropertyInitialValue(c, builder))
+        .filter(
+          (v): v is NonNullable<StyleDescriptor> => v !== undefined,
+        );
+      // Unwrap single-child repeated values so downstream consumers get a
+      // scalar instead of a 1-element array. For example, `<length>+` with
+      // initial-value `10px` should produce the same shape as `<length>`.
+      return results.length === 1 ? results[0] : results;
+    }
+    default:
+      return undefined;
+  }
+}

package/src/compiler/stylesheet.ts

@@ -577,6 +577,12 @@ export class StylesheetBuilder {
     this.ruleTemplate.cq.push(query);
   }
 
+  addRootVariable(name: string, value: StyleDescriptor) {
+    this.shared.rootVariables ??= {};
+    this.shared.rootVariables[name] ??= [];
+    this.shared.rootVariables[name].push([value]);
+  }
+
   newAnimationFrames(name: string) {
     this.shared.animations ??= {};
 

package/src/compiler/supports.ts

@@ -21,8 +21,6 @@ export function supportsConditionValid(condition: SupportsCondition): boolean {
 }
 
 const declarations: Record<string, string[]> = {
-  // We don't actually support this, but its needed for Tailwind CSS
-  "-moz-orient": ["inline"],
   // Special text used by TailwindCSS. We should probably change this to all color-mix
-  "color": ["color-mix(in lab, red, red)"],
+  color: ["color-mix(in lab, red, red)"],
 };

package/src/native/styles/index.ts

@@ -362,7 +362,7 @@ function deepMergeConfig(
       result = Object.assign({}, left, right);
     }
   } else {
-    result = { ...left };
+    result = Object.assign({}, left, right);
   }
 
   if (

package/src/native/styles/shorthands/_handler.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import { isStyleDescriptorArray } from "react-native-css/utilities";
+import {
+  isStyleDescriptorArray,
+  isStyleFunction,
+} from "react-native-css/utilities";
 
 import { setDeepPath } from "../../objects";
 import { ShortHandSymbol } from "../constants";
@@ -56,6 +59,16 @@ export function shorthandHandler(
             return type.includes(value) || type.includes(typeof value);
           }
 
+          // Style functions (var, calc, env, etc.) are unresolved at pattern-match
+          // time — their actual values won't be known until runtime variable
+          // resolution. Accepting them in any type slot makes pattern matching
+          // less strict when variables are involved, but rejecting them would
+          // break variable-based shadows entirely (e.g. box-shadow: var(--shadow)
+          // where --shadow resolves to "0 4px 6px -1px #000").
+          if (isStyleFunction(value)) {
+            return true;
+          }
+
           switch (type) {
             case "string":
             case "number":

package/src/native/styles/shorthands/box-shadow.ts

@@ -4,21 +4,30 @@ import { isStyleDescriptorArray } from "react-native-css/utilities";
 import type { StyleFunctionResolver } from "../resolve";
 import { shorthandHandler } from "./_handler";
 
-const color = ["color", "string"] as const;
+// "color" type accepts both strings ("#fff") and objects (PlatformColor from currentcolor).
+// Using "string" here would reject platform color objects and silently drop the shadow.
+const color = ["color", "color"] as const;
 const offsetX = ["offsetX", "number"] as const;
 const offsetY = ["offsetY", "number"] as const;
 const blurRadius = ["blurRadius", "number"] as const;
 const spreadDistance = ["spreadDistance", "number"] as const;
-// const inset = ["inset", "string"] as const;
+// Match the literal string "inset" - the array type checks if value is in array
+const inset = ["inset", ["inset"]] as const;
 
 const handler = shorthandHandler(
   [
+    // Standard patterns (without inset)
     [offsetX, offsetY, blurRadius, spreadDistance],
     [offsetX, offsetY, blurRadius, spreadDistance, color],
     [color, offsetX, offsetY],
     [color, offsetX, offsetY, blurRadius, spreadDistance],
     [offsetX, offsetY, color],
     [offsetX, offsetY, blurRadius, color],
+    // Inset patterns - "inset" keyword at the beginning
+    [inset, offsetX, offsetY, blurRadius, spreadDistance],
+    [inset, offsetX, offsetY, blurRadius, spreadDistance, color],
+    [inset, offsetX, offsetY, blurRadius, color],
+    [inset, color, offsetX, offsetY, blurRadius, spreadDistance],
   ],
   [],
   "object",
@@ -41,8 +50,10 @@ export const boxShadow: StyleFunctionResolver = (
         if (shadows === undefined) {
           return;
         } else {
-          return omitTransparentShadows(
-            handler(resolveValue, shadows, get, options),
+          return normalizeInsetValue(
+            omitTransparentShadows(
+              handler(resolveValue, shadows, get, options),
+            ),
           );
         }
       })
@@ -69,3 +80,17 @@ function omitTransparentShadows(style: unknown) {
 
   return style;
 }
+
+/**
+ * Convert inset: "inset" to inset: true for React Native boxShadow.
+ *
+ * The shorthand handler matches the literal "inset" string and assigns it as the value.
+ * React Native's boxShadow expects inset to be a boolean.
+ */
+function normalizeInsetValue(style: unknown) {
+  if (typeof style === "object" && style && "inset" in style) {
+    return { ...style, inset: true };
+  }
+
+  return style;
+}

package/src/web/api.tsx

@@ -31,7 +31,7 @@ export const styled = <
   _options?: StyledOptions,
 ) => {
   return (props: StyledProps<ComponentPropsWithRef<C>, M>) => {
-    return useCssElement(baseComponent, mapping, props);
+    return useCssElement(baseComponent, props, mapping);
   };
 };