react-native-css 3.0.0-nightly.fa5e95b → 3.0.0-preview.0

package/src/compiler/compiler.ts

@@ -19,8 +19,8 @@ import { parseContainerCondition } from "./container-query";
 import { parseDeclaration } from "./declarations";
 import { extractKeyFrames } from "./keyframes";
 import { parseMediaQuery } from "./media-query";
-import { getSelectors } from "./selectors";
 import { StylesheetBuilder } from "./stylesheet";
+import { supportsConditionValid } from "./supports";
 
 const defaultLogger = debug("react-native-css:compiler");
 
@@ -105,9 +105,10 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
 
   // Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
   lightningcss({
-    filename: "style.css", // This is ignored, but required
     code: typeof code === "string" ? new TextEncoder().encode(code) : code,
     visitor,
+    filename: options.filename ?? "style.css",
+    projectRoot: options.projectRoot ?? process.cwd(),
   });
 
   return {
@@ -165,14 +166,9 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
 
       const declarationBlock = value.declarations;
       const mapping = parsePropAtRule(value.rules);
-      const selectors = getSelectors(
-        value.selectors,
-        false,
-        builder.getOptions(),
-      );
 
       // If the rule is a style declaration, extract it with the `getExtractedStyle` function and store it in the `declarations` map
-      builder = builder.fork("style", selectors);
+      builder = builder.fork("style", value.selectors);
 
       if (declarationBlock) {
         if (declarationBlock.declarations) {
@@ -205,6 +201,13 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
         extractRule(layerRule, builder);
       }
       break;
+    case "supports":
+      if (supportsConditionValid(rule.value.condition)) {
+        for (const layerRule of rule.value.rules) {
+          extractRule(layerRule, builder);
+        }
+      }
+      break;
     case "custom":
     case "font-face":
     case "font-palette-values":
@@ -217,7 +220,6 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
     case "unknown":
     case "import":
     case "page":
-    case "supports":
     case "counter-style":
     case "moz-document":
     case "nesting":
@@ -293,7 +295,7 @@ function extractContainer(
   };
 
   if (containerRule.name) {
-    query.n = containerRule.name;
+    query.n = `c:${containerRule.name}`;
   }
 
   builder.addContainerQuery(query);

package/src/compiler/compiler.types.ts

@@ -5,8 +5,9 @@ import type { MediaFeatureNameFor_MediaFeatureId } from "lightningcss";
 import { VAR_SYMBOL } from "../runtime/native/reactivity";
 
 export interface CompilerOptions {
+  filename?: string;
+  projectRoot?: string;
   inlineRem?: number | false;
-  grouping?: (string | RegExp)[];
   selectorPrefix?: string;
   stylesheetOrder?: number;
   features?: FeatureFlagRecord;
@@ -23,9 +24,7 @@ export interface CompilerOptions {
 /**
  * A `react-native-css` StyleSheet
  */
-export type ReactNativeCssStyleSheet = ReactNativeCssStyleSheet_V2;
-
-export interface ReactNativeCssStyleSheet_V2 {
+export interface ReactNativeCssStyleSheet {
   /** Feature flags */
   f?: FeatureFlagRecord;
   /** rem */
@@ -33,7 +32,7 @@ export interface ReactNativeCssStyleSheet_V2 {
   /** StyleRuleSets */
   s?: (readonly [string, StyleRuleSet])[];
   /** KeyFrames */
-  k?: Animation_V2[];
+  k?: Animation[];
   /** Root Variables */
   vr?: RootVariables;
   /** Universal Variables */
@@ -99,10 +98,8 @@ export type StyleDeclaration =
   | Record<string, StyleDescriptor>
   /** A style that needs to be set  */
   | [StyleDescriptor, string | string[]]
-  /** A value that can only be computed at runtime */
-  | [StyleFunction, string | string[]]
   /** A value that can only be computed at runtime, and only after styles have been calculated */
-  | [StyleFunction, string | string[], 1];
+  | [StyleDescriptor, string | string[], 1];
 
 export type StyleDescriptor =
   | string
@@ -159,11 +156,11 @@ export type InlineVariable = {
   [key: string]: unknown | undefined;
 };
 
-/******************************   Animations V2  ******************************/
+/******************************   Animations  ******************************/
 
-export type Animation_V2 = [string, AnimationKeyframes_V2[]];
-export type AnimationRecord = Record<string, AnimationKeyframes_V2[]>;
-export type AnimationKeyframes_V2 = [string | number, StyleDeclaration[]];
+export type Animation = [string, AnimationKeyframes[]];
+export type AnimationRecord = Record<string, AnimationKeyframes[]>;
+export type AnimationKeyframes = [string | number, StyleDeclaration[]];
 
 /******************************    Conditions    ******************************/
 
@@ -179,7 +176,7 @@ export type MediaCondition =
   // Comparison
   | [
       MediaFeatureComparison,
-      MediaFeatureNameFor_MediaFeatureId | MediaFeatureNameFor_MediaFeatureId,
+      MediaFeatureNameFor_MediaFeatureId | "dir",
       StyleDescriptor,
     ]
   // [Start, End]
@@ -258,7 +255,7 @@ export type LoggerOptions = {
 export interface CompilerCollection extends CompilerOptions {
   features: FeatureFlagRecord;
   rules: Map<string, StyleRule[]>;
-  keyframes: Map<string, AnimationKeyframes_V2[]>;
+  keyframes: Map<string, AnimationKeyframes[]>;
   darkMode?: string | null;
   rootVariables: VariableRecord;
   universalVariables: VariableRecord;