react-native-css 3.0.0-nightly.61014be → 3.0.0-nightly.67b5d08

package/src/compiler/compiler.ts

@@ -1,4 +1,6 @@
 /* eslint-disable */
+import { inspect } from "node:util";
+
 import { debug } from "debug";
 import {
   transform as lightningcss,
@@ -12,17 +14,13 @@ import {
 } from "lightningcss";
 
 import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
-import type {
-  CompilerOptions,
-  ContainerQuery,
-  ReactNativeCssStyleSheet,
-} from "./compiler.types";
+import type { CompilerOptions, ContainerQuery } from "./compiler.types";
 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");
 
@@ -33,11 +31,11 @@ const defaultLogger = debug("react-native-css:compiler");
  * @param options - Compiler options
  * @returns A `ReactNativeCssStyleSheet` that can be passed to `StyleSheet.register` or used with a custom runtime
  */
-export function compile(
-  code: Buffer | string,
-  options: CompilerOptions = {},
-): ReactNativeCssStyleSheet {
+export function compile(code: Buffer | string, options: CompilerOptions = {}) {
   const { logger = defaultLogger } = options;
+  const isLoggerEnabled =
+    "enabled" in logger ? logger.enabled : Boolean(logger);
+
   const features = Object.assign({}, options.features);
 
   if (options.selectorPrefix && options.selectorPrefix.startsWith(".")) {
@@ -67,8 +65,12 @@ export function compile(
       maybeMutateReactNativeOptions(rule, builder);
     },
     StyleSheetExit(sheet) {
-      logger(`Found ${sheet.rules.length} rules to process`);
-      logger(JSON.stringify(sheet.rules, null, 2));
+      if (isLoggerEnabled) {
+        logger(`Found ${sheet.rules.length} rules to process`);
+        logger(
+          inspect(sheet.rules, { depth: null, colors: true, compact: false }),
+        );
+      }
 
       for (const rule of sheet.rules) {
         // Extract the style declarations and animations from the current rule
@@ -108,7 +110,10 @@ export function compile(
     visitor,
   });
 
-  return builder.getNativeStyleSheet();
+  return {
+    stylesheet: () => builder.getNativeStyleSheet(),
+    warnings: () => builder.getWarnings(),
+  };
 }
 
 /**
@@ -137,16 +142,16 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
 
       const declarationBlock = value.declarations;
       if (declarationBlock) {
-        if (declarationBlock.declarations) {
-          builder.newRuleFork();
+        if (declarationBlock.declarations?.length) {
+          builder.newNestedRule();
           for (const declaration of declarationBlock.declarations) {
             parseDeclaration(declaration, builder);
           }
           builder.applyRuleToSelectors();
         }
 
-        if (declarationBlock.importantDeclarations) {
-          builder.newRuleFork({ important: true });
+        if (declarationBlock.importantDeclarations?.length) {
+          builder.newNestedRule({ important: true });
           for (const declaration of declarationBlock.importantDeclarations) {
             parseDeclaration(declaration, builder);
           }
@@ -160,14 +165,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) {
@@ -200,6 +200,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":
@@ -212,7 +219,6 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
     case "unknown":
     case "import":
     case "page":
-    case "supports":
     case "counter-style":
     case "moz-document":
     case "nesting":
@@ -283,17 +289,17 @@ function extractContainer(
   builder = builder.fork("container");
 
   // Iterate over all rules inside the containerRule and extract their styles using the updated CompilerCollection
-  for (const rule of containerRule.rules) {
-    const query: ContainerQuery = {
-      m: parseContainerCondition(containerRule.condition, builder),
-    };
+  const query: ContainerQuery = {
+    m: parseContainerCondition(containerRule.condition, builder),
+  };
 
-    if (containerRule.name) {
-      query.n = containerRule.name;
-    }
+  if (containerRule.name) {
+    query.n = `c:${containerRule.name}`;
+  }
 
-    builder.addContainerQuery(query);
+  builder.addContainerQuery(query);
 
+  for (const rule of containerRule.rules) {
     extractRule(rule, builder);
   }
 }

package/src/compiler/compiler.types.ts

@@ -35,9 +35,9 @@ export interface ReactNativeCssStyleSheet_V2 {
   /** KeyFrames */
   k?: Animation_V2[];
   /** Root Variables */
-  vr?: [string, LightDarkVariable][];
+  vr?: RootVariables;
   /** Universal Variables */
-  vu?: [string, LightDarkVariable][];
+  vu?: RootVariables;
 }
 
 /********************************    Styles    ********************************/
@@ -99,10 +99,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
@@ -147,10 +145,12 @@ export type StyleFunction =
 /******************************    Variables    *******************************/
 
 export type VariableDescriptor = [string, StyleDescriptor];
-export type VariableRecord = Record<string, LightDarkVariable>;
-export type LightDarkVariable =
+export type VariableRecord = Record<string, VariableValue[]>;
+export type VariableValue =
   | [StyleDescriptor]
-  | [StyleDescriptor, StyleDescriptor];
+  | [StyleDescriptor, MediaCondition[]];
+
+export type RootVariables = [string, VariableValue[]][];
 
 export type InlineVariable = {
   [VAR_SYMBOL]: "inline";
@@ -177,7 +177,7 @@ export type MediaCondition =
   // Comparison
   | [
       MediaFeatureComparison,
-      MediaFeatureNameFor_MediaFeatureId | MediaFeatureNameFor_MediaFeatureId,
+      MediaFeatureNameFor_MediaFeatureId | "dir",
       StyleDescriptor,
     ]
   // [Start, End]