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

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;