react-native-css 0.0.0-nightly.96f5ce2 → 0.0.0-nightly.d48061c

package/src/compiler/stylesheet.ts

@@ -331,15 +331,6 @@ export class StylesheetBuilder {
         forceTuple,
       );
     } else if (property.startsWith("--")) {
-      // If we have enabled variable usage tracking, skip unused variables
-      if (
-        this.options.stripUnusedVariables &&
-        !property.startsWith("--__rn-css") &&
-        !this.varUsage.has(property)
-      ) {
-        return;
-      }
-
       rule.v ??= [];
       rule.v.push([property.slice(2), value]);
     } else if (isStyleFunction(value)) {

package/src/metro/index.ts

@@ -2,7 +2,6 @@
 import { dirname, relative, sep } from "node:path";
 import { versions } from "node:process";
 
-import connect from "connect";
 import debug from "debug";
 import type { MetroConfig } from "metro-config";
 
@@ -50,9 +49,6 @@ export function withReactNativeCSS<
     setupTypeScript(typescriptEnvPath);
   }
 
-  const originalMiddleware = config.server?.enhanceMiddleware;
-  const originalResolver = config.resolver?.resolveRequest;
-
   return {
     ...config,
     transformerPath: require.resolve("./metro-transformer"),
@@ -68,13 +64,14 @@ export function withReactNativeCSS<
           return { type: "empty" };
         }
 
+        const parentResolver =
+          config.resolver?.resolveRequest ?? context.resolveRequest;
+
         // Don't hijack the resolution of react-native imports
         if (!globalClassNamePolyfill) {
-          const parentResolver = originalResolver ?? context.resolveRequest;
           return parentResolver(context, moduleName, platform);
         }
 
-        const parentResolver = originalResolver ?? context.resolveRequest;
         const resolver = platform === "web" ? webResolver : nativeResolver;
         const resolved = resolver(
           parentResolver,
@@ -88,8 +85,7 @@ export function withReactNativeCSS<
     },
     server: {
       ...config.server,
-      enhanceMiddleware(middleware, metroServer) {
-        const server = connect();
+      enhanceMiddleware(metroMiddleware, metroServer) {
         const bundler: any = metroServer.getBundler().getBundler();
 
         if (!bundler.__react_native_css__patched) {
@@ -230,9 +226,14 @@ export function withReactNativeCSS<
           };
         }
 
-        return originalMiddleware
-          ? server.use(originalMiddleware(middleware, metroServer))
-          : server.use(middleware);
+        /**
+         * We don't modify the middleware, we just use this function to get the metroServer
+         * So simply return the existing middleware
+         */
+        return (
+          config.server?.enhanceMiddleware?.(metroMiddleware, metroServer) ??
+          metroMiddleware
+        );
       },
     },
   };

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

@@ -103,7 +103,11 @@ export function applyDeclarations(
   target: Record<string, any> = {},
   topLevelTarget = target,
 ) {
+  const originalTarget = target;
+
   for (const declaration of declarations) {
+    target = originalTarget;
+
     if (!Array.isArray(declaration)) {
       // Static styles
       Object.assign(target, declaration);

package/src/runtime/native/styles/line-height.ts

@@ -0,0 +1,25 @@
+import type { StyleFunctionResolver } from "./resolve";
+
+export const lineHeight: StyleFunctionResolver = (resolve, func) => {
+  const value = resolve(func[2]);
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  let emValue = resolve([{}, "var", ["__rn-css-em"]]);
+
+  if (typeof emValue !== "number") {
+    emValue = resolve([{}, "var", ["__rn-css-rem"]]);
+  }
+
+  if (typeof emValue !== "number") {
+    return;
+  }
+
+  return round(value * emValue);
+};
+
+function round(number: number) {
+  return Math.round((number + Number.EPSILON) * 100) / 100;
+}

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

@@ -10,6 +10,7 @@ import { type Getter, type VariableContextValue } from "../reactivity";
 import type { calculateProps } from "./calculate-props";
 import { transformKeys } from "./defaults";
 import * as functions from "./functions";
+import { lineHeight } from "./line-height";
 import * as shorthands from "./shorthands";
 import { em, rem, vh, vw } from "./units";
 import { varResolver } from "./variables";
@@ -37,6 +38,7 @@ const functionResolvers = {
   ...shorthands,
   ...functions,
   animationName: shorthands.animation,
+  lineHeight,
   em,
   rem,
   vh,

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

@@ -1,3 +1,4 @@
+import type { StyleDescriptor } from "../../../../compiler";
 import { isStyleDescriptorArray } from "../../../utils";
 import type { StyleFunctionResolver } from "../resolve";
 import { shorthandHandler } from "./_handler";
@@ -9,6 +10,27 @@ const blurRadius = ["blurRadius", "number"] as const;
 const spreadDistance = ["spreadDistance", "number"] as const;
 // const inset = ["inset", "string"] as const;
 
+function deepFlattenToArrayOfStyleDescriptors(
+  arr: StyleDescriptor[],
+): StyleDescriptor[] {
+  const result: StyleDescriptor[] = [];
+  const stack = [arr];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (Array.isArray(current)) {
+      if (current.length > 0 && Array.isArray(current[0])) {
+        for (let i = current.length - 1; i >= 0; i--) {
+          const elem = current[i];
+          if (isStyleDescriptorArray(elem)) stack.push(elem);
+        }
+      } else {
+        result.push(current);
+      }
+    }
+  }
+  return result;
+}
+
 const handler = shorthandHandler(
   [
     [offsetX, offsetY, blurRadius, spreadDistance, color],
@@ -33,26 +55,10 @@ export const boxShadow: StyleFunctionResolver = (
   if (!isStyleDescriptorArray(args)) {
     return args;
   } else {
-    return args
-      .flatMap((shadows) => {
+    return deepFlattenToArrayOfStyleDescriptors(args)
+      .map((shadows) => {
         if (shadows === undefined) {
           return [];
-        } else if (isStyleDescriptorArray(shadows)) {
-          if (shadows.length === 0) {
-            return [];
-          } else if (Array.isArray(shadows[0])) {
-            return shadows
-              .map((shadow) => {
-                return omitTransparentShadows(
-                  handler(resolveValue, shadow, get, options),
-                );
-              })
-              .filter((v) => v !== undefined);
-          } else {
-            return omitTransparentShadows(
-              handler(resolveValue, shadows, get, options),
-            );
-          }
         } else {
           return omitTransparentShadows(
             handler(resolveValue, shadows, get, options),

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

@@ -48,7 +48,7 @@ export function varResolver(
 
   if (name in variables) {
     renderGuards?.push(["v", name, variables[name]]);
-    return variables[name];
+    return resolve(variables[name]);
   }
 
   variableHistory.add(name);