react-native-css 3.0.7 → 3.1.0-rc.0

package/src/compiler/selector-builder.ts

@@ -260,7 +260,12 @@ function parseComponents(
           ? // [data-*] are turned into `dataSet` queries
             ["d", toRNProperty(component.name.replace("data-", ""))]
           : // Everything else is turned into `attribute` queries
-            ["a", toRNProperty(component.name)];
+            [
+              "a",
+              component.name.startsWith("aria-")
+                ? component.name
+                : toRNProperty(component.name),
+            ];
         if (component.operation) {
           let operator: AttrSelectorOperator | undefined;
           switch (component.operation.operator) {
@@ -289,6 +294,15 @@ function parseComponents(
           if (operator) {
             // Append the operator onto the attribute query
             attributeQuery.push(operator, component.operation.value);
+            if (
+              component.operation.caseSensitivity === "ascii-case-insensitive"
+            ) {
+              attributeQuery.push("i");
+            } else if (
+              component.operation.caseSensitivity === "explicit-case-sensitive"
+            ) {
+              attributeQuery.push("s");
+            }
           }
         }
         getAttributeQuery(ref).push(attributeQuery);
@@ -311,7 +325,7 @@ function parseComponents(
         getAttributeQuery(ref).unshift([
           "a",
           "className",
-          "*=",
+          "~=",
           component.name,
         ]);
       } else {
@@ -464,11 +478,23 @@ function parseIsWhereComponents(
         ? // [data-*] are turned into `dataSet` queries
           ["d", toRNProperty(component.name.replace("data-", ""))]
         : // Everything else is turned into `attribute` queries
-          ["a", toRNProperty(component.name)];
+          [
+            "a",
+            component.name.startsWith("aria-")
+              ? component.name
+              : toRNProperty(component.name),
+          ];
       if (component.operation) {
         const operator = operatorMap[component.operation.operator];
         // Append the operator onto the attribute query
         attributeQuery.push(operator, component.operation.value);
+        if (component.operation.caseSensitivity === "ascii-case-insensitive") {
+          attributeQuery.push("i");
+        } else if (
+          component.operation.caseSensitivity === "explicit-case-sensitive"
+        ) {
+          attributeQuery.push("s");
+        }
       }
       queries ??= [{ specificity: [] }];
       for (const query of queries) {

package/src/components/ImageBackground.tsx

@@ -12,12 +12,8 @@ import {
 import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNImageBackground> = {
-  className: {
-    target: "style",
-    nativeStyleMapping: {
-      backgroundColor: true,
-    },
-  },
+  className: "style",
+  imageClassName: "imageStyle",
 };
 
 export const ImageBackground = copyComponentProperties(

package/src/components/KeyboardAvoidingView.tsx

@@ -12,9 +12,8 @@ import {
 import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNKeyboardAvoidingView> = {
-  className: {
-    target: "style",
-  },
+  className: "style",
+  contentContainerClassName: "contentContainerStyle",
 };
 
 export const KeyboardAvoidingView = copyComponentProperties(

package/src/components/index.cts

@@ -90,7 +90,7 @@ module.exports = {
     return require("react-native").TouchableNativeFeedback;
   },
   get TouchableWithoutFeedback() {
-    return require("react-native").TouchableWithoutFeedback;
+    return require("./TouchableWithoutFeedback").TouchableWithoutFeedback;
   },
   get VirtualizedSectionList() {
     return require("react-native").VirtualizedSectionList;
@@ -260,4 +260,49 @@ module.exports = {
   get VirtualViewMode() {
     return require("react-native").VirtualViewMode;
   },
+  get EventEmitter() {
+    return require("react-native").EventEmitter;
+  },
+  get unstable_NativeText() {
+    return require("react-native").unstable_NativeText;
+  },
+  get unstable_NativeView() {
+    return require("react-native").unstable_NativeView;
+  },
+  get unstable_VirtualArray() {
+    return require("react-native").unstable_VirtualArray;
+  },
+  get unstable_createVirtualCollectionView() {
+    return require("react-native").unstable_createVirtualCollectionView;
+  },
+  get unstable_VirtualColumn() {
+    return require("react-native").unstable_VirtualColumn;
+  },
+  get unstable_VirtualColumnGenerator() {
+    return require("react-native").unstable_VirtualColumnGenerator;
+  },
+  get unstable_VirtualRow() {
+    return require("react-native").unstable_VirtualRow;
+  },
+  get unstable_getScrollParent() {
+    return require("react-native").unstable_getScrollParent;
+  },
+  get unstable_DEFAULT_INITIAL_NUM_TO_RENDER() {
+    return require("react-native").unstable_DEFAULT_INITIAL_NUM_TO_RENDER;
+  },
+  get NativeComponentRegistry() {
+    return require("react-native").NativeComponentRegistry;
+  },
+  get ReactNativeVersion() {
+    return require("react-native").ReactNativeVersion;
+  },
+  get useAnimatedValueXY() {
+    return require("react-native").useAnimatedValueXY;
+  },
+  get useAnimatedColor() {
+    return require("react-native").useAnimatedColor;
+  },
+  get usePressability() {
+    return require("react-native").usePressability;
+  },
 };

package/src/jest/index.ts

@@ -21,7 +21,7 @@ export const testID = "react-native-css";
 beforeEach(() => {
   StyleCollection.styles.clear();
   dimensions.set(Dimensions.get("window"));
-  Appearance.setColorScheme(null);
+  Appearance.setColorScheme("unspecified");
   colorScheme.set(null);
 });
 

package/src/metro/cache-version.ts

@@ -0,0 +1,48 @@
+import { createHash } from "node:crypto";
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+
+import type { CompilerOptions } from "../compiler";
+
+/**
+ * Expo's supervising worker bypasses a custom worker's getCacheKey hook.
+ * Put the engine fingerprint in Metro's top level cacheVersion instead so
+ * both supervised and direct workers invalidate compiled CSS after an update.
+ */
+export function getCacheVersion(
+  cacheVersion: string | undefined,
+  options: CompilerOptions | undefined,
+) {
+  const root = dirname(__dirname);
+  const hash = createHash("sha256");
+
+  function visit(directory: string) {
+    for (const entry of readdirSync(directory, { withFileTypes: true }).sort(
+      (a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0),
+    )) {
+      const file = join(directory, entry.name);
+      if (entry.isDirectory()) {
+        if (!["__tests__", "__fixtures__", "__mocks__"].includes(entry.name)) {
+          visit(file);
+        }
+      } else if (
+        entry.isFile() &&
+        /\.[cm]?[jt]sx?$/.test(entry.name) &&
+        !/\.d\.[cm]?ts$/.test(entry.name) &&
+        !/\.(test|spec)\.[cm]?[jt]sx?$/.test(entry.name)
+      ) {
+        // Relative names keep identical installations independent of location.
+        hash.update(relative(root, file).split("\\").join("/"));
+        hash.update("\0");
+        hash.update(readFileSync(file));
+        hash.update("\0");
+      }
+    }
+  }
+
+  // Cover transitive engine helpers as well as the transformer itself. Maps,
+  // declarations, and tests do not affect the generated application code.
+  visit(root);
+  hash.update(JSON.stringify(options ?? {}));
+  return `${cacheVersion ?? ""}:react-native-css:${hash.digest("hex")}`;
+}

package/src/metro/index.ts

@@ -4,6 +4,7 @@ import { versions } from "node:process";
 import type { MetroConfig } from "metro-config";
 
 import { type CompilerOptions } from "../compiler";
+import { getCacheVersion } from "./cache-version";
 import { nativeResolver, webResolver } from "./resolver";
 import { setupTypeScript } from "./typescript";
 
@@ -47,6 +48,7 @@ export function withReactNativeCSS<
 
   return {
     ...config,
+    cacheVersion: getCacheVersion(config.cacheVersion, options),
     transformerPath: require.resolve("./metro-transformer"),
     transformer: {
       ...config.transformer,

package/src/metro/metro-transformer.ts

@@ -2,24 +2,27 @@ 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";
 
+type TransformResponse = Awaited<
+  ReturnType<typeof import("metro-transform-worker").transform>
+>;
+
 const worker =
   // eslint-disable-next-line @typescript-eslint/no-require-imports
   require(unstable_transformerPath) as typeof import("metro-transform-worker");
 
 export async function transform(
-  config: JsTransformerConfig,
+  config: JsTransformerConfig & {
+    reactNativeCSS?: CompilerOptions | undefined;
+  },
   projectRoot: string,
   filePath: string,
   data: Buffer,
-  options: JsTransformOptions & {
-    reactNativeCSS?: CompilerOptions | undefined;
-  },
+  options: JsTransformOptions,
 ): Promise<TransformResponse> {
   const isCss = options.type !== "asset" && /\.(s?css|sass)$/.test(filePath);
 
@@ -37,7 +40,7 @@ export async function transform(
   const css = cssFile.output[0].data.css.code.toString();
 
   const productionJS = compile(css, {
-    ...options.reactNativeCSS,
+    ...config.reactNativeCSS,
     filename: filePath,
     projectRoot: projectRoot,
   }).stylesheet();

package/src/metro/typescript.ts

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import { existsSync, readFileSync, writeFileSync } from "fs";
+import { dirname, relative, resolve } from "node:path";
 
 import { CommentArray, parse, stringify } from "comment-json";
 
@@ -16,11 +17,17 @@ export function setupTypeScript(
     }
 
     const configFileName = ts.findConfigFile(
-      "./",
+      resolve("."),
       ts.sys.fileExists,
       "tsconfig.json",
     );
 
+    if (!configFileName) return;
+
+    const configDirectory = dirname(resolve(configFileName));
+    const environmentFile = resolve(envPath);
+    const relativeEnvironmentFile = relative(configDirectory, environmentFile);
+
     const userConfig = parse(
       readFileSync(configFileName, {
         encoding: "utf-8",
@@ -30,7 +37,8 @@ export function setupTypeScript(
     if (
       typeof userConfig !== "object" ||
       !userConfig ||
-      Array.isArray(userConfig)
+      Array.isArray(userConfig) ||
+      Object.prototype.toString.call(userConfig) !== "[object Object]"
     ) {
       return;
     }
@@ -48,25 +56,64 @@ export function setupTypeScript(
       output.push(`Created ${cyan(envPath)}`);
     }
 
-    userConfig.include ??= new CommentArray(envPath);
     if (
       Array.isArray(userConfig.include) &&
-      !userConfig.include.includes(envPath)
+      !(
+        Array.isArray(userConfig.files) &&
+        userConfig.files.includes(relativeEnvironmentFile)
+      ) &&
+      !userConfig.include.includes(relativeEnvironmentFile)
     ) {
-      userConfig.include.push(envPath);
+      userConfig.include.push(relativeEnvironmentFile);
       updatedConfig = true;
       output.push(
         `Updated ${configFileName} to include the ${cyan(envPath)} file`,
       );
     }
 
+    // Resolve inheritance on a copy so comments and the user's own settings survive.
+    const effectiveConfig = ts.parseJsonConfigFileContent(
+      JSON.parse(JSON.stringify(userConfig)),
+      ts.sys,
+      configDirectory,
+      {},
+      resolve(configFileName),
+    );
+    if (
+      !effectiveConfig.fileNames.some(
+        (file: string) => resolve(file) === environmentFile,
+      )
+    ) {
+      // A files entry can include the declaration even when inherited include or
+      // exclude settings omit it. Preserve the original implicit include as well.
+      if (
+        effectiveConfig.raw.include === undefined &&
+        effectiveConfig.raw.files === undefined
+      ) {
+        userConfig.include = new CommentArray("**/*");
+      }
+      userConfig.files ??= new CommentArray(
+        ...(effectiveConfig.raw.files || []),
+      );
+      if (
+        Array.isArray(userConfig.files) &&
+        !userConfig.files.includes(relativeEnvironmentFile)
+      ) {
+        userConfig.files.push(relativeEnvironmentFile);
+        updatedConfig = true;
+        output.push(
+          `Updated ${configFileName} to include the ${cyan(envPath)} file`,
+        );
+      }
+    }
+
     if (updatedConfig) {
       writeFileSync(configFileName, stringify(userConfig, null, 2));
     }
 
     if (output.length) {
       console.log(
-        `${cyan(bold("NativeWind"))} made the following changes to your project to support TypeScript:\n  - ${output.join("\n  - ")}`,
+        `${cyan(bold("Nativewind"))} made the following changes to your project to support TypeScript:\n  - ${output.join("\n  - ")}`,
       );
     }
   } catch {}

package/src/native/api.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable  */
-import { useContext, useState, type ComponentType } from "react";
-import { Appearance } from "react-native";
+import { useContext, useEffect, useState, type ComponentType } from "react";
+import { Appearance, type ViewStyle } from "react-native";
 
 import type { StyleDescriptor } from "react-native-css/compiler";
 import { VariableContext } from "react-native-css/native-internal";
@@ -9,12 +9,14 @@ import type {
   ColorScheme,
   Props,
   ReactComponent,
+  Styled,
   StyledConfiguration,
   StyledOptions,
 } from "../runtime.types";
 import { mappingToConfig, useNativeCss } from "./react/useNativeCss";
 import { usePassthrough } from "./react/usePassthrough";
 import {
+  cleanupEffect,
   colorScheme as colorSchemeObs,
   VAR_SYMBOL,
   type Effect,
@@ -40,12 +42,9 @@ const defaultMapping: StyledConfiguration<ComponentType<{ style: unknown }>> = {
  * @param baseComponent
  * @param mapping
  */
-export const styled = <
-  const C extends ReactComponent<any>,
-  const M extends StyledConfiguration<C>,
->(
-  baseComponent: C,
-  mapping: M = defaultMapping as M,
+export const styled: Styled = (
+  baseComponent: ReactComponent<any>,
+  mapping: StyledConfiguration<any> = defaultMapping,
   options?: StyledOptions,
 ) => {
   let component: any;
@@ -73,7 +72,7 @@ export const colorScheme: ColorScheme = {
     return colorSchemeObs.get() ?? Appearance.getColorScheme() ?? "light";
   },
   set(value) {
-    return colorSchemeObs.set(value);
+    return colorSchemeObs.set(value === "unspecified" ? null : value);
   },
 };
 
@@ -97,28 +96,35 @@ export function useNativeVariable(name: string) {
   }
 
   const inheritedVariables = useContext(VariableContext);
-  const [effect, setState] = useState(() => {
+  const [, forceUpdate] = useState(0);
+  const [effect] = useState(() => {
     const effect: Effect = {
       observers: new Set(),
-      run: () => setState((state) => ({ ...state })),
+      run: () => forceUpdate((state) => state + 1),
     };
 
     const get: Getter = (observable) => observable.get(effect);
 
-    return { ...effect, get };
+    return Object.assign(effect, { get });
   });
 
+  useEffect(() => {
+    // React StrictMode replays setup after cleanup without another render.
+    if (effect.observers.size === 0) forceUpdate((state) => state + 1);
+    return () => cleanupEffect(effect);
+  }, [effect]);
+  cleanupEffect(effect);
   return resolveValue([{}, "var", [name]], effect.get, { inheritedVariables });
 }
 
 /**
  * @deprecated Use `<VariableContextProvider />` instead.
  */
-export function vars(variables: Record<string, StyleDescriptor>) {
+export function vars(variables: Record<string, StyleDescriptor>): ViewStyle {
   return Object.assign(
     { [VAR_SYMBOL]: "inline" },
     Object.fromEntries(
       Object.entries(variables).map(([k, v]) => [k.replace(/^--/, ""), v]),
     ),
-  );
+  ) as ViewStyle;
 }

package/src/native/conditions/attributes.ts

@@ -11,7 +11,7 @@ export function testAttributes(
 }
 
 function testAttribute(
-  [type, prop, operator, testValue]: AttributeQuery,
+  [type, prop, operator, testValue, caseSensitivity]: AttributeQuery,
   props: Record<string, unknown> | undefined | null,
   guards: RenderGuard[],
 ) {
@@ -32,21 +32,38 @@ function testAttribute(
     return value !== undefined && value !== null && value !== false;
   }
 
+  if (operator === "!") return !value;
+  if (value === undefined || value === null || testValue === undefined)
+    return false;
+
+  if (
+    typeof value !== "string" &&
+    typeof value !== "number" &&
+    typeof value !== "boolean"
+  )
+    return false;
+  let actual = String(value);
+  if (caseSensitivity === "i") {
+    // CSS attribute flags fold ASCII letters only, not Unicode characters.
+    actual = actual.replace(/[A-Z]/g, (letter) => letter.toLowerCase());
+    testValue = testValue.replace(/[A-Z]/g, (letter) => letter.toLowerCase());
+  }
+
   switch (operator) {
-    case "!":
-      return !value;
     case "=":
-      return value == testValue;
+      return actual === testValue;
     case "~=":
-      return testValue && value?.toString().split(" ").includes(testValue);
+      return (
+        testValue !== "" && actual.split(/[\t\n\f\r ]+/).includes(testValue)
+      );
     case "|=":
-      return testValue && value?.toString().startsWith(testValue + "-");
+      return actual === testValue || actual.startsWith(testValue + "-");
     case "^=":
-      return testValue && value?.toString().startsWith(testValue);
+      return testValue !== "" && actual.startsWith(testValue);
     case "$=":
-      return testValue && value?.toString().endsWith(testValue);
+      return testValue !== "" && actual.endsWith(testValue);
     case "*=":
-      return testValue && value?.toString().includes(testValue);
+      return testValue !== "" && actual.includes(testValue);
     default:
       operator satisfies never;
       return false;

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

@@ -16,7 +16,7 @@ import {
   type ContainerContextValue,
   type Getter,
 } from "../reactivity";
-// import { testAttributes } from "./attributes";
+import { testAttributes } from "./attributes";
 import type { RenderGuard } from "./guards";
 
 export const DEFAULT_CONTAINER_NAME = "c:___default___";
@@ -47,15 +47,17 @@ export function testContainerQuery(
     return false;
   }
 
-  // if (query.a && !testAttributes(query.a, container.props, guards)) {
-  //   return false;
-  // }
+  // Ancestor snapshots have their own context guard. Their attributes must not
+  // be compared with this descendant's props by the ordinary attribute guards.
+  if (query.a && !testAttributes(query.a, container.props, [])) {
+    return false;
+  }
 
-  if (query.m && !testContainerMediaCondition(query.m, container, get)) {
+  if (query.m && !testContainerMediaCondition(query.m, container.key, get)) {
     return false;
   }
 
-  if (query.p && !testContainerPseudoCondition(query.p, container, get)) {
+  if (query.p && !testContainerPseudoCondition(query.p, container.key, get)) {
     return false;
   }
 
@@ -119,11 +121,11 @@ function testContainerMediaCondition(
         case ">":
           return left > right;
         case ">=":
-          return left > right;
+          return left >= right;
         case "<":
-          return left > right;
+          return left < right;
         case "<=":
-          return left > right;
+          return left <= right;
         default:
           condition[0] satisfies never;
           return false;

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

@@ -39,7 +39,7 @@ function testComparison(mediaQuery: MediaCondition, get: Getter): Boolean {
 
   switch (mediaQuery[1]) {
     case "dir":
-      return (I18nManager.isRTL && value === "rtl") || value === "ltr";
+      return value === (I18nManager.isRTL ? "rtl" : "ltr");
     case "hover":
       return true;
     case "platform":

package/src/native/react/interaction.ts

@@ -11,7 +11,7 @@ import {
 
 const mainCache = new WeakMap<
   WeakKey,
-  WeakMap<Function, (event: any) => void>
+  Map<InteractionType, WeakMap<Function, (event: any) => void>>
 >();
 
 type Handler = (event: unknown) => void;
@@ -40,14 +40,19 @@ const defaultHandlers: Record<InteractionType, Handler> = {
 export function getInteractionHandler(
   weakKey: WeakKey,
   type: InteractionType,
-  handler = defaultHandlers[type],
+  handler?: Handler | null,
 ) {
-  let cache = mainCache.get(weakKey);
-  if (!cache) {
-    cache = new WeakMap();
-    mainCache.set(weakKey, cache);
+  handler ??= defaultHandlers[type];
+  let interactions = mainCache.get(weakKey);
+  if (!interactions) {
+    interactions = new Map();
+    mainCache.set(weakKey, interactions);
   }
 
+  // A caller may reuse one callback for events that update opposite states.
+  let cache = interactions.get(type);
+  if (!cache) interactions.set(type, (cache = new WeakMap()));
+
   let cached = cache.get(handler);
   if (!cached) {
     cached = (event: any) => {

package/src/native/react/rules.ts

@@ -8,6 +8,7 @@ import type { RenderGuard } from "../conditions/guards";
 import { getDeepPath } from "../objects";
 import {
   activeFamily,
+  cleanupEffect,
   containerLayoutFamily,
   focusFamily,
   hoverFamily,
@@ -30,6 +31,7 @@ export function updateRules(
   forceUpdate = false,
   isRerender = true,
 ): ComponentState {
+  cleanupEffect(state.ruleEffect);
   const guards: RenderGuard[] = [];
   const rules = new Set<StyleRule | InlineVariable | VariableContextValue>();
   if (forceUpdate) {
@@ -144,13 +146,19 @@ export function updateRules(
           containers = {
             ...inheritedContainers,
             // This container becomes the default container
-            [DEFAULT_CONTAINER_NAME]: state.ruleEffectGetter,
+            [DEFAULT_CONTAINER_NAME]: {
+              key: state.ruleEffectGetter,
+              props: currentProps,
+            },
           };
         }
 
         // This this component as the named container
         for (const name of rule.c) {
-          containers![name] = state.ruleEffectGetter;
+          containers![name] = {
+            key: state.ruleEffectGetter,
+            props: currentProps,
+          };
         }
 
         // Enable hover/active/focus/layout handlers
@@ -212,14 +220,14 @@ export function updateRules(
     };
   }
 
-  if (usesVariables || variables) {
+  if (usesVariables || variables || inlineVariables.size) {
     rules.add(inheritedVariables);
 
     if (inlineVariables.size) {
       variables = Object.assign(
         {},
-        variables,
         inheritedVariables,
+        variables,
         ...Array.from(inlineVariables),
         { [VAR_SYMBOL]: true },
       );
@@ -243,7 +251,7 @@ export function updateRules(
   }
 
   // Remove this component from the old observer
-  state.stylesObs?.cleanup(state.ruleEffect);
+  state.stylesObs?.unsubscribe(state.styleEffect);
 
   return {
     ...state,