react-native-css 0.0.0-nightly.61d67fe → 0.0.0-nightly.7da12fa

package/src/compiler/compiler.ts

@@ -3,21 +3,36 @@ import { inspect } from "node:util";
 
 import { debug } from "debug";
 import {
-  transform as lightningcss,
   type ContainerRule,
   type MediaQuery as CSSMediaQuery,
   type CustomAtRules,
   type MediaRule,
+  type ParsedComponent,
+  type PropertyRule,
   type Rule,
-  type TokenOrValue,
   type Visitor,
 } from "lightningcss";
 
 import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
-import type { CompilerOptions, ContainerQuery } from "./compiler.types";
+import type {
+  CompilerOptions,
+  ContainerQuery,
+  StyleDescriptor,
+  StyleRuleMapping,
+  UniqueVarInfo,
+} from "./compiler.types";
 import { parseContainerCondition } from "./container-query";
-import { parseDeclaration } 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";
 import { parseMediaQuery } from "./media-query";
 import { StylesheetBuilder } from "./stylesheet";
 import { supportsConditionValid } from "./supports";
@@ -33,6 +48,7 @@ const defaultLogger = debug("react-native-css:compiler");
  */
 export function compile(code: Buffer | string, options: CompilerOptions = {}) {
   const { logger = defaultLogger } = options;
+
   const isLoggerEnabled =
     "enabled" in logger ? logger.enabled : Boolean(logger);
 
@@ -52,7 +68,85 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
 
   const builder = new StylesheetBuilder(options);
 
-  logger(`Start lightningcss`);
+  const { lightningcss, Features } = lightningcssLoader();
+
+  logger(`Lightningcss first pass`);
+
+  /**
+   * Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
+   *
+   * devongovett on Aug 20, 2023
+   * > calc simplification happens during the initial parse phase, which is before custom visitors run. Currently there is not an additional simplification pass done after transforms, resulting in the output you see here.
+   * https://github.com/parcel-bundler/lightningcss/issues/554#issuecomment-1685143494
+   *
+   * Due to the above issue, we run lightningcss twice
+   */
+
+  const vars = new Map<string, UniqueVarInfo>();
+
+  const firstPassVisitor: Visitor<CustomAtRules> = {};
+
+  if (options.inlineRem !== false) {
+    firstPassVisitor.Length = (length) => {
+      if (length.unit !== "rem" || options.inlineRem === false) {
+        return length;
+      }
+
+      return {
+        unit: "px",
+        value: round(length.value * (options.inlineRem ?? 14)),
+      };
+    };
+  }
+
+  if (options.inlineVariables !== false) {
+    const exclusionList: string[] = options.inlineVariables?.exclude ?? [];
+
+    firstPassVisitor.Declaration = (decl) => {
+      if (
+        decl.property === "custom" &&
+        decl.value.name.startsWith("--") &&
+        !exclusionList.includes(decl.value.name)
+      ) {
+        const entry = vars.get(decl.value.name) ?? {
+          count: 0,
+          value: [
+            ...decl.value.value,
+            { type: "token", value: { type: "white-space", value: " " } },
+          ],
+        };
+        entry.count++;
+        vars.set(decl.value.name, entry);
+      }
+    };
+    firstPassVisitor.StyleSheetExit = (sheet) => {
+      return inlineVariables(sheet, vars);
+    };
+  }
+
+  const { code: firstPass } = lightningcss({
+    code: typeof code === "string" ? new TextEncoder().encode(code) : code,
+    include: Features.DoublePositionGradients | Features.ColorFunction,
+    exclude: Features.VendorPrefixes,
+    visitor: firstPassVisitor,
+    filename: options.filename ?? "style.css",
+    projectRoot: options.projectRoot ?? process.cwd(),
+  });
+
+  if (isLoggerEnabled) {
+    const MAX_LOG_SIZE = 100 * 1024; // 100KB
+    if (firstPass.length <= MAX_LOG_SIZE) {
+      logger(firstPass.toString());
+    } else {
+      logger(
+        `firstPass buffer too large to log in full (${firstPass.length} bytes). Preview: ` +
+          firstPass.subarray(0, 1024).toString() +
+          "...",
+      );
+    }
+  }
+
+  logger(`Lightningcss second pass`);
 
   const customAtRules: CustomAtRules = {
     "react-native": {
@@ -63,6 +157,7 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
   const visitor: Visitor<typeof customAtRules> = {
     Rule(rule) {
       maybeMutateReactNativeOptions(rule, builder);
+      return rule;
     },
     StyleSheetExit(sheet) {
       if (isLoggerEnabled) {
@@ -79,33 +174,12 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
       }
 
       logger(`Exiting lightningcss`);
+      return sheet;
     },
   };
 
-  if (options.stripUnusedVariables) {
-    const onVarUsage = (token: TokenOrValue) => {
-      if (token.type === "function") {
-        token.value.arguments.forEach((token) => onVarUsage(token));
-      } else if (token.type === "var") {
-        builder.varUsage.add(token.value.name.ident);
-        if (token.value.fallback) {
-          const fallbackValues = token.value.fallback;
-          fallbackValues.forEach((varObj) => onVarUsage(varObj));
-        }
-      }
-    };
-
-    visitor.Declaration = (decl) => {
-      if (decl.property === "unparsed" || decl.property === "custom") {
-        decl.value.value.forEach((token) => onVarUsage(token));
-      }
-      return decl;
-    };
-  }
-
-  // Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
   lightningcss({
-    code: typeof code === "string" ? new TextEncoder().encode(code) : code,
+    code: firstPass,
     visitor,
     filename: options.filename ?? "style.css",
     projectRoot: options.projectRoot ?? process.cwd(),
@@ -120,7 +194,11 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
 /**
  * Extracts style declarations and animations from a given CSS rule, based on its type.
  */
-function extractRule(rule: Rule, builder: StylesheetBuilder) {
+function extractRule(
+  rule: Rule,
+  builder: StylesheetBuilder,
+  mapping: StyleRuleMapping = {},
+) {
   // Check the rule's type to determine which extraction function to call
   switch (rule.type) {
     case "keyframes": {
@@ -130,12 +208,12 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
     }
     case "container": {
       // If the rule is a container, extract it with the `extractedContainer` function
-      extractContainer(rule.value, builder);
+      extractContainer(rule.value, builder, mapping);
       break;
     }
     case "media": {
       // If the rule is a media query, extract it with the `extractMedia` function
-      extractMedia(rule.value, builder);
+      extractMedia(rule.value, builder, mapping);
       break;
     }
     case "nested-declarations": {
@@ -144,7 +222,7 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
       const declarationBlock = value.declarations;
       if (declarationBlock) {
         if (declarationBlock.declarations?.length) {
-          builder.newNestedRule();
+          builder.newNestedRule({ mapping });
           for (const declaration of declarationBlock.declarations) {
             parseDeclaration(declaration, builder);
           }
@@ -152,7 +230,7 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
         }
 
         if (declarationBlock.importantDeclarations?.length) {
-          builder.newNestedRule({ important: true });
+          builder.newNestedRule({ mapping, important: true });
           for (const declaration of declarationBlock.importantDeclarations) {
             parseDeclaration(declaration, builder);
           }
@@ -165,13 +243,13 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
       const value = rule.value;
 
       const declarationBlock = value.declarations;
-      const mapping = parsePropAtRule(value.rules);
+      mapping = { ...mapping, ...parsePropAtRule(value.rules) };
 
       // 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) {
+        if (declarationBlock.declarations?.length) {
           builder.newRule(mapping);
           for (const declaration of declarationBlock.declarations) {
             parseDeclaration(declaration, builder);
@@ -179,7 +257,7 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
           builder.applyRuleToSelectors();
         }
 
-        if (declarationBlock.importantDeclarations) {
+        if (declarationBlock.importantDeclarations?.length) {
           builder.newRule(mapping, { important: true });
           for (const declaration of declarationBlock.importantDeclarations) {
             parseDeclaration(declaration, builder);
@@ -190,7 +268,7 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
 
       if (value.rules) {
         for (const nestedRule of value.rules) {
-          extractRule(nestedRule, builder);
+          extractRule(nestedRule, builder, mapping);
         }
       }
 
@@ -198,23 +276,25 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
     }
     case "layer-block":
       for (const layerRule of rule.value.rules) {
-        extractRule(layerRule, builder);
+        extractRule(layerRule, builder, mapping);
       }
       break;
     case "supports":
       if (supportsConditionValid(rule.value.condition)) {
         for (const layerRule of rule.value.rules) {
-          extractRule(layerRule, builder);
+          extractRule(layerRule, builder, mapping);
         }
       }
       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":
@@ -241,7 +321,11 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
  *
  * @returns undefined if no screen media queries are found in the mediaRule, else it returns the extracted styles.
  */
-function extractMedia(mediaRule: MediaRule, builder: StylesheetBuilder) {
+function extractMedia(
+  mediaRule: MediaRule,
+  builder: StylesheetBuilder,
+  mapping: StyleRuleMapping,
+) {
   builder = builder.fork("media");
 
   // Initialize an empty array to store screen media queries
@@ -274,7 +358,7 @@ function extractMedia(mediaRule: MediaRule, builder: StylesheetBuilder) {
 
   // Iterate over all rules in the mediaRule and extract their styles using the updated CompilerCollection
   for (const rule of mediaRule.rules) {
-    extractRule(rule, builder);
+    extractRule(rule, builder, mapping);
   }
 }
 
@@ -286,6 +370,7 @@ function extractMedia(mediaRule: MediaRule, builder: StylesheetBuilder) {
 function extractContainer(
   containerRule: ContainerRule,
   builder: StylesheetBuilder,
+  mapping: StyleRuleMapping,
 ) {
   builder = builder.fork("container");
 
@@ -301,6 +386,68 @@ function extractContainer(
   builder.addContainerQuery(query);
 
   for (const rule of containerRule.rules) {
-    extractRule(rule, builder);
+    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

@@ -1,26 +1,29 @@
 /* eslint-disable */
 import type { Debugger } from "debug";
-import type { MediaFeatureNameFor_MediaFeatureId } from "lightningcss";
+import type {
+  MediaFeatureNameFor_MediaFeatureId,
+  TokenOrValue,
+} from "lightningcss";
 
-import { VAR_SYMBOL } from "../runtime/native/reactivity";
+import { VAR_SYMBOL } from "../native/reactivity";
 
 export interface CompilerOptions {
   filename?: string;
   projectRoot?: string;
   inlineRem?: number | false;
+  inlineVariables?: false | InlineVariableOptions;
   selectorPrefix?: string;
   stylesheetOrder?: number;
   features?: FeatureFlagRecord;
   logger?: (message: string) => void | Debugger;
-  /** Strip unused variables declarations. Defaults: false */
-  stripUnusedVariables?: boolean;
-  /** @internal */
-  ignorePropertyWarningRegex?: (string | RegExp)[];
-  preserveVariables?: boolean;
   hexColors?: boolean;
   colorPrecision?: number;
 }
 
+export interface InlineVariableOptions {
+  exclude?: `--${string}`[];
+}
+
 /**
  * A `react-native-css` StyleSheet
  */
@@ -156,6 +159,12 @@ export type InlineVariable = {
   [key: string]: unknown | undefined;
 };
 
+export type UniqueVarInfo = {
+  count: number;
+  value: TokenOrValue[] | undefined;
+  flat?: true;
+};
+
 /******************************   Animations  ******************************/
 
 export type Animation = [string, AnimationKeyframes[]];