react-native-css 3.0.0-nightly.df0f885 → 3.0.0-nightly.fa5e95b

package/src/compiler/stylesheet.ts

@@ -57,15 +57,16 @@ export class StylesheetBuilder {
       animations?: AnimationRecord;
       rem: number;
       ruleOrder: number;
+      warningProperty?: string;
       warningProperties: string[];
-      warningValues: [string, unknown][];
+      warningValues: Record<string, unknown[]>;
       warningFunctions: string[];
     } = {
       ruleSets: {},
       rem: 14,
       ruleOrder: 0,
       warningProperties: [],
-      warningValues: [],
+      warningValues: {},
       warningFunctions: [],
     },
     private selectors?: NormalizeSelector[],
@@ -172,8 +173,14 @@ export class StylesheetBuilder {
     );
   }
 
+  setWarningProperty(property: string) {
+    this.shared.warningProperty = property;
+  }
+
+  addWarning(type: "property" | "value", property: string): void;
+  addWarning(type: "style", property: string, value: unknown): void;
   addWarning(
-    type: "property" | "value" | "function",
+    type: "property" | "style" | "value",
     property: string,
     value?: unknown,
   ): void {
@@ -181,21 +188,49 @@ export class StylesheetBuilder {
       case "property":
         this.shared.warningProperties.push(property);
         break;
-      case "value":
-        this.shared.warningValues.push([property, value]);
+      case "value": {
+        value = property;
+        property = this.shared.warningProperty ?? "";
+
+        if (!property) {
+          return;
+        }
+
+        this.shared.warningValues[property] ??= [];
+        this.shared.warningValues[property]?.push(value);
         break;
-      case "function":
-        this.shared.warningFunctions.push(property);
+      }
+      case "style":
+        this.shared.warningValues[property] ??= [];
+        this.shared.warningValues[property]?.push(value);
         break;
     }
   }
 
   getWarnings() {
-    return {
-      properties: this.shared.warningProperties,
-      values: this.shared.warningValues,
-      functions: this.shared.warningFunctions,
-    };
+    const result: {
+      properties?: string[];
+      values?: Record<string, unknown[]>;
+      functions?: string[];
+    } = {};
+
+    if (this.shared.warningProperties.length) {
+      result.properties = this.shared.warningProperties;
+    }
+
+    if (Object.keys(this.shared.warningValues).length) {
+      result.values = this.shared.warningValues;
+    }
+
+    if (this.shared.warningFunctions.length) {
+      result.functions = this.shared.warningFunctions;
+    }
+
+    return result;
+  }
+
+  addMapping(mapping: StyleRuleMapping) {
+    this.mapping = { ...this.mapping, ...mapping };
   }
 
   newRule(mapping = this.mapping, { important = false } = {}) {
@@ -331,30 +366,29 @@ export class StylesheetBuilder {
   }
 
   private pushDescriptor(
-    property: string,
+    rawProperty: string,
     value: StyleDescriptor,
     declarations: StyleDeclaration[],
     forceTuple = false,
     delayed = false,
   ) {
-    property = toRNProperty(property);
+    const property = toRNProperty(rawProperty);
 
-    let propPath: string | string[] =
-      this.mapping[property] ?? this.mapping["*"] ?? property;
+    let propPath: string | string[] | undefined =
+      this.mapping[rawProperty] ?? this.mapping[property] ?? this.mapping["*"];
 
     if (Array.isArray(propPath)) {
-      const first = propPath[0];
+      const [first, second] = propPath;
 
-      if (!first) {
-        // This should not happen, but if it does, we skip the property
-        return;
-      }
-
-      if (propPath.length === 1) {
-        propPath = first;
+      if (propPath.length === 2 && first === "*" && second) {
+        propPath = second;
       } else {
         forceTuple = true;
       }
+    } else if (propPath) {
+      forceTuple = true;
+    } else {
+      propPath = property;
     }
 
     if (isStyleFunction(value)) {

package/src/runtime/native/conditions/media-query.ts

@@ -39,7 +39,7 @@ function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean {
 
   switch (mediaQuery[1]) {
     case "platform":
-      return right === Platform.OS;
+      return right === "native" || right === Platform.OS;
     case "prefers-color-scheme": {
       return right === get(colorScheme);
     }

package/src/runtime/native/styles/calculate-props.ts

@@ -103,63 +103,73 @@ export function applyDeclarations(
       // Dynamic styles
       let value: any = declaration[0];
       let propPath = declaration[1];
-      let prop = "";
+      let prop: string;
 
-      if (typeof propPath === "string") {
-        if (propPath.startsWith("^")) {
-          propPath = propPath.slice(1);
-          target = topLevelTarget[propPath] ??= {};
+      if (Array.isArray(propPath)) {
+        const [first, ...rest] = propPath;
+
+        if (!first) {
+          continue;
         }
-        prop = propPath;
-      } else {
-        for (prop of propPath) {
-          if (prop.startsWith("^")) {
-            prop = prop.slice(1);
-            target = topLevelTarget[prop] ??= {};
-          } else {
-            target = target[prop] ??= {};
+
+        const final = rest.pop();
+
+        if (final) {
+          if (first !== "*") {
+            topLevelTarget[first] ??= {};
+            target = topLevelTarget[first];
+          }
+
+          for (prop of rest) {
+            target[prop] ??= {};
+            target = target[prop];
           }
-        }
-      }
 
-      if (Array.isArray(value)) {
-        const shouldDelay = declaration[2];
-
-        if (shouldDelay) {
-          /**
-           * We need to delay the resolution of this value until after all
-           * styles have been calculated. But another style might override
-           * this value. So we set a placeholder value and only override
-           * if the placeholder is preserved
-           *
-           * This also ensures the props exist, so setValue will properly
-           * mutate the props object and not create a new one
-           */
-          const originalValue = value;
-          value = {};
-          delayedStyles.push(() => {
-            if (target[prop] === value) {
-              delete target[prop];
-              value = resolveValue(originalValue, get, {
-                inlineVariables,
-                inheritedVariables,
-                renderGuards: guards,
-                calculateProps,
-              });
-              applyValue(target, prop, value);
-            }
-          });
+          prop = final;
         } else {
-          value = resolveValue(value, get, {
-            inlineVariables,
-            inheritedVariables,
-            renderGuards: guards,
-            calculateProps,
-          });
+          target = topLevelTarget;
+          prop = first;
         }
+      } else {
+        prop = propPath;
+      }
 
-        applyValue(target, prop, value);
+      const shouldDelay = declaration[2];
+
+      if (shouldDelay) {
+        /**
+         * We need to delay the resolution of this value until after all
+         * styles have been calculated. But another style might override
+         * this value. So we set a placeholder value and only override
+         * if the placeholder is preserved
+         *
+         * This also ensures the props exist, so setValue will properly
+         * mutate the props object and not create a new one
+         */
+        const originalValue = value;
+        value = {};
+        delayedStyles.push(() => {
+          if (target[prop] === value) {
+            delete target[prop];
+            value = resolveValue(originalValue, get, {
+              inlineVariables,
+              inheritedVariables,
+              renderGuards: guards,
+              calculateProps,
+            });
+            applyValue(target, prop, value);
+          }
+        });
+      } else {
+        value = resolveValue(value, get, {
+          inlineVariables,
+          inheritedVariables,
+          renderGuards: guards,
+          calculateProps,
+        });
       }
+
+      applyValue(target, prop, value);
     }
   }
 }

package/src/runtime/native/styles/units.ts

@@ -2,17 +2,21 @@
 import { rem as remObs, vh as vhObs, vw as vwObs } from "../reactivity";
 import type { StyleFunctionResolver } from "./resolve";
 
-export const em: StyleFunctionResolver = (resolve, func) => {
+export const em: StyleFunctionResolver = (resolve, func, get) => {
   let value = func[2];
 
   if (!value) {
     return;
   }
 
-  const emValue = resolve([{}, "var", ["__rn-css-em"]]);
+  let emValue = resolve([{}, "var", ["__rn-css-em"]]);
 
   if (typeof emValue !== "number") {
-    return undefined;
+    emValue = get(remObs);
+  }
+
+  if (typeof emValue !== "number") {
+    return;
   }
 
   return round(Number(value) * emValue);