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

package/src/babel/import-plugin.ts

@@ -1,4 +1,4 @@
-import { resolve } from "path";
+import { basename, dirname, resolve, sep } from "path";
 
 import { type PluginObj } from "@babel/core";
 import type { Statement } from "@babel/types";
@@ -16,6 +16,7 @@ import {
 import {
   handleReactNativeWebIdentifierRequire,
   handleReactNativeWebImport,
+  handleReactNativeWebInteropRequireDefault,
   handleReactNativeWebObjectPatternRequire,
 } from "./react-native-web";
 
@@ -24,10 +25,14 @@ export default function ({
 }: {
   types: BabelTypes;
 }): PluginObj<PluginState> {
-  const processed = new WeakSet();
+  const processed = new WeakSet<Statement>();
 
-  const thisModuleDist = resolve(__dirname, "../../../dist");
-  const thisModuleSrc = resolve(__dirname, "../../../src");
+  const packageRoot = resolve(
+    __dirname,
+    basename(dirname(__dirname)) === "src" ? "../.." : "../../..",
+  );
+  const thisModuleDist = resolve(packageRoot, "dist") + sep;
+  const thisModuleSrc = resolve(packageRoot, "src") + sep;
 
   function isFromThisModule(filename: string): boolean {
     return (
@@ -39,17 +44,19 @@ export default function ({
     name: "Rewrite react-native to react-native-css",
     visitor: {
       ImportDeclaration(path, state): void {
+        const { filename } = state;
+
         if (
-          processed.has(path) ||
+          filename === undefined ||
           processed.has(path.node) ||
-          isFromThisModule(state.filename)
+          isFromThisModule(filename)
         ) {
           return;
         }
 
         const statements =
-          handleReactNativeImport(path.node, t, state.filename) ??
-          handleReactNativeWebImport(path.node, t, state.filename);
+          handleReactNativeImport(path.node, t, filename) ??
+          handleReactNativeWebImport(path.node, t, filename);
 
         if (!statements) {
           return;
@@ -62,10 +69,12 @@ export default function ({
         path.replaceWithMultiple(statements);
       },
       VariableDeclaration(path, state): void {
+        const { filename } = state;
+
         if (
-          processed.has(path) ||
+          filename === undefined ||
           processed.has(path.node) ||
-          isFromThisModule(state.filename)
+          isFromThisModule(filename)
         ) {
           return;
         }
@@ -94,6 +103,11 @@ export default function ({
           return;
         }
 
+        // A local function called require is not the module loader.
+        if (path.scope.getBinding("require")) {
+          return;
+        }
+
         const initArg = init.arguments.at(0);
 
         if (!initArg) {
@@ -114,14 +128,14 @@ export default function ({
               t,
               id.name,
               initArg.value,
-              state.filename,
+              filename,
             ) ??
             handleReactNativeWebIdentifierRequire(
               path,
               t,
               id.name,
               initArg.value,
-              state.filename,
+              filename,
             );
         } else if (
           t.isObjectPattern(id) &&
@@ -134,14 +148,14 @@ export default function ({
               t,
               id,
               initArg.value,
-              state.filename,
+              filename,
             ) ??
             handleReactNativeWebObjectPatternRequire(
               path,
               t,
               id,
               initArg.value,
-              state.filename,
+              filename,
             );
         } else if (
           t.isIdentifier(id) &&
@@ -152,12 +166,13 @@ export default function ({
           if (!source) {
             return;
           }
-          statements = handleReactNativeWebIdentifierRequire(
+          statements = handleReactNativeWebInteropRequireDefault(
             path,
             t,
             id.name,
+            init,
             source,
-            state.filename,
+            filename,
           );
         }
 

package/src/babel/react-native-web.ts

@@ -1,7 +1,6 @@
-import { resolve } from "path";
-
 import { type NodePath } from "@babel/traverse";
 import tBabelTypes, {
+  type CallExpression,
   type ImportDeclaration,
   type ObjectPattern,
   type Statement,
@@ -9,12 +8,13 @@ import tBabelTypes, {
 } from "@babel/types";
 
 import { allowedModules } from "./allowedModules";
+import { resolveImportSource } from "./helpers";
 
 type BabelTypes = typeof tBabelTypes;
 
 function parseReactNativeWebSource(source: string, filename: string) {
   if (source.startsWith(".")) {
-    source = resolve(filename, source);
+    source = resolveImportSource(filename, source);
 
     const internalPath = source.split("react-native-web/dist")[1];
     if (!internalPath) {
@@ -48,6 +48,7 @@ export function handleReactNativeWebImport(
   filename: string,
 ): Statement[] | undefined {
   const { specifiers, source } = declaration;
+  if (declaration.importKind && declaration.importKind !== "value") return;
 
   const rnwSource = parseReactNativeWebSource(source.value, filename);
   if (!rnwSource) {
@@ -76,7 +77,7 @@ export function handleReactNativeWebImport(
       } else {
         statements.push(
           t.importDeclaration(
-            [t.importSpecifier(specifier.local, specifier.local)],
+            [t.importSpecifier(specifier.local, t.identifier(name))],
             t.stringLiteral(`react-native-css/components/${name}`),
           ),
         );
@@ -89,6 +90,10 @@ export function handleReactNativeWebImport(
         ),
       );
     } else {
+      if (specifier.importKind && specifier.importKind !== "value") {
+        statements.push(t.importDeclaration([specifier], source));
+        continue;
+      }
       const localName = t.isStringLiteral(specifier.imported)
         ? specifier.imported.value
         : specifier.imported.name;
@@ -158,6 +163,28 @@ export function handleReactNativeWebIdentifierRequire(
   }
 }
 
+export function handleReactNativeWebInteropRequireDefault(
+  path: NodePath<VariableDeclaration>,
+  t: BabelTypes,
+  id: string,
+  init: CallExpression,
+  source: string,
+  filename: string,
+) {
+  const parsed = parseReactNativeWebSource(source, filename);
+  if (!parsed) return;
+
+  const wrapped = t.cloneNode(init);
+  wrapped.arguments = [
+    t.callExpression(t.identifier("require"), [t.stringLiteral(parsed.source)]),
+  ];
+  return [
+    t.variableDeclaration(path.node.kind, [
+      t.variableDeclarator(t.identifier(id), wrapped),
+    ]),
+  ];
+}
+
 export function handleReactNativeWebObjectPatternRequire(
   path: NodePath<VariableDeclaration>,
   t: BabelTypes,
@@ -180,6 +207,7 @@ export function handleReactNativeWebObjectPatternRequire(
       // We need to exit as we do not handle `const { Text, ...rest } = require('react-native-web');`
       return;
     } else if (
+      identifier.computed ||
       !(t.isIdentifier(identifier.value) && t.isIdentifier(identifier.key))
     ) {
       // Bail out on anything that isn't `const { <key>: <identifier> } = require('react-native-web');`

package/src/babel/react-native.ts

@@ -1,5 +1,3 @@
-import { dirname, resolve } from "path";
-
 import { type NodePath } from "@babel/traverse";
 import tBabelTypes, {
   type ImportDeclaration,
@@ -9,12 +7,13 @@ import tBabelTypes, {
 } from "@babel/types";
 
 import { allowedModules } from "./allowedModules";
+import { resolveImportSource } from "./helpers";
 
 type BabelTypes = typeof tBabelTypes;
 
 function parseReactNativeSource(source: string, filename: string) {
   if (source.startsWith(".")) {
-    source = resolve(dirname(filename), source);
+    source = resolveImportSource(filename, source);
 
     const internalPath = source.split("react-native/Libraries/Components/")[1];
     if (!internalPath) {
@@ -48,6 +47,7 @@ export function handleReactNativeImport(
   filename: string,
 ): Statement[] | undefined {
   const { specifiers, source } = declaration;
+  if (declaration.importKind && declaration.importKind !== "value") return;
 
   const rnwSource = parseReactNativeSource(source.value, filename);
   if (!rnwSource) {
@@ -76,7 +76,7 @@ export function handleReactNativeImport(
       } else {
         statements.push(
           t.importDeclaration(
-            [t.importSpecifier(specifier.local, specifier.local)],
+            [t.importSpecifier(specifier.local, t.identifier(name))],
             t.stringLiteral(`react-native-css/components/${name}`),
           ),
         );
@@ -89,6 +89,10 @@ export function handleReactNativeImport(
         ),
       );
     } else {
+      if (specifier.importKind && specifier.importKind !== "value") {
+        statements.push(t.importDeclaration([specifier], source));
+        continue;
+      }
       const localName = t.isStringLiteral(specifier.imported)
         ? specifier.imported.value
         : specifier.imported.name;
@@ -180,6 +184,7 @@ export function handleReactNativeObjectPatternRequire(
       // We need to exit as we do not handle `const { Text, ...rest } = require('react-native');`
       return;
     } else if (
+      identifier.computed ||
       !(t.isIdentifier(identifier.value) && t.isIdentifier(identifier.key))
     ) {
       // Bail out on anything that isn't `const { <key>: <identifier> } = require('react-native');`

package/src/compiler/atRules.ts

@@ -1,4 +1,5 @@
 import type {
+  Declaration,
   DeclarationBlock,
   ParsedComponent,
   Rule,
@@ -99,6 +100,49 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
   return mapping;
 }
 
+const mappingProperty = "-rn-native-mapping";
+
+export function isMappingProperty(name: string) {
+  return name === mappingProperty || name.startsWith(`${mappingProperty}-`);
+}
+
+/** Declaration metadata survives the optimizer flattening nested at rules. */
+export function parsePropDeclarations(declarations: Declaration[] = []) {
+  const mapping: StyleRuleMapping = {};
+  for (const declaration of declarations) {
+    if (
+      declaration.property !== "custom" ||
+      !isMappingProperty(declaration.value.name)
+    ) {
+      continue;
+    }
+    const { name, value } = declaration.value;
+    const target = value.filter(
+      (item): item is Extract<TokenOrValue, { type: "token" }> =>
+        item.type === "token" && item.value.type !== "white-space",
+    );
+    if (target.length === 0) continue;
+    nativeMappingAtRuleBlock(
+      [
+        {
+          type: "token",
+          value: {
+            type: "ident",
+            value:
+              name === mappingProperty
+                ? "*"
+                : name.slice(mappingProperty.length + 1),
+          },
+        },
+        { type: "token", value: { type: "colon" } },
+        ...target,
+      ],
+      mapping,
+    );
+  }
+  return mapping;
+}
+
 function nativeMappingAtRuleBlock(
   token: Extract<TokenOrValue, { type: "token" }>[],
   mapping: StyleRuleMapping = {},

package/src/compiler/compiler.ts

@@ -4,22 +4,36 @@ import { inspect } from "node:util";
 import { debug } from "debug";
 import {
   type ContainerRule,
-  type MediaQuery as CSSMediaQuery,
   type CustomAtRules,
   type MediaRule,
+  type ParsedComponent,
+  type PropertyRule,
   type Rule,
   type Visitor,
+  type Warning,
 } from "lightningcss";
 
-import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
+import {
+  maybeMutateReactNativeOptions,
+  parsePropAtRule,
+  parsePropDeclarations,
+} from "./atRules";
 import type {
   CompilerOptions,
   ContainerQuery,
+  StyleDescriptor,
   StyleRuleMapping,
   UniqueVarInfo,
 } from "./compiler.types";
 import { parseContainerCondition } from "./container-query";
-import { parseDeclaration, round } from "./declarations";
+import {
+  parseAngle,
+  parseColor,
+  parseDeclaration,
+  parseLength,
+  reduceParseUnparsed,
+  round,
+} from "./declarations";
 import { inlineVariables } from "./inline-variables";
 import { extractKeyFrames } from "./keyframes";
 import { lightningcssLoader } from "./lightningcss-loader";
@@ -29,6 +43,21 @@ import { supportsConditionValid } from "./supports";
 
 const defaultLogger = debug("react-native-css:compiler");
 
+// lightningcss reports this package's own at-rule as unknown
+const OWN_AT_RULE_WARNING = "Unknown at rule: @nativeMapping";
+
+// The warning is the only record of what lightningcss could not parse; only the first pass reads the author's CSS
+function reportSyntaxWarnings(
+  builder: StylesheetBuilder,
+  warnings: Warning[],
+): void {
+  for (const warning of warnings) {
+    if (warning.message !== OWN_AT_RULE_WARNING) {
+      builder.addSyntaxWarning(warning.message);
+    }
+  }
+}
+
 /**
  * Converts a CSS file to a collection of style declarations that can be used with the StyleSheet API
  *
@@ -74,17 +103,60 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
 
   const vars = new Map<string, UniqueVarInfo>();
 
-  const firstPassVisitor: Visitor<CustomAtRules> = {};
+  // Determine the effective rem multiplier for compile-time inlining.
+  // If inlineRem is explicitly set, use that. Otherwise, scan for
+  // :root { font-size: Npx } in the CSS to allow CSS-based configuration.
+  let effectiveRem: number | false = options.inlineRem ?? undefined!;
+  if (effectiveRem === undefined) {
+    const css = typeof code === "string" ? code : code.toString();
+    const match = css.match(/:root\s*\{[^}]*font-size:\s*([\d.]+)px/);
+    effectiveRem = match?.[1] ? parseFloat(match[1]) : 14;
+    options.inlineRem = effectiveRem;
+  }
+
+  const firstPassVisitor: Visitor<CustomAtRules> = {
+    Rule(rule) {
+      if (
+        rule.type === "unknown" &&
+        ["cssInterop", "react-native"].includes(rule.value.name)
+      ) {
+        throw new Error(
+          `Unsupported @${rule.value.name} configuration. Use the compiler inlineVariables.exclude option to preserve variables, @media (prefers-color-scheme: dark) for dark mode, and React Native Appearance.setColorScheme() for manual selection.`,
+        );
+      }
+      // Reject before variable inlining can erase an unsupported condition and
+      // accidentally turn its values into unconditional declarations.
+      if (
+        rule.type === "style" &&
+        rule.value.selectors.some(
+          (selector) =>
+            selector.some(
+              (part) => part.type === "pseudo-class" && part.kind === "root",
+            ) &&
+            selector.some(
+              (part) =>
+                part.type === "class" ||
+                (part.type === "attribute" && part.name === "class"),
+            ),
+        )
+      ) {
+        throw new Error(
+          "Class-qualified :root selectors are unsupported on native. Use @media (prefers-color-scheme: dark) for dark mode, and React Native Appearance.setColorScheme() for manual selection.",
+        );
+      }
+    },
+  };
 
-  if (options.inlineRem !== false) {
+  if (effectiveRem !== false) {
+    const remMultiplier = effectiveRem;
     firstPassVisitor.Length = (length) => {
-      if (length.unit !== "rem" || options.inlineRem === false) {
+      if (length.unit !== "rem") {
         return length;
       }
 
       return {
         unit: "px",
-        value: round(length.value * (options.inlineRem ?? 14)),
+        value: round(length.value * remMultiplier),
       };
     };
   }
@@ -114,7 +186,7 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
     };
   }
 
-  const { code: firstPass } = lightningcss({
+  const { code: firstPass, warnings: firstPassWarnings } = lightningcss({
     code: typeof code === "string" ? new TextEncoder().encode(code) : code,
     include: Features.DoublePositionGradients | Features.ColorFunction,
     exclude: Features.VendorPrefixes,
@@ -175,6 +247,8 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
     projectRoot: options.projectRoot ?? process.cwd(),
   });
 
+  reportSyntaxWarnings(builder, firstPassWarnings);
+
   return {
     stylesheet: () => builder.getNativeStyleSheet(),
     warnings: () => builder.getWarnings(),
@@ -233,7 +307,12 @@ function extractRule(
       const value = rule.value;
 
       const declarationBlock = value.declarations;
-      mapping = { ...mapping, ...parsePropAtRule(value.rules) };
+      mapping = {
+        ...mapping,
+        ...parsePropAtRule(value.rules),
+        ...parsePropDeclarations(declarationBlock?.declarations),
+        ...parsePropDeclarations(declarationBlock?.importantDeclarations),
+      };
 
       // If the rule is a style declaration, extract it with the `getExtractedStyle` function and store it in the `declarations` map
       builder = builder.fork("style", value.selectors);
@@ -276,13 +355,15 @@ function extractRule(
         }
       }
       break;
+    case "property":
+      extractPropertyRule(rule.value, builder);
+      break;
     case "custom":
     case "font-face":
     case "font-palette-values":
     case "font-feature-values":
     case "namespace":
     case "layer-statement":
-    case "property":
     case "view-transition":
     case "ignored":
     case "unknown":
@@ -314,39 +395,16 @@ function extractMedia(
   builder: StylesheetBuilder,
   mapping: StyleRuleMapping,
 ) {
-  builder = builder.fork("media");
-
-  // Initialize an empty array to store screen media queries
-  const media: CSSMediaQuery[] = [];
-
-  // Iterate over all media queries in the mediaRule
+  // Comma separated queries are alternatives. Each branch inherits the outer
+  // conditions without adding its siblings as required conjunctions.
   for (const mediaQuery of mediaRule.query.mediaQueries) {
-    if (
-      // If this is only a media query
-      (mediaQuery.mediaType === "print" && mediaQuery.qualifier !== "not") ||
-      // If this is a @media not print {}
-      // We can only do this if there are no conditions, as @media not print and (min-width: 100px) could be valid
-      (mediaQuery.mediaType !== "print" &&
-        mediaQuery.qualifier === "not" &&
-        mediaQuery.condition === null)
-    ) {
+    const queryBuilder = builder.fork("media");
+    if (!parseMediaQuery(mediaQuery, queryBuilder)) {
       continue;
     }
-
-    media.push(mediaQuery);
-  }
-
-  if (media.length === 0) {
-    return;
-  }
-
-  for (const m of media) {
-    parseMediaQuery(m, builder);
-  }
-
-  // Iterate over all rules in the mediaRule and extract their styles using the updated CompilerCollection
-  for (const rule of mediaRule.rules) {
-    extractRule(rule, builder, mapping);
+    for (const rule of mediaRule.rules) {
+      extractRule(rule, queryBuilder, mapping);
+    }
   }
 }
 
@@ -363,9 +421,12 @@ function extractContainer(
   builder = builder.fork("container");
 
   // Iterate over all rules inside the containerRule and extract their styles using the updated CompilerCollection
-  const query: ContainerQuery = {
-    m: parseContainerCondition(containerRule.condition, builder),
-  };
+  const condition = parseContainerCondition(containerRule.condition, builder);
+  if (!condition) {
+    // An unsupported condition must not turn into an unconditional container.
+    return;
+  }
+  const query: ContainerQuery = { m: condition };
 
   if (containerRule.name) {
     query.n = `c:${containerRule.name}`;
@@ -377,3 +438,58 @@ function extractContainer(
     extractRule(rule, builder, mapping);
   }
 }
+
+function extractPropertyRule(
+  propertyRule: PropertyRule,
+  builder: StylesheetBuilder,
+) {
+  const { initialValue, name } = propertyRule;
+
+  if (initialValue == null) {
+    return;
+  }
+
+  const varName = name.startsWith("--") ? name.slice(2) : name;
+  const value = parsePropertyInitialValue(initialValue, builder);
+
+  if (value !== undefined) {
+    builder.addRootVariable(varName, value);
+  }
+}
+
+function parsePropertyInitialValue(
+  component: ParsedComponent,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  switch (component.type) {
+    case "length":
+      return parseLength(component.value, builder);
+    case "number":
+    case "integer":
+      return round(component.value);
+    case "percentage":
+      return `${round(component.value * 100)}%`;
+    case "color":
+      return parseColor(component.value, builder);
+    case "angle":
+      return parseAngle(component.value, builder);
+    case "length-percentage":
+      return parseLength(component.value, builder);
+    case "token-list":
+      return reduceParseUnparsed(component.value, builder, "@property", false);
+    case "custom-ident":
+    case "literal":
+      return component.value;
+    case "repeated": {
+      const results = component.value.components
+        .map((c) => parsePropertyInitialValue(c, builder))
+        .filter((v): v is NonNullable<StyleDescriptor> => v !== undefined);
+      // Unwrap single-child repeated values so downstream consumers get a
+      // scalar instead of a 1-element array. For example, `<length>+` with
+      // initial-value `10px` should produce the same shape as `<length>`.
+      return results.length === 1 ? results[0] : results;
+    }
+    default:
+      return undefined;
+  }
+}

package/src/compiler/compiler.types.ts

@@ -24,6 +24,15 @@ export interface InlineVariableOptions {
   exclude?: `--${string}`[];
 }
 
+// A channel is absent when the compile recorded nothing on it
+export interface CompilerWarnings {
+  properties?: string[];
+  values?: Record<string, string[]>;
+  functions?: string[];
+  // CSS lightningcss could not parse, which the author fixes in their stylesheet
+  syntax?: string[];
+}
+
 /**
  * A `react-native-css` StyleSheet
  */

package/src/compiler/container-query.ts

@@ -36,9 +36,14 @@ function parseContainerQueryCondition(
       const query = parseContainerCondition(condition.value, builder);
       return query ? ["!", query] : undefined;
     case "operation":
-      const conditions = condition.conditions
-        .map((c) => parseContainerQueryCondition(c, builder))
-        .filter((v): v is MediaCondition => !!v);
+      const parsed = condition.conditions.map((c) =>
+        parseContainerCondition(c, builder),
+      );
+      if (condition.operator === "and" && parsed.some((c) => !c)) {
+        // Dropping a conjunct would broaden the query to unrelated containers.
+        return;
+      }
+      const conditions = parsed.filter((c): c is MediaCondition => !!c);
 
       if (conditions.length === 0) {
         return;