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

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";
 
@@ -26,8 +27,12 @@ export default function ({
 }): PluginObj<PluginState> {
   const processed = new WeakSet();
 
-  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 (
@@ -94,6 +99,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) {
@@ -152,10 +162,11 @@ export default function ({
           if (!source) {
             return;
           }
-          statements = handleReactNativeWebIdentifierRequire(
+          statements = handleReactNativeWebInteropRequireDefault(
             path,
             t,
             id.name,
+            init,
             source,
             state.filename,
           );

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

@@ -1,7 +1,8 @@
-import { resolve } from "path";
+import { dirname, resolve } from "path";
 
 import { type NodePath } from "@babel/traverse";
 import tBabelTypes, {
+  type CallExpression,
   type ImportDeclaration,
   type ObjectPattern,
   type Statement,
@@ -14,7 +15,7 @@ type BabelTypes = typeof tBabelTypes;
 
 function parseReactNativeWebSource(source: string, filename: string) {
   if (source.startsWith(".")) {
-    source = resolve(filename, source);
+    source = resolve(dirname(filename), source);
 
     const internalPath = source.split("react-native-web/dist")[1];
     if (!internalPath) {
@@ -48,6 +49,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 +78,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 +91,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 +164,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 +208,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

@@ -48,6 +48,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 +77,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 +90,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 +185,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,35 @@ 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,
 } 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";
@@ -74,17 +87,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;
+  }
 
-  if (options.inlineRem !== false) {
+  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 (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),
       };
     };
   }
@@ -233,7 +289,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 +337,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 +377,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 +403,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 +420,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/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;