fix: cleanup & comments

packages/expo-styling/src/__tests__/media-query.test.tsx

@@ -11,7 +11,7 @@ beforeEach(() => {
   StyleSheet.__reset();
 });
 
-test.only("color scheme", () => {
+test("color scheme", () => {
   registerCSS(`
 .my-class { color: blue; }
 

packages/expo-styling/src/runtime/native/flattenStyle.ts

@@ -5,6 +5,9 @@ import { Style, StyleMeta, StyleProp } from "../../types";
 
 /**
  * Reduce a StyleProp to a flat Style object.
+ * As we loop over keys & values, we will resolve any dynamic values.
+ * Some values cannot be calculated until the entire style has been flattened.
+ * These values are defined as a getter and will be resolved lazily
  */
 export function flattenStyle(styles: StyleProp, flatStyle?: Style): Style {
   let flatStyleMeta: StyleMeta;
@@ -22,8 +25,7 @@ export function flattenStyle(styles: StyleProp, flatStyle?: Style): Style {
   }
 
   if (Array.isArray(styles)) {
-    // We need to flatten in reverse order so that the last style in the array
-    // is the value set
+    // We need to flatten in reverse order so that the last style in the array is the one defined
     for (let i = styles.length - 1; i >= 0; i--) {
       if (styles[i]) {
         flattenStyle(styles[i], flatStyle);
@@ -32,6 +34,11 @@ export function flattenStyle(styles: StyleProp, flatStyle?: Style): Style {
     return flatStyle;
   }
 
+  // The is the metadata for the style object.
+  // It contains information is like the MediaQuery data
+  //
+  // Note: This is different to flatStyleMeta, which is the metadata
+  // for the FLATTENED style object
   const styleMeta = styleMetaMap.get(styles) ?? {};
 
   for (const [key, value] of Object.entries(styles)) {
@@ -54,34 +61,29 @@ export function flattenStyle(styles: StyleProp, flatStyle?: Style): Style {
       } else {
         flatStyleMeta.variables[key] = getterOrValue;
       }
-    } else {
-      // Skip already set keys
-      if (key in flatStyle) continue;
+      continue;
+    }
 
-      // Skip failed media queries
-      if (styleMeta.media && !styleMeta.media.every(testMediaQuery)) {
-        continue;
-      }
+    // Skip already set keys
+    if (key in flatStyle) continue;
 
-      // Non runtime styles can be set directly
-      if (!styleMeta.runtimeStyleProps?.has(key)) {
-        (flatStyle as any)[key] = value;
-        continue;
-      }
+    // Skip failed media queries
+    if (styleMeta.media && !styleMeta.media.every(testMediaQuery)) {
+      continue;
+    }
 
-      const getterOrValue = extractValue(value, flatStyle, flatStyleMeta);
+    const getterOrValue = extractValue(value, flatStyle, flatStyleMeta);
 
-      if (typeof getterOrValue === "function") {
-        Object.defineProperty(flatStyle, key, {
-          configurable: true,
-          enumerable: true,
-          get() {
-            return getterOrValue();
-          },
-        });
-      } else {
-        flatStyle[key as keyof Style] = getterOrValue;
-      }
+    if (typeof getterOrValue === "function") {
+      Object.defineProperty(flatStyle, key, {
+        configurable: true,
+        enumerable: true,
+        get() {
+          return getterOrValue();
+        },
+      });
+    } else {
+      flatStyle[key as keyof Style] = getterOrValue;
     }
   }
 
@@ -98,9 +100,7 @@ function extractValue(
   flatStyle: Style,
   flatStyleMeta: StyleMeta
 ): any {
-  if (typeof value === "string" || typeof value === "number") {
-    return value;
-  } else if (isRuntimeValue(value)) {
+  if (isRuntimeValue(value)) {
     switch (value.name) {
       case "vh":
         return (vh.get() / 100) * (value.arguments[0] as number);
@@ -141,4 +141,6 @@ function extractValue(
       }
     }
   }
+
+  return value;
 }

packages/expo-styling/src/runtime/native/mediaQuery.ts

@@ -35,7 +35,7 @@ function testCondition(condition?: MediaCondition | null): boolean {
 function testFeature(feature: MediaFeature) {
   switch (feature.type) {
     case "plain":
-      return testPlainFeature(feature.name, feature.value);
+      return testPlainFeature(feature);
     case "range":
     case "boolean":
     case "interval":
@@ -47,28 +47,28 @@ function testFeature(feature: MediaFeature) {
   return false;
 }
 
-function testPlainFeature(name: string, featureValue: MediaFeatureValue) {
-  const value = getMediaFeatureValue(featureValue);
+function testPlainFeature(feature: Extract<MediaFeature, { type: "plain" }>) {
+  const value = getMediaFeatureValue(feature.value);
 
   if (value === null) {
     return false;
   }
 
-  switch (name) {
+  switch (feature.name) {
     case "prefers-color-scheme":
       return colorScheme.get() === value;
     case "width":
-      return vw.get() === value;
+      return typeof value === "number" && vw.get() === value;
     case "min-width":
-      return vw.get() >= value;
+      return typeof value === "number" && vw.get() >= value;
     case "max-width":
-      return vw.get() <= value;
+      return typeof value === "number" && vw.get() <= value;
     case "height":
-      return vh.get() === value;
+      return typeof value === "number" && vh.get() === value;
     case "min-height":
-      return vh.get() >= value;
+      return typeof value === "number" && vh.get() >= value;
     case "max-height":
-      return vh.get() <= value;
+      return typeof value === "number" && vh.get() <= value;
     default:
       return false;
   }

packages/expo-styling/src/runtime/native/stylesheet.ts

@@ -21,6 +21,10 @@ import {
 
 const subscriptions = new Set<() => void>();
 
+/**
+ * This is a custom wrapper around the React Native Stylesheet.
+ * It allows us to intercept the creation of styles and "tag" them wit the metadata
+ */
 const parialStyleSheet = {
   rem,
   __subscribe(subscription: () => void) {

packages/expo-styling/src/runtime/render.ts

@@ -4,7 +4,7 @@ export function render(
   props: Record<string | number, unknown>,
   key: string
 ) {
-  if (!props.__skipCssInterop && typeof type.cssInterop === "function") {
+  if (typeof type.cssInterop === "function" && !props.__skipCssInterop) {
     return type.cssInterop(jsx, type, props, key);
   } else {
     return jsx(type, props, key);