react-native-css 3.0.0-nightly.27bd5e2 → 3.0.0-nightly.4af17f5

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,16 +14,11 @@ 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";
 
 const defaultLogger = debug("react-native-css:compiler");
@@ -33,11 +30,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 +64,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 +109,10 @@ export function compile(
     visitor,
   });
 
-  return builder.getNativeStyleSheet();
+  return {
+    stylesheet: () => builder.getNativeStyleSheet(),
+    warnings: () => builder.getWarnings(),
+  };
 }
 
 /**
@@ -132,17 +136,37 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
       extractMedia(rule.value, builder);
       break;
     }
+    case "nested-declarations": {
+      const value = rule.value;
+
+      const declarationBlock = value.declarations;
+      if (declarationBlock) {
+        if (declarationBlock.declarations?.length) {
+          builder.newNestedRule();
+          for (const declaration of declarationBlock.declarations) {
+            parseDeclaration(declaration, builder);
+          }
+          builder.applyRuleToSelectors();
+        }
+
+        if (declarationBlock.importantDeclarations?.length) {
+          builder.newNestedRule({ important: true });
+          for (const declaration of declarationBlock.importantDeclarations) {
+            parseDeclaration(declaration, builder);
+          }
+          builder.applyRuleToSelectors();
+        }
+      }
+      break;
+    }
     case "style": {
-      // If the rule is a style declaration, extract it with the `getExtractedStyle` function and store it in the `declarations` map
-      builder = builder.fork("style");
+      const value = rule.value;
+
+      const declarationBlock = value.declarations;
+      const mapping = parsePropAtRule(value.rules);
 
-      const declarationBlock = rule.value.declarations;
-      const mapping = parsePropAtRule(rule.value.rules);
-      const selectors = getSelectors(
-        rule.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", value.selectors);
 
       if (declarationBlock) {
         if (declarationBlock.declarations) {
@@ -150,7 +174,7 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
           for (const declaration of declarationBlock.declarations) {
             parseDeclaration(declaration, builder);
           }
-          builder.applyRuleToSelectors(selectors);
+          builder.applyRuleToSelectors();
         }
 
         if (declarationBlock.importantDeclarations) {
@@ -158,9 +182,16 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
           for (const declaration of declarationBlock.importantDeclarations) {
             parseDeclaration(declaration, builder);
           }
-          builder.applyRuleToSelectors(selectors);
+          builder.applyRuleToSelectors();
+        }
+      }
+
+      if (value.rules) {
+        for (const nestedRule of value.rules) {
+          extractRule(nestedRule, builder);
         }
       }
+
       break;
     }
     case "layer-block":
@@ -184,7 +215,6 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
     case "counter-style":
     case "moz-document":
     case "nesting":
-    case "nested-declarations":
     case "viewport":
     case "custom-media":
     case "scope":
@@ -252,17 +282,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 = 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    ********************************/
@@ -147,10 +147,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";