react-native-css 0.0.0-nightly.da5ce0f → 0.0.0-nightly.df32ce3

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;
   }
 
@@ -577,6 +584,12 @@ export class StylesheetBuilder {
     this.ruleTemplate.cq.push(query);
   }
 
+  addRootVariable(name: string, value: StyleDescriptor) {
+    this.shared.rootVariables ??= {};
+    this.shared.rootVariables[name] ??= [];
+    this.shared.rootVariables[name].push([value]);
+  }
+
   newAnimationFrames(name: string) {
     this.shared.animations ??= {};
 

package/src/compiler/supports.ts

@@ -21,8 +21,6 @@ export function supportsConditionValid(condition: SupportsCondition): boolean {
 }
 
 const declarations: Record<string, string[]> = {
-  // We don't actually support this, but its needed for Tailwind CSS
-  "-moz-orient": ["inline"],
   // Special text used by TailwindCSS. We should probably change this to all color-mix
-  "color": ["color-mix(in lab, red, red)"],
+  color: ["color-mix(in lab, red, red)"],
 };

package/src/components/FlatList.tsx

@@ -10,6 +10,7 @@ import {
 import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNFlatList> = {
+  className: "style",
   ListFooterComponentClassName: "ListFooterComponentStyle",
   ListHeaderComponentClassName: "ListHeaderComponentStyle",
   columnWrapperClassName: "columnWrapperStyle",

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 {}