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

package/src/compiler/selector-builder.ts

@@ -63,9 +63,10 @@ export function getClassNameSelectors(
       } else if (isUniversalSelector(selector)) {
         return [{ type: "universalVariables" }];
       } else {
+        // A nested rule reads its parent's selector list again, so the list is never reversed in place
         return (
           parseComponents(
-            selector.reverse(),
+            selector.toReversed(),
             options,
             root,
             root,
@@ -260,7 +261,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 +295,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 +326,7 @@ function parseComponents(
         getAttributeQuery(ref).unshift([
           "a",
           "className",
-          "*=",
+          "~=",
           component.name,
         ]);
       } else {
@@ -464,11 +479,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/compiler/stylesheet.ts

@@ -9,6 +9,7 @@ import type {
   AnimationKeyframes,
   AnimationRecord,
   CompilerOptions,
+  CompilerWarnings,
   ContainerQuery,
   MediaCondition,
   ReactNativeCssStyleSheet,
@@ -68,8 +69,9 @@ export class StylesheetBuilder {
       ruleOrder: number;
       warningProperty?: string;
       warningProperties: string[];
-      warningValues: Record<string, unknown[]>;
+      warningValues: Record<string, string[]>;
       warningFunctions: string[];
+      syntaxWarnings: Set<string>;
     } = {
       ruleSets: {},
       rem: 14,
@@ -77,6 +79,7 @@ export class StylesheetBuilder {
       warningProperties: [],
       warningValues: {},
       warningFunctions: [],
+      syntaxWarnings: new Set(),
     },
     private selectors: SelectorList = [],
   ) {}
@@ -198,18 +201,17 @@ export class StylesheetBuilder {
   }
 
   addWarning(type: "property" | "value", property: string): void;
-  addWarning(type: "style", property: string, value: unknown): void;
+  addWarning(type: "style", property: string, value: string): void;
   addWarning(
     type: "property" | "style" | "value",
     property: string,
-    value?: unknown,
+    value: string = property,
   ): void {
     switch (type) {
       case "property":
         this.shared.warningProperties.push(property);
         break;
       case "value": {
-        value = property;
         property = this.shared.warningProperty ?? "";
 
         if (!property) {
@@ -227,12 +229,13 @@ export class StylesheetBuilder {
     }
   }
 
-  getWarnings() {
-    const result: {
-      properties?: string[];
-      values?: Record<string, unknown[]>;
-      functions?: string[];
-    } = {};
+  // A lightningcss message carries no position, so a repeated mistake is one entry
+  addSyntaxWarning(message: string): void {
+    this.shared.syntaxWarnings.add(message);
+  }
+
+  getWarnings(): CompilerWarnings {
+    const result: CompilerWarnings = {};
 
     if (this.shared.warningProperties.length) {
       result.properties = this.shared.warningProperties;
@@ -246,6 +249,10 @@ export class StylesheetBuilder {
       result.functions = this.shared.warningFunctions;
     }
 
+    if (this.shared.syntaxWarnings.size) {
+      result.syntax = [...this.shared.syntaxWarnings];
+    }
+
     return result;
   }
 

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,8 +4,10 @@ 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";
+import type { WarningLevel } from "./warnings";
 
 export interface WithReactNativeCSSOptions extends CompilerOptions {
   /* Specify the path to the TypeScript environment file. Defaults types-env.d.ts */
@@ -15,8 +17,12 @@ export interface WithReactNativeCSSOptions extends CompilerOptions {
   /** Add className to all React Native primitives. Defaults false */
   globalClassNamePolyfill?: boolean;
   hexColors?: boolean;
+  /** How native builds print the compiler's warnings. Defaults "summary" */
+  warnings?: WarningLevel;
 }
 
+export type { WarningLevel } from "./warnings";
+
 const metroOverrideResolution = {
   type: "sourceFile",
   filePath: require.resolve("./override"),
@@ -47,6 +53,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,30 @@ 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";
+import { reportCompilerWarnings, type WarningLevel } from "./warnings";
+
+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 & { warnings?: WarningLevel | undefined })
+      | 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);
 
@@ -36,11 +42,23 @@ export async function transform(
 
   const css = cssFile.output[0].data.css.code.toString();
 
-  const productionJS = compile(css, {
-    ...options.reactNativeCSS,
+  const { warnings: warningLevel, ...compilerOptions } =
+    config.reactNativeCSS ?? {};
+
+  const compiled = compile(css, {
+    ...compilerOptions,
     filename: filePath,
     projectRoot: projectRoot,
-  }).stylesheet();
+  });
+
+  const productionJS = compiled.stylesheet();
+
+  // Nothing downstream of the transformer sees the compile result, so this is the one place a build can report it
+  reportCompilerWarnings(compiled.warnings(), {
+    filename: filePath,
+    projectRoot,
+    level: warningLevel,
+  });
 
   data = Buffer.from(getNativeInjectionCode([], [productionJS]));
 

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/metro/warnings.ts

@@ -0,0 +1,187 @@
+import { relative } from "path";
+
+import type { CompilerWarnings } from "../compiler/compiler.types";
+
+/** "summary" prints one capped block per CSS file, "verbose" lists every entry, "none" prints nothing */
+export type WarningLevel = "none" | "summary" | "verbose";
+
+const SUMMARY_ENTRY_LIMIT = 10;
+const SUMMARY_VALUE_LIMIT = 5;
+const SUMMARY_VALUE_LENGTH_LIMIT = 60;
+
+const PREFIX = "react-native-css";
+
+// Metro re-transforms a CSS file on every rebuild, so a file's block prints again only when its warnings change
+const lastReportedByFile = new Map<string, string>();
+
+// Metro forwards each transform worker's stderr to the bundler's terminal, and a warning never fails the build
+export function reportCompilerWarnings(
+  warnings: CompilerWarnings,
+  options: {
+    filename: string;
+    projectRoot: string;
+    level?: WarningLevel | undefined;
+  },
+): void {
+  const { filename, projectRoot, level = "summary" } = options;
+
+  if (level === "none") {
+    return;
+  }
+
+  const message = formatCompilerWarnings(warnings, {
+    displayPath: toDisplayPath(filename, projectRoot),
+    verbose: level === "verbose",
+  });
+
+  if (message === undefined) {
+    lastReportedByFile.delete(filename);
+    return;
+  }
+
+  if (lastReportedByFile.get(filename) === message) {
+    return;
+  }
+
+  lastReportedByFile.set(filename, message);
+
+  console.warn(message);
+}
+
+// Plain text: Metro's transform workers write to a pipe, where colour would never render
+export function formatCompilerWarnings(
+  warnings: CompilerWarnings,
+  options: { displayPath: string; verbose?: boolean | undefined },
+): string | undefined {
+  const { displayPath, verbose = false } = options;
+
+  const droppedCount =
+    (warnings.properties?.length ?? 0) +
+    (warnings.functions?.length ?? 0) +
+    Object.values(warnings.values ?? {}).reduce(
+      (total, entries) => total + entries.length,
+      0,
+    );
+
+  // A syntax warning sends the reader to their stylesheet rather than to what React Native lacks, so it is counted apart
+  const syntaxCount = warnings.syntax?.length ?? 0;
+
+  if (droppedCount === 0 && syntaxCount === 0) {
+    return undefined;
+  }
+
+  const properties = limit(unique(warnings.properties), verbose);
+  const functions = limit(unique(warnings.functions), verbose);
+  const rendered = renderValues(warnings.values, verbose);
+  const values = limit(rendered.entries, verbose);
+  const syntax = limit(unique(warnings.syntax), verbose);
+
+  const claims: string[] = [];
+  if (droppedCount > 0) {
+    claims.push(
+      `${droppedCount} ${pluralize(droppedCount, "declaration")} dropped, no React Native equivalent`,
+    );
+  }
+  if (syntaxCount > 0) {
+    claims.push(`${syntaxCount} syntax ${pluralize(syntaxCount, "warning")}`);
+  }
+
+  const lines = [`${PREFIX}: ${displayPath} - ${claims.join("; ")}`];
+
+  if (syntax.shown.length > 0) {
+    lines.push(`  syntax: ${syntax.shown.join("; ")}${suffix(syntax.hidden)}`);
+  }
+
+  if (properties.shown.length > 0) {
+    lines.push(
+      `  properties: ${properties.shown.join(", ")}${suffix(properties.hidden)}`,
+    );
+  }
+
+  if (values.shown.length > 0) {
+    lines.push(`  values: ${values.shown.join("; ")}${suffix(values.hidden)}`);
+  }
+
+  if (functions.shown.length > 0) {
+    lines.push(
+      `  functions: ${functions.shown.join(", ")}${suffix(functions.hidden)}`,
+    );
+  }
+
+  if (
+    properties.hidden +
+      values.hidden +
+      functions.hidden +
+      rendered.hidden +
+      syntax.hidden >
+    0
+  ) {
+    lines.push(
+      `  Set reactNativeCSS.warnings to "verbose" for the full list, or "none" to silence this.`,
+    );
+  }
+
+  return lines.join("\n");
+}
+
+function toDisplayPath(filename: string, projectRoot: string): string {
+  const relativePath = relative(projectRoot, filename);
+
+  return relativePath === "" || relativePath.startsWith("..")
+    ? filename
+    : relativePath;
+}
+
+function renderValues(
+  values: Record<string, string[]> | undefined,
+  verbose: boolean,
+): { entries: string[]; hidden: number } {
+  let hidden = 0;
+  const entries: string[] = [];
+  const recordedByProperty = values ?? {};
+
+  for (const property of Object.keys(recordedByProperty).sort()) {
+    const distinct = unique(recordedByProperty[property]);
+    const shown = verbose ? distinct : distinct.slice(0, SUMMARY_VALUE_LIMIT);
+    hidden += distinct.length - shown.length;
+
+    const rendered = shown.map((value) => truncate(value, verbose));
+
+    entries.push(
+      `${property}: ${rendered.join(", ")}${suffix(distinct.length - shown.length)}`,
+    );
+  }
+
+  return { entries, hidden };
+}
+
+function limit<T>(entries: T[], verbose: boolean) {
+  if (verbose || entries.length <= SUMMARY_ENTRY_LIMIT) {
+    return { shown: entries, hidden: 0 };
+  }
+
+  return {
+    shown: entries.slice(0, SUMMARY_ENTRY_LIMIT),
+    hidden: entries.length - SUMMARY_ENTRY_LIMIT,
+  };
+}
+
+function suffix(hidden: number): string {
+  return hidden > 0 ? ` (+${hidden} more)` : "";
+}
+
+// Code-unit order rather than localeCompare, whose collation varies with the ICU build
+function unique(entries: string[] | undefined): string[] {
+  return entries ? [...new Set(entries)].sort() : [];
+}
+
+// An unresolved calc() is recorded as its whole lightningcss node, hundreds of characters long
+function truncate(value: string, verbose: boolean): string {
+  return verbose || value.length <= SUMMARY_VALUE_LENGTH_LIMIT
+    ? value
+    : `${value.slice(0, SUMMARY_VALUE_LENGTH_LIMIT)}...`;
+}
+
+function pluralize(count: number, noun: string): string {
+  return count === 1 ? noun : `${noun}s`;
+}