react-native-css 3.0.0-preview.2 → 3.0.0-preview.4

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,
@@ -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);
+      }
     }
   }
 }
@@ -1125,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;
     }
@@ -1143,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) {
@@ -1255,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") {
@@ -1367,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(
@@ -1579,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(
@@ -1609,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: [],
@@ -1952,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;
       }
@@ -1982,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(
@@ -2324,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(
@@ -2374,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,
     );
   }
@@ -2593,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":
@@ -2824,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(
@@ -3087,7 +3088,7 @@ function parseObjectFit(
   builder: StylesheetBuilder,
 ) {
   builder.addMapping({
-    "object-fit": "contentFit",
+    "object-fit": ["contentFit"],
   });
   builder.addDescriptor(
     "object-fit",
@@ -3100,7 +3101,7 @@ function parseObjectPosition(
   builder: StylesheetBuilder,
 ) {
   builder.addMapping({
-    "object-position": "contentPosition",
+    "object-position": ["contentPosition"],
   });
   builder.addDescriptor("object-position", [
     {},

package/src/compiler/inline-variables.ts

@@ -0,0 +1,209 @@
+import type {
+  Declaration,
+  DeclarationBlock,
+  StyleSheet,
+  TokenOrValue,
+} from "lightningcss";
+
+import type { UniqueVarInfo } from "./compiler.types";
+
+export function inlineVariables(
+  stylesheet: StyleSheet,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  for (const [name, info] of [...vars]) {
+    if (info.count !== 1) {
+      vars.delete(name);
+    } else {
+      flattenVar(name, vars);
+    }
+  }
+
+  stylesheet.rules = stylesheet.rules.map(function checkRule(rule) {
+    switch (rule.type) {
+      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":
+      case "import":
+      case "page":
+      case "counter-style":
+      case "moz-document":
+      case "nesting":
+      case "viewport":
+      case "custom-media":
+      case "scope":
+      case "starting-style":
+        return rule;
+
+      case "media":
+        rule.value.rules = rule.value.rules.map((rule) => checkRule(rule));
+        return rule;
+      case "keyframes":
+        rule.value.keyframes = rule.value.keyframes.map((keyframe) => {
+          keyframe.declarations =
+            replaceDeclarationBlock(keyframe.declarations, vars) ??
+            keyframe.declarations;
+
+          return keyframe;
+        });
+        return rule;
+      case "style":
+        rule.value.declarations = replaceDeclarationBlock(
+          rule.value.declarations,
+          vars,
+        );
+
+        rule.value.rules = rule.value.rules?.flatMap((rule) => checkRule(rule));
+
+        return rule;
+      case "nested-declarations":
+        rule.value.declarations =
+          replaceDeclarationBlock(rule.value.declarations, vars) ?? {};
+        return rule;
+      case "supports":
+        rule.value.rules = rule.value.rules.flatMap((rule) => checkRule(rule));
+        return rule;
+      case "layer-block":
+        rule.value.rules = rule.value.rules.flatMap((rule) => checkRule(rule));
+        return rule;
+      case "container":
+        rule.value.rules = rule.value.rules.flatMap((rule) => checkRule(rule));
+        return rule;
+    }
+  });
+
+  return stylesheet;
+}
+
+function replaceDeclarationBlock(
+  block: DeclarationBlock | undefined,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  if (!block) return;
+
+  block.declarations = block.declarations
+    ?.map((decl) => {
+      return replaceDeclaration(decl, vars);
+    })
+    .filter((d) => !!d);
+
+  block.importantDeclarations = block.importantDeclarations
+    ?.map((decl) => {
+      return replaceDeclaration(decl, vars);
+    })
+    .filter((d) => !!d);
+
+  return block;
+}
+
+function replaceDeclaration(
+  declaration: Declaration,
+  vars: Map<string, UniqueVarInfo>,
+) {
+  if (
+    declaration.property !== "unparsed" &&
+    declaration.property !== "custom"
+  ) {
+    return declaration;
+  }
+
+  if (declaration.property === "custom" && vars.has(declaration.value.name)) {
+    return;
+  }
+
+  declaration.value.value = declaration.value.value.flatMap((part) => {
+    return flattenPart(part, vars);
+  });
+
+  return declaration;
+}
+
+function flattenPart(
+  part: TokenOrValue,
+  vars: Map<string, UniqueVarInfo>,
+): TokenOrValue | TokenOrValue[] {
+  if (part.type === "var") {
+    const varInfo = vars.get(part.value.name.ident);
+
+    if (!varInfo) {
+      part.value.fallback = part.value.fallback?.flatMap((arg) => {
+        return flattenPart(arg, vars);
+      });
+
+      return part;
+    } else if (varInfo.value === undefined) {
+      const fallback = part.value.fallback?.flatMap((arg) => {
+        return flattenPart(arg, vars);
+      });
+
+      return fallback ?? [];
+    }
+
+    return varInfo.value;
+  } else if (part.type === "function") {
+    part.value.arguments = part.value.arguments.flatMap((arg) => {
+      return flattenPart(arg, vars);
+    });
+  }
+
+  return part;
+}
+
+function flattenVar(
+  name: string,
+  vars: Map<string, UniqueVarInfo>,
+  seen = new Set<string>(),
+) {
+  if (seen.has(name)) {
+    vars.delete(name);
+  }
+
+  seen.add(name);
+
+  let varInfo = vars.get(name);
+
+  if (!varInfo || varInfo.flat) {
+    return;
+  }
+
+  let varInfoValue = varInfo.value?.flatMap((part) => {
+    if (part.type === "var") {
+      const name = part.value.name.ident;
+
+      flattenVar(name, vars, seen);
+
+      const nestedVarInfo = vars.get(part.value.name.ident);
+      if (nestedVarInfo?.value) {
+        return nestedVarInfo.value;
+      }
+    }
+    return flattenPart(part, vars);
+  });
+
+  // If the variable is shorthand for "initial", substitute it for undefined
+  if (
+    varInfoValue?.length === 2 &&
+    varInfoValue[0]?.type === "token" &&
+    varInfoValue[0].value.type === "ident" &&
+    varInfoValue[0].value.value === "initial" &&
+    varInfoValue[1]?.type === "token" &&
+    varInfoValue[1].value.type === "white-space"
+  ) {
+    varInfoValue = undefined;
+  }
+
+  varInfo = {
+    count: 1,
+    flat: true,
+    value: varInfoValue,
+  };
+
+  vars.set(name, varInfo);
+}

package/src/compiler/keyframes.ts

@@ -10,9 +10,9 @@ import type { StylesheetBuilder } from "./stylesheet";
 
 export function parseIterationCount(
   value: AnimationIterationCount[],
-): number[] {
+): (number | "infinite")[] {
   return value.map((value) => {
-    return value.type === "infinite" ? -1 : value.value;
+    return value.type === "infinite" ? value.type : value.value;
   });
 }
 

package/src/compiler/lightningcss-loader.ts

@@ -0,0 +1,40 @@
+export function lightningcssLoader() {
+  let lightningcssPath: string | undefined;
+
+  // Try to resolve the path to lightningcss from the @expo/metro-config package
+  // lightningcss is a direct dependency of @expo/metro-config
+  try {
+    lightningcssPath = require.resolve("lightningcss", {
+      paths: [
+        require
+          .resolve("@expo/metro-config/package.json")
+          .replace("/package.json", ""),
+      ],
+    });
+  } catch {
+    // Intentionally left empty
+  }
+
+  // If @expo/metro-config is not being used (non-metro bundler?), try and resolve it directly
+  try {
+    lightningcssPath ??= require.resolve("lightningcss");
+  } catch {
+    // Intentionally left empty
+  }
+
+  if (!lightningcssPath) {
+    throw new Error(
+      "react-native-css was unable to determine the path to lightningcss",
+    );
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const { transform: lightningcss, Features } = require(
+    lightningcssPath,
+  ) as typeof import("lightningcss");
+
+  return {
+    lightningcss,
+    Features,
+  };
+}

package/src/compiler/pseudo-elements.ts

@@ -1,4 +1,4 @@
-import { isStyleFunction } from "../runtime/utils";
+import { isStyleFunction } from "../utilities";
 import type { StyleDeclaration, StyleRule } from "./compiler.types";
 
 export function modifyRuleForSelection(rule: StyleRule): StyleRule | undefined {

package/src/compiler/selector-builder.ts

@@ -1,6 +1,6 @@
 import type { AttrOperation, Selector, SelectorList } from "lightningcss";
 
-import { Specificity } from "../runtime/utils";
+import { Specificity } from "../utilities";
 import type {
   AttributeQuery,
   AttrSelectorOperator,
@@ -44,11 +44,6 @@ type ContainerQueryWithSpecificity = ContainerQuery & {
 export function getClassNameSelectors(
   selectors: SelectorList,
   options: CompilerOptions = {},
-  specificity: SpecificityArray = [0],
-  root: PartialSelector = {
-    type: "className",
-    specificity: [],
-  },
 ) {
   if (!selectors.length) {
     return [];
@@ -56,6 +51,13 @@ export function getClassNameSelectors(
 
   return selectors.flatMap(
     (selector): (ReactNativeGlobalSelector | PartialSelector)[] => {
+      const root: PartialSelector = {
+        type: "className",
+        specificity: [],
+      };
+
+      const specificity: SpecificityArray = [0];
+
       if (isRootVariableSelector(selector)) {
         return [{ type: "rootVariables" }];
       } else if (isUniversalSelector(selector)) {
@@ -555,9 +557,13 @@ function getMediaQuery(
   return mediaQuery;
 }
 
-function isRootVariableSelector([first, second]: Selector) {
+function isRootVariableSelector([first, ...rest]: Selector) {
+  rest = rest.filter((item) => item.type !== "nesting");
   return (
-    first && !second && first.type === "pseudo-class" && first.kind === "root"
+    first &&
+    rest.length === 0 &&
+    first.type === "pseudo-class" &&
+    first.kind === "root"
   );
 }
 

package/src/compiler/selectors.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { Selector, SelectorList } from "lightningcss";
 
-import { Specificity } from "../runtime/utils/specificity";
+import { Specificity } from "../utilities";
 import type {
   AttributeQuery,
   AttrSelectorOperator,