react-native-css 3.0.0-nightly.75f8b74 → 3.0.0-nightly.9c84741

package/src/metro/index.ts

@@ -6,7 +6,7 @@ import connect from "connect";
 import debug from "debug";
 import type { MetroConfig } from "metro-config";
 
-import type { CompilerOptions } from "../compiler";
+import type { CompilerOptions, ReactNativeCssStyleSheet } from "../compiler";
 import { compile } from "../compiler/compiler";
 import { getNativeInjectionCode, getWebInjectionCode } from "./injection-code";
 import { nativeResolver, webResolver } from "./resolver";
@@ -53,16 +53,18 @@ export function withReactNativeCSS<
   const originalMiddleware = config.server?.enhanceMiddleware;
   const originalResolver = config.resolver?.resolveRequest;
 
-  const poisonPillPath = "./poison.pill";
-
   return {
     ...config,
     transformerPath: require.resolve("./metro-transformer"),
+    transformer: {
+      ...config.transformer,
+      reactNativeCSS: options,
+    },
     resolver: {
       ...config.resolver,
       sourceExts: [...(config?.resolver?.sourceExts || []), "css"],
       resolveRequest: (context, moduleName, platform) => {
-        if (moduleName === poisonPillPath) {
+        if (moduleName.includes("poison.pill")) {
           return { type: "empty" };
         }
 
@@ -93,7 +95,10 @@ export function withReactNativeCSS<
         if (!bundler.__react_native_css__patched) {
           bundler.__react_native_css__patched = true;
 
-          const nativeCSSFiles = new Map();
+          const nativeCSSFiles = new Map<
+            string,
+            [string, ReactNativeCssStyleSheet]
+          >();
           const webCSSFiles = new Set<string>();
 
           const nativeInjectionPath = require.resolve(
@@ -158,7 +163,7 @@ export function withReactNativeCSS<
                     // Let the transformer know that we will handle compilation
                     customTransformOptions: {
                       ...transformOptions.customTransformOptions,
-                      reactNativeCSSCompile: false,
+                      reactNativeCSS: options,
                     },
                   },
                   fileBuffer,
@@ -174,7 +179,7 @@ export function withReactNativeCSS<
                     next,
                     compile(next, {
                       hexColors: options?.hexColors,
-                    }),
+                    }).stylesheet(),
                   ]);
 
                   watcher.emit("change", {

package/src/metro/injection-code.ts

@@ -1,17 +1,13 @@
 /**
- * This is a hack around Expo's handling of CSS files.
+ * This is a hack around Metro's handling of bundles.
  * When a component is inside a lazy() barrier, it is inside a different JS bundle.
  * So when it updates, it only updates its local bundle, not the global one which contains the CSS files.
  *
- * To fix this, we force our code to always import the CSS files.
- * Now the CSS files are in every bundle.
+ * This means that the CSS file will not be re-evaluated when a component in a different bundle updates,
+ * breaking tools like Tailwind CSS
  *
- * We achieve this by collecting all CSS files and injecting them into a special file
- * which is included inside react-native-css's runtime.
- *
- * This is why both of these function add imports for the CSS files.
+ * To fix this, we force our code to always import the CSS files, so now the CSS files are in every bundle.
  */
-
 export function getWebInjectionCode(filePaths: string[]) {
   const importStatements = filePaths
     .map((filePath) => `import "${filePath}";`)
@@ -27,12 +23,12 @@ export function getNativeInjectionCode(
   const importStatements = cssFilePaths
     .map((filePath) => `import "${filePath}";`)
     .join("\n");
-  const importPath = `import { StyleCollection } from "./api";`;
+
   const contents = values
     .map((value) => `StyleCollection.inject(${JSON.stringify(value)});`)
     .join("\n");
 
   return Buffer.from(
-    `${importStatements}\n${importPath}\n${contents};export {};`,
+    `import { StyleCollection } from "react-native-css/style-collection";\n${importStatements}\n${contents};export {};`,
   );
 }

package/src/metro/metro-transformer.ts

@@ -1,31 +1,48 @@
+import { unstable_transformerPath } from "@expo/metro-config";
 import type {
   JsTransformerConfig,
   JsTransformOptions,
   TransformResponse,
 } from "metro-transform-worker";
 
+import { compile, type CompilerOptions } from "../compiler";
+import { getNativeInjectionCode } from "./injection-code";
+
 const worker =
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  require("@expo/metro-config/build/transform-worker/transform-worker.js") as typeof import("metro-transform-worker");
+  require(unstable_transformerPath) as typeof import("metro-transform-worker");
 
-export function transform(
+export async function transform(
   config: JsTransformerConfig,
   projectRoot: string,
   filePath: string,
   data: Buffer,
-  options: JsTransformOptions,
+  options: JsTransformOptions & {
+    reactNativeCSS?: CompilerOptions | undefined;
+  },
 ): Promise<TransformResponse> {
   const isCss = options.type !== "asset" && /\.(s?css|sass)$/.test(filePath);
-  const skipCompile =
-    options.customTransformOptions &&
-    "reactNativeCSSCompile" in options.customTransformOptions &&
-    options.customTransformOptions.reactNativeCSSCompile === false;
 
-  if (!isCss || skipCompile) {
+  if (options.platform === "web" || !isCss) {
     return worker.transform(config, projectRoot, filePath, data, options);
   }
 
-  // TODO - compile the CSS file inline
+  const cssFile = (await worker.transform(config, projectRoot, filePath, data, {
+    ...options,
+    platform: "web",
+  })) as TransformResponse & {
+    output: [{ data: { css: { code: Buffer } } }];
+  };
+
+  const css = cssFile.output[0].data.css.code.toString();
+
+  const productionJS = compile(css, {
+    ...options.reactNativeCSS,
+    filename: filePath,
+    projectRoot: projectRoot,
+  }).stylesheet();
+
+  data = Buffer.from(getNativeInjectionCode([], [productionJS]));
 
-  return worker.transform(config, projectRoot, filePath, data, options);
+  return worker.transform(config, projectRoot, `${filePath}.js`, data, options);
 }

package/src/metro/resolver.ts

@@ -45,6 +45,14 @@ export function nativeResolver(
     return resolver(context, `react-native-css/components`, platform);
   }
 
+  if (moduleName === "react-native-safe-area-context") {
+    return resolver(
+      context,
+      `react-native-css/components/react-native-safe-area-context`,
+      platform,
+    );
+  }
+
   // We only care about `react-native/Library/Components/<module>.js` components
   const segments = resolution.filePath.split(sep);
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/src/poison.pill.ts

@@ -1,8 +1,11 @@
-throw new Error(`react-native-css has encountered a setup error. 
+const canWarn = process.env.NODE_ENV !== "test";
 
-┌─────-─┐
-| Metro | 
-└─────-─┘
+if (canWarn) {
+  throw new Error(`react-native-css has encountered a setup error. 
+
+┌───────┐
+│ Metro │ 
+└───────┘
 
 Either your metro.config.js is missing the 'withReactNativeCSS' wrapper OR
 the resolver.resolveRequest function of your config is being overridden, and not calling the parent resolver.
@@ -16,17 +19,18 @@ module.exports = with3rdPartyPlugin(
 )
 \`\`\`
 
-┌─────------─┐
-| NativeWind | 
-└─────------─┘
+┌────────────┐
+│ NativeWind │ 
+└────────────┘
 
-If you are using NativeWind with the 'withNativeWind' function, follow the Metro instructions above, but use 'withNativeWind' instead of 'withReactNativeCSS'.
+If you are using NativeWind follow the Metro instructions above but use 'withNativeWind' instead of 'withReactNativeCSS'.
 
-┌─────----------─┐
-| Other bundlers | 
-└─────----------─┘
+┌────────────────┐
+│ Other bundlers │ 
+└────────────────┘
 
 If you are using another bundler (Vite, Webpack, etc), or non-Metro framework (Next.js, Remix, etc), please ensure you have included 'react-native-css/babel' as a babel preset.
 `);
+}
 
 export {};

package/src/runtime/native/api.ts

@@ -21,7 +21,9 @@ import {
 } from "./reactivity";
 import { resolveValue } from "./styles/resolve";
 
-export { StyleCollection } from "./injection";
+export { StyleCollection } from "react-native-css/style-collection";
+
+export { useNativeCss };
 
 /**
  * Generates a new Higher-Order component the wraps the base component and applies the styles.

package/src/runtime/native/conditions/attributes.ts

@@ -0,0 +1,52 @@
+import type { AttributeQuery } from "../../../compiler";
+import type { Props } from "../../runtime.types";
+import type { RenderGuard } from "./guards";
+
+export function testAttributes(
+  queries: AttributeQuery[],
+  props: Props,
+  guards: RenderGuard[],
+) {
+  return queries.every((query) => testAttribute(query, props, guards));
+}
+
+function testAttribute(
+  [type, prop, operator, testValue]: AttributeQuery,
+  props: Props,
+  guards: RenderGuard[],
+) {
+  let value: unknown;
+
+  if (type === "a") {
+    value = props?.[prop];
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    value = props?.dataSet?.[prop];
+  }
+
+  guards.push([type, prop, value]);
+
+  if (!operator) {
+    return value !== undefined && value !== null && value !== false;
+  }
+
+  switch (operator) {
+    case "!":
+      return !value;
+    case "=":
+      return value == testValue;
+    case "~=":
+      return testValue && value?.toString().split(" ").includes(testValue);
+    case "|=":
+      return testValue && value?.toString().startsWith(testValue + "-");
+    case "^=":
+      return testValue && value?.toString().startsWith(testValue);
+    case "$=":
+      return testValue && value?.toString().endsWith(testValue);
+    case "*=":
+      return testValue && value?.toString().includes(testValue);
+    default:
+      operator satisfies never;
+      return false;
+  }
+}

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

@@ -14,8 +14,9 @@ import {
   focusFamily,
   hoverFamily,
   type ContainerContextValue,
-  type Effect,
+  type Getter,
 } from "../reactivity";
+// import { testAttributes } from "./attributes";
 import type { RenderGuard } from "./guards";
 
 export const DEFAULT_CONTAINER_NAME = "c:___default___";
@@ -24,10 +25,10 @@ export function testContainerQueries(
   queries: ContainerQuery[],
   inheritedContainers: ContainerContextValue,
   guards: RenderGuard[],
-  effect: Effect,
+  get: Getter,
 ) {
   return queries.every((query) => {
-    return testContainerQuery(query, inheritedContainers, guards, effect);
+    return testContainerQuery(query, inheritedContainers, guards, get);
   });
 }
 
@@ -35,7 +36,7 @@ export function testContainerQuery(
   query: ContainerQuery,
   inheritedContainers: ContainerContextValue,
   guards: RenderGuard[],
-  effect?: Effect,
+  get: Getter,
 ): boolean {
   const name = query.n ?? DEFAULT_CONTAINER_NAME;
   const container = inheritedContainers[name]!;
@@ -46,11 +47,15 @@ export function testContainerQuery(
     return false;
   }
 
-  if (query.m && !testContainerMediaCondition(query.m, container, effect)) {
+  // if (query.a && !testAttributes(query.a, container.props, guards)) {
+  //   return false;
+  // }
+
+  if (query.m && !testContainerMediaCondition(query.m, container, get)) {
     return false;
   }
 
-  if (query.p && !testContainerPseudoCondition(query.p, container, effect)) {
+  if (query.p && !testContainerPseudoCondition(query.p, container, get)) {
     return false;
   }
 
@@ -60,15 +65,15 @@ export function testContainerQuery(
 function testContainerPseudoCondition(
   query: PseudoClassesQuery,
   containerKey: WeakKey,
-  effect?: Effect,
+  get: Getter,
 ): boolean {
-  if (query.h && !hoverFamily(containerKey).get(effect)) {
+  if (query.h && !get(hoverFamily(containerKey))) {
     return false;
   }
-  if (query.a && !activeFamily(containerKey).get(effect)) {
+  if (query.a && !get(activeFamily(containerKey))) {
     return false;
   }
-  if (query.f && !focusFamily(containerKey).get(effect)) {
+  if (query.f && !get(focusFamily(containerKey))) {
     return false;
   }
   return true;
@@ -77,18 +82,18 @@ function testContainerPseudoCondition(
 function testContainerMediaCondition(
   condition: MediaCondition,
   containerKey: WeakKey,
-  effect?: Effect,
+  get: Getter,
 ): boolean {
   switch (condition[0]) {
     case "!":
-      return !testContainerMediaCondition(condition[1], containerKey, effect);
+      return !testContainerMediaCondition(condition[1], containerKey, get);
     case "&":
       return condition[1].every((query) => {
-        return testContainerMediaCondition(query, containerKey, effect);
+        return testContainerMediaCondition(query, containerKey, get);
       });
     case "|":
       return condition[1].some((query) => {
-        return testContainerMediaCondition(query, containerKey, effect);
+        return testContainerMediaCondition(query, containerKey, get);
       });
     case "!!":
       return false;
@@ -99,7 +104,7 @@ function testContainerMediaCondition(
     case "<":
     case "<=":
     case "=": {
-      const left = getContainerFeatureValue(condition[1], containerKey, effect);
+      const left = getContainerFeatureValue(condition[1], containerKey, get);
       const right = condition[2];
 
       if (condition[0] === "=") {
@@ -133,21 +138,21 @@ function testContainerMediaCondition(
 function getContainerFeatureValue(
   name: MediaFeatureNameFor_ContainerSizeFeatureId,
   containerKey: WeakKey,
-  effect?: Effect,
+  get: Getter,
 ): StyleDescriptor {
   switch (name) {
     case "width":
-      return containerWidthFamily(containerKey).get(effect);
+      return get(containerWidthFamily(containerKey));
     case "height":
-      return containerHeightFamily(containerKey).get(effect);
+      return get(containerHeightFamily(containerKey));
     case "aspect-ratio": {
-      const width = containerWidthFamily(containerKey).get(effect);
-      const height = containerWidthFamily(containerKey).get(effect);
+      const width = get(containerWidthFamily(containerKey));
+      const height = get(containerHeightFamily(containerKey));
       return width / height;
     }
     case "orientation":
-      const width = containerWidthFamily(containerKey).get(effect);
-      const height = containerWidthFamily(containerKey).get(effect);
+      const width = get(containerWidthFamily(containerKey));
+      const height = get(containerHeightFamily(containerKey));
       return width > height ? "landscape" : "portrait";
     case "inline-size":
     case "block-size":

package/src/runtime/native/conditions/guards.ts

@@ -2,7 +2,6 @@
 import type { ComponentState } from "../react/useNativeCss";
 import type {
   ContainerContextValue,
-  Effect,
   VariableContextValue,
 } from "../reactivity";
 
@@ -10,7 +9,7 @@ export type RenderGuard =
   | ["a", string, any]
   | ["d", string, any]
   | ["v", string, any]
-  | ["c", string, Effect];
+  | ["c", string, WeakKey];
 
 export function testGuards(
   state: ComponentState,

package/src/runtime/native/conditions/index.ts

@@ -1,40 +1,36 @@
-/* eslint-disable */
-import type {
-  AttributeQuery,
-  PseudoClassesQuery,
-  StyleRule,
-} from "../../../compiler";
+import type { PseudoClassesQuery, StyleRule } from "../../../compiler";
 import type { Props } from "../../runtime.types";
 import {
   activeFamily,
   focusFamily,
   hoverFamily,
   type ContainerContextValue,
-  type Effect,
+  type Getter,
 } from "../reactivity";
+import { testAttributes } from "./attributes";
 import { testContainerQueries } from "./container-query";
 import type { RenderGuard } from "./guards";
 import { testMediaQuery } from "./media-query";
 
 export function testRule(
   rule: StyleRule,
-  effect: Effect,
+  get: Getter,
   props: Props,
   guards: RenderGuard[],
   containerContext: ContainerContextValue,
 ) {
-  if (rule.p && !pseudoClasses(rule.p, effect)) {
+  if (rule.p && !pseudoClasses(rule.p, get)) {
     return false;
   }
-  if (rule.m && !testMediaQuery(rule.m, effect)) {
+  if (rule.m && !testMediaQuery(rule.m, get)) {
     return false;
   }
-  if (rule.aq && !attributes(rule.aq, props, guards)) {
+  if (rule.aq && !testAttributes(rule.aq, props, guards)) {
     return false;
   }
   if (
     rule.cq &&
-    !testContainerQueries(rule.cq, containerContext, guards, effect)
+    !testContainerQueries(rule.cq, containerContext, guards, get)
   ) {
     return false;
   }
@@ -42,65 +38,17 @@ export function testRule(
   return true;
 }
 
-function pseudoClasses(query: PseudoClassesQuery, effect: Effect) {
-  if (query.h && !hoverFamily(effect).get(effect)) {
+function pseudoClasses(query: PseudoClassesQuery, get: Getter) {
+  // IMPORTANT: active needs: to be first. Modifies a global value
+  // that we use to determine if the component should be a pressable
+  if (query.a && !get(activeFamily(get))) {
     return false;
   }
-  if (query.a && !activeFamily(effect).get(effect)) {
+  if (query.h && !get(hoverFamily(get))) {
     return false;
   }
-  if (query.f && !focusFamily(effect).get(effect)) {
+  if (query.f && !get(focusFamily(get))) {
     return false;
   }
   return true;
 }
-
-function attributes(
-  queries: AttributeQuery[],
-  props: Props,
-  guards: RenderGuard[],
-) {
-  return queries.every((query) => testAttribute(query, props, guards));
-}
-
-function testAttribute(
-  query: AttributeQuery,
-  props: Props,
-  guards: RenderGuard[],
-) {
-  let value: any;
-
-  if (query[0] === "a") {
-    value = props?.[query[1]];
-  } else {
-    value = props?.dataSet?.[query[1]];
-  }
-
-  guards.push([query[0], query[1], value]);
-
-  const operator = query[2];
-
-  if (!operator) {
-    return value !== undefined && value !== null && value !== false;
-  }
-
-  switch (operator) {
-    case "!":
-      return !value;
-    case "=":
-      return value == query[3];
-    case "~=":
-      return value?.toString().split(" ").includes(query[3]);
-    case "|=":
-      return value?.toString().startsWith(query[3] + "-");
-    case "^=":
-      return value?.toString().startsWith(query[3]);
-    case "$=":
-      return value?.toString().endsWith(query[3]);
-    case "*=":
-      return value?.toString().includes(query[3]);
-    default:
-      operator satisfies never;
-      return false;
-  }
-}

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

@@ -1,74 +1,78 @@
 /* eslint-disable */
-import { PixelRatio, Platform } from "react-native";
+import { I18nManager, PixelRatio, Platform } from "react-native";
 
 import type { MediaCondition } from "../../../compiler";
-import { colorScheme, vh, vw, type Effect } from "../reactivity";
+import { colorScheme, vh, vw, type Getter } from "../reactivity";
 
-export function testMediaQuery(mediaQueries: MediaCondition[], effect: Effect) {
-  return mediaQueries.every((query) => test(query, effect));
+export function testMediaQuery(mediaQueries: MediaCondition[], get: Getter) {
+  return mediaQueries.every((query) => test(query, get));
 }
 
-function test(mediaQuery: MediaCondition, effect: Effect): Boolean {
+function test(mediaQuery: MediaCondition, get: Getter): Boolean {
   switch (mediaQuery[0]) {
     case "[]":
     case "!!":
       return false;
     case "!":
-      return !test(mediaQuery[1], effect);
+      return !test(mediaQuery[1], get);
     case "&":
       return mediaQuery[1].every((query) => {
-        return test(query, effect);
+        return test(query, get);
       });
     case "|":
       return mediaQuery[1].some((query) => {
-        return test(query, effect);
+        return test(query, get);
       });
     case ">":
     case ">=":
     case "<":
     case "<=":
     case "=": {
-      return testComparison(mediaQuery, effect);
+      return testComparison(mediaQuery, get);
     }
   }
 }
 
-function testComparison(mediaQuery: MediaCondition, effect: Effect): Boolean {
-  let left: number | undefined;
-  const right = mediaQuery[2];
+function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean {
+  const value = mediaQuery[2];
 
   switch (mediaQuery[1]) {
+    case "dir":
+      return (I18nManager.isRTL && value === "rtl") || value === "ltr";
+    case "hover":
+      return true;
     case "platform":
-      return right === Platform.OS;
+      return value === "native" || value === Platform.OS;
     case "prefers-color-scheme": {
-      return right === colorScheme.get(effect);
+      return value === get(colorScheme);
     }
     case "display-mode":
-      return right === "native" || Platform.OS === right;
+      return value === "native" || Platform.OS === value;
     case "min-width":
-      return typeof right === "number" && vw.get(effect) >= right;
+      return typeof value === "number" && get(vw) >= value;
     case "max-width":
-      return typeof right === "number" && vw.get(effect) <= right;
+      return typeof value === "number" && get(vw) <= value;
     case "min-height":
-      return typeof right === "number" && vh.get(effect) >= right;
+      return typeof value === "number" && get(vh) >= value;
     case "max-height":
-      return typeof right === "number" && vh.get(effect) <= right;
+      return typeof value === "number" && get(vh) <= value;
     case "orientation":
-      return right === "landscape"
-        ? vh.get(effect) < vw.get(effect)
-        : vh.get(effect) >= vw.get(effect);
+      return value === "landscape" ? get(vh) < get(vw) : get(vh) >= get(vw);
   }
 
-  if (typeof right !== "number") {
+  if (typeof value !== "number") {
     return false;
   }
 
+  let left: number | undefined;
+  const right = value;
+
   switch (mediaQuery[1]) {
     case "width":
-      left = vw.get(effect);
+      left = get(vw);
       break;
     case "height":
-      left = vh.get(effect);
+      left = get(vh);
       break;
     case "resolution":
       left = PixelRatio.get();