react-native-css 3.0.0-preview.1 → 3.0.0-preview.3

package/src/compiler/compiler.ts

@@ -3,20 +3,25 @@ import { inspect } from "node:util";
 
 import { debug } from "debug";
 import {
+  Features,
   transform as lightningcss,
   type ContainerRule,
   type MediaQuery as CSSMediaQuery,
   type CustomAtRules,
   type MediaRule,
   type Rule,
-  type TokenOrValue,
   type Visitor,
 } from "lightningcss";
 
 import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
-import type { CompilerOptions, ContainerQuery } from "./compiler.types";
+import type {
+  CompilerOptions,
+  ContainerQuery,
+  UniqueVarInfo,
+} from "./compiler.types";
 import { parseContainerCondition } from "./container-query";
-import { parseDeclaration } from "./declarations";
+import { parseDeclaration, round } from "./declarations";
+import { inlineVariables } from "./inline-variables";
 import { extractKeyFrames } from "./keyframes";
 import { parseMediaQuery } from "./media-query";
 import { StylesheetBuilder } from "./stylesheet";
@@ -33,6 +38,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 +58,83 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
 
   const builder = new StylesheetBuilder(options);
 
-  logger(`Start lightningcss`);
+  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 +145,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 +162,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(),

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[]];

package/src/compiler/declarations.ts

@@ -36,6 +36,7 @@ import type {
   UnresolvedColor,
 } from "lightningcss";
 
+import { isStyleFunction } from "../utilities";
 import type {
   StyleDescriptor,
   StyleFunction,
@@ -63,15 +64,15 @@ const propertyRename: Record<string, string> = {
   "background-image": "experimental_backgroundImage",
 };
 
-// TODO: We need a better way to handle this
 const unparsedRuntimeParsing = new Set([
   "animation",
   "border",
   "box-shadow",
+  "line-height",
+  "rotate",
+  "scale",
   "text-shadow",
   "transform",
-  "scale",
-  "rotate",
   "translate",
 ]);
 
@@ -174,8 +175,8 @@ const parsers: {
   "font-variant-caps": parseFontVariantCapsDeclaration,
   "font-weight": parseFontWeightDeclaration,
   "gap": parseGap,
-  "height": parseSizeDeclaration,
-  "inline-size": parseSizeDeclaration,
+  "height": parseSizeWithAutoDeclaration,
+  "inline-size": parseSizeWithAutoDeclaration,
   "inset": parseInset,
   "inset-block": parseInsetBlock,
   "inset-block-end": parseLengthPercentageDeclaration,
@@ -247,7 +248,7 @@ const parsers: {
   "user-select": parseUserSelect,
   "vertical-align": parseVerticalAlign,
   "visibility": parseVisibility,
-  "width": parseSizeDeclaration,
+  "width": parseSizeWithAutoDeclaration,
   "z-index": parseZIndex,
 };
 
@@ -369,35 +370,26 @@ function parseBorderColor(
   >,
   builder: StylesheetBuilder,
 ) {
-  switch (declaration.property) {
-    case "border-color":
-      builder.addShorthand("border-color", {
-        "border-top-color": parseColor(declaration.value.top, builder),
-        "border-bottom-color": parseColor(declaration.value.bottom, builder),
-        "border-left-color": parseColor(declaration.value.left, builder),
-        "border-right-color": parseColor(declaration.value.right, builder),
-      });
-      break;
-    case "border-block-color":
-      builder.addDescriptor(
-        "border-top-color",
-        parseColor(declaration.value.start, builder),
-      );
-      builder.addDescriptor(
-        "border-bottom-color",
-        parseColor(declaration.value.end, builder),
-      );
-      break;
-    case "border-inline-color":
-      builder.addDescriptor(
-        "border-left-color",
-        parseColor(declaration.value.start, builder),
-      );
-      builder.addDescriptor(
-        "border-right-color",
-        parseColor(declaration.value.end, builder),
-      );
-      break;
+  if (declaration.property === "border-color") {
+    builder.addShorthand("border-color", {
+      "border-top-color": parseColor(declaration.value.top, builder),
+      "border-bottom-color": parseColor(declaration.value.bottom, builder),
+      "border-left-color": parseColor(declaration.value.left, builder),
+      "border-right-color": parseColor(declaration.value.right, builder),
+    });
+  } else {
+    const start = parseColor(declaration.value.start, builder);
+    const end = parseColor(declaration.value.end, builder);
+
+    if (start === end) {
+      builder.addDescriptor(declaration.property, start);
+    } else if (declaration.property === "border-block-color") {
+      builder.addDescriptor("border-top-color", start);
+      builder.addDescriptor("border-bottom-color", end);
+    } else {
+      builder.addDescriptor("border-left-color", start);
+      builder.addDescriptor("border-right-color", end);
+    }
   }
 }
 
@@ -859,17 +851,8 @@ function parseLetterSpacing(
   if (value.type === "normal") {
     return;
   }
-  const descriptor = parseLength(value.value, builder);
 
-  if (
-    Array.isArray(descriptor) &&
-    descriptor[1] === "em" &&
-    typeof descriptor[2] === "number"
-  ) {
-    return descriptor[2];
-  }
-
-  return descriptor;
+  return parseLength(value.value, builder);
 }
 
 function parseTextDecoration(
@@ -966,7 +949,13 @@ export function parseUnparsedDeclaration(
     }
 
     if (property === "color") {
-      builder.addDescriptor("--__rn-css-current-color", value);
+      if (
+        !isStyleFunction(value) ||
+        value[1] !== "var" ||
+        value[2] !== "-css-color"
+      ) {
+        builder.addDescriptor("--__rn-css-color", value);
+      }
     }
   }
 }
@@ -983,11 +972,17 @@ export function parseCustomDeclaration(
       parseUnparsed(declaration.value.value, builder, property),
     );
   } else if (property === "-rn-ripple-style") {
-    builder.addDescriptor(
-      property,
-      parseUnparsed(declaration.value.value, builder, property) ===
-        "borderless",
-    );
+    if (
+      parseUnparsed(declaration.value.value, builder, property) === "borderless"
+    ) {
+      builder.addDescriptor(property, true);
+    }
+  } else if (property === "-rn-ripple-layer") {
+    if (
+      parseUnparsed(declaration.value.value, builder, property) === "foreground"
+    ) {
+      builder.addDescriptor(property, true);
+    }
   } else if (property === "object-fit") {
     // https://github.com/parcel-bundler/lightningcss/issues/1046
     parseObjectFit(declaration.value, builder);
@@ -1119,7 +1114,7 @@ export function parseUnparsed(
     } else if (tokenOrValue === "false") {
       return false;
     } else if (tokenOrValue === "currentcolor") {
-      return [{}, "var", "__rn-css-current-color"] as const;
+      return [{}, "var", "__rn-css-color"] as const;
     } else {
       return tokenOrValue;
     }
@@ -1137,8 +1132,16 @@ export function parseUnparsed(
       allowAuto,
     );
     if (!args) return;
-    if (Array.isArray(args) && args.length === 1) return args[0];
-    return args;
+    if (Array.isArray(args) && args.length === 1) {
+      return args[0];
+    } else if (
+      (property === "filter" || property === "transform") &&
+      isStyleFunction(args)
+    ) {
+      return [args];
+    } else {
+      return args;
+    }
   }
 
   switch (tokenOrValue.type) {
@@ -1249,7 +1252,7 @@ export function parseUnparsed(
             builder.addWarning("value", value);
             return;
           } else if (value === "currentcolor") {
-            return [{}, "var", "__rn-css-current-color"] as const;
+            return [{}, "var", "__rn-css-color"] as const;
           }
 
           if (value === "true") {
@@ -1361,9 +1364,9 @@ export function parseLength(
     switch (length.unit) {
       case "px": {
         if (length.value === Infinity) {
-          return 9999;
+          return Number.MAX_SAFE_INTEGER;
         } else if (length.value === -Infinity) {
-          return -9999;
+          return Number.MIN_SAFE_INTEGER;
         } else {
           // Normalize large values to safe integers, e.g. `calc(infinity * 1px)`
           const value = Math.max(
@@ -1573,10 +1576,15 @@ export function parseFontColorDeclaration(
 ) {
   parseColorDeclaration(declaration, builder);
 
-  builder.addDescriptor(
-    "--__rn-css-color",
-    parseColor(declaration.value, builder),
-  );
+  if (
+    typeof declaration.value !== "object" ||
+    declaration.value.type !== "currentcolor"
+  ) {
+    builder.addDescriptor(
+      "--__rn-css-color",
+      parseColor(declaration.value, builder),
+    );
+  }
 }
 
 export function parseColorDeclaration(
@@ -1603,7 +1611,7 @@ export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
 
   switch (cssColor.type) {
     case "currentcolor":
-      return [{}, "var", "__rn-css-current-color"] as const;
+      return [{}, "var", "__rn-css-color"] as const;
     case "light-dark": {
       const extraRule: StyleRule = {
         s: [],
@@ -1822,6 +1830,7 @@ export function parseAlignContent(
     "stretch",
     "space-between",
     "space-around",
+    "space-evenly",
   ]);
 
   let value: string | undefined;
@@ -1945,7 +1954,7 @@ export function parseFontWeight(
   switch (fontWeight.type) {
     case "absolute":
       if (fontWeight.value.type === "weight") {
-        return fontWeight.value.value.toString();
+        return fontWeight.value.value;
       } else {
         return fontWeight.value.type;
       }
@@ -1975,11 +1984,11 @@ export function parseTextShadow(
     parseColor(textShadow.color, builder),
   );
   builder.addDescriptor(
-    "textShadowOffset.width",
+    "*.textShadowOffset.width",
     parseLength(textShadow.xOffset, builder),
   );
   builder.addDescriptor(
-    "textShadowOffset.height",
+    "*.textShadowOffset.height",
     parseLength(textShadow.yOffset, builder),
   );
   builder.addDescriptor(
@@ -2041,7 +2050,11 @@ export function parsePosition(
   { value }: DeclarationType<"position">,
   builder: StylesheetBuilder,
 ) {
-  if (value.type === "absolute" || value.type === "relative") {
+  if (
+    value.type === "absolute" ||
+    value.type === "relative" ||
+    value.type === "static"
+  ) {
     return value.type;
   }
 
@@ -2179,7 +2192,12 @@ export function parseLineHeightDeclaration(
   declaration: DeclarationType<"line-height">,
   builder: StylesheetBuilder,
 ) {
-  return parseLineHeight(declaration.value, builder);
+  builder.addDescriptor("line-height", [
+    {},
+    "lineHeight",
+    [parseLineHeight(declaration.value, builder)],
+    1,
+  ]);
 }
 
 export function parseLineHeight(
@@ -2308,24 +2326,22 @@ export function parseGap(
   builder: StylesheetBuilder,
 ) {
   if ("column" in declaration.value) {
-    builder.addDescriptor(
-      "row-gap",
-      parseGapValue(declaration.value.row, builder),
-    );
-    builder.addDescriptor(
-      "column-gap",
-      parseGapValue(declaration.value.column, builder),
-    );
+    const row = parseGapValue(declaration.value.row, builder);
+    const column = parseGapValue(declaration.value.column, builder);
 
-    return;
-  } else {
-    if (declaration.value.type === "normal") {
-      builder.addWarning("value", declaration.value.type);
-      return;
+    if (row !== column) {
+      builder.addDescriptor("row-gap", row);
+      builder.addDescriptor("column-gap", column);
+    } else {
+      builder.addDescriptor("gap", row);
     }
-
+  } else if (declaration.value.type === "normal") {
+    builder.addWarning("value", declaration.value.type);
+  } else {
     return parseLength(declaration.value.value, builder);
   }
+
+  return;
 }
 
 function parseGapValue(
@@ -2358,27 +2374,27 @@ export function parseBoxShadow(
 ) {
   for (const [index, shadow] of value.entries()) {
     builder.addDescriptor(
-      `boxShadow.[${index}].color`,
+      `*.boxShadow.[${index}].color`,
       parseColor(shadow.color, builder),
     );
     builder.addDescriptor(
-      `boxShadow.[${index}].offsetX`,
+      `*.boxShadow.[${index}].offsetX`,
       parseLength(shadow.xOffset, builder),
     );
     builder.addDescriptor(
-      `boxShadow.[${index}].offsetY`,
+      `*.boxShadow.[${index}].offsetY`,
       parseLength(shadow.yOffset, builder),
     );
     builder.addDescriptor(
-      `boxShadow.[${index}].blurRadius`,
+      `*.boxShadow.[${index}].blurRadius`,
       parseLength(shadow.blur, builder),
     );
     builder.addDescriptor(
-      `boxShadow.[${index}].spreadDistance`,
+      `*.boxShadow.[${index}].spreadDistance`,
       parseLength(shadow.spread, builder),
     );
     builder.addDescriptor(
-      `boxShadow.[${index}].inset`,
+      `*.boxShadow.[${index}].inset`,
       shadow.inset ? true : undefined,
     );
   }
@@ -2401,7 +2417,7 @@ export function parseDisplay(
   builder: StylesheetBuilder,
 ) {
   if (value.type === "keyword") {
-    if (value.value === "none") {
+    if (value.value === "none" || value.value === "contents") {
       return value.value;
     } else {
       builder.addWarning("value", value.value);
@@ -2577,16 +2593,17 @@ export function parseEnv(
         case "safe-area-inset-top":
         case "safe-area-inset-right":
         case "safe-area-inset-bottom":
-        case "safe-area-inset-left":
-          return [
-            {},
-            "var",
-            [
-              `--react-native-css-${value.name.value}`,
-              parseUnparsed(value.fallback, builder, value.name.value),
-            ],
-            1,
-          ];
+        case "safe-area-inset-left": {
+          const fallback = parseUnparsed(
+            value.fallback,
+            builder,
+            value.name.value,
+          );
+
+          return fallback
+            ? [{}, "var", [`react-native-css-${value.name.value}`, fallback], 1]
+            : [{}, "var", [`react-native-css-${value.name.value}`], 1];
+        }
         case "viewport-segment-width":
         case "viewport-segment-height":
         case "viewport-segment-top":
@@ -2808,7 +2825,7 @@ export function equal(a: unknown, b: unknown) {
 }
 
 export function parseTime(time: Time) {
-  return time.type === "milliseconds" ? time.value : time.value * 1000;
+  return round(time.type === "milliseconds" ? time.value : time.value * 1000);
 }
 
 export function parseSize2DDimensionPercentageDeclaration(