react-native-css 0.0.0-nightly.d48061c → 0.0.0-nightly.da5ce0f

package/src/compiler/compiler.ts

@@ -3,8 +3,6 @@ import { inspect } from "node:util";
 
 import { debug } from "debug";
 import {
-  Features,
-  transform as lightningcss,
   type ContainerRule,
   type MediaQuery as CSSMediaQuery,
   type CustomAtRules,
@@ -14,10 +12,17 @@ import {
 } from "lightningcss";
 
 import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules";
-import type { CompilerOptions, ContainerQuery } from "./compiler.types";
+import type {
+  CompilerOptions,
+  ContainerQuery,
+  StyleRuleMapping,
+  UniqueVarInfo,
+} from "./compiler.types";
 import { parseContainerCondition } from "./container-query";
 import { parseDeclaration, 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";
@@ -53,6 +58,8 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
 
   const builder = new StylesheetBuilder(options);
 
+  const { lightningcss, Features } = lightningcssLoader();
+
   logger(`Lightningcss first pass`);
 
   /**
@@ -64,22 +71,54 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
    *
    * 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: {
-      Length(length) {
-        if (length.unit !== "rem" || options.inlineRem === false) {
-          return length;
-        }
-
-        return {
-          unit: "px",
-          value: round(length.value * (options.inlineRem ?? 14)),
-        };
-      },
-    },
+    visitor: firstPassVisitor,
     filename: options.filename ?? "style.css",
     projectRoot: options.projectRoot ?? process.cwd(),
   });
@@ -145,7 +184,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": {
@@ -155,12 +198,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": {
@@ -169,7 +212,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);
           }
@@ -177,7 +220,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);
           }
@@ -190,13 +233,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);
@@ -204,7 +247,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);
@@ -215,7 +258,7 @@ function extractRule(rule: Rule, builder: StylesheetBuilder) {
 
       if (value.rules) {
         for (const nestedRule of value.rules) {
-          extractRule(nestedRule, builder);
+          extractRule(nestedRule, builder, mapping);
         }
       }
 
@@ -223,13 +266,13 @@ 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;
@@ -266,7 +309,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
@@ -299,7 +346,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);
   }
 }
 
@@ -311,6 +358,7 @@ function extractMedia(mediaRule: MediaRule, builder: StylesheetBuilder) {
 function extractContainer(
   containerRule: ContainerRule,
   builder: StylesheetBuilder,
+  mapping: StyleRuleMapping,
 ) {
   builder = builder.fork("container");
 
@@ -326,6 +374,6 @@ function extractContainer(
   builder.addContainerQuery(query);
 
   for (const rule of containerRule.rules) {
-    extractRule(rule, builder);
+    extractRule(rule, builder, mapping);
   }
 }

package/src/compiler/compiler.types.ts

@@ -1,13 +1,17 @@
 /* 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;
@@ -16,6 +20,10 @@ export interface CompilerOptions {
   colorPrecision?: number;
 }
 
+export interface InlineVariableOptions {
+  exclude?: `--${string}`[];
+}
+
 /**
  * A `react-native-css` StyleSheet
  */
@@ -151,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) {
@@ -1231,6 +1228,8 @@ export function parseUnparsed(
             builder,
             property,
           );
+        case "color-mix":
+          return parseColorMix(tokenOrValue.value.arguments, builder, property);
         default: {
           builder.addWarning("value", `${tokenOrValue.value.name}()`);
           return;
@@ -1255,7 +1254,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") {
@@ -1579,10 +1578,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 +1613,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 +1956,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 +1986,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 +2328,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 +2376,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 +2595,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":
@@ -2632,6 +2635,100 @@ export function parseCalcFn(
   return;
 }
 
+export function parseColorMix(
+  tokens: TokenOrValue[],
+  builder: StylesheetBuilder,
+  property: string,
+): StyleDescriptor {
+  const [inToken, whitespace, colorSpace, comma, ...rest] = tokens;
+  if (
+    typeof inToken !== "object" ||
+    inToken.type !== "token" ||
+    inToken.value.type !== "ident" ||
+    inToken.value.value !== "in"
+  ) {
+    return;
+  }
+
+  if (
+    typeof whitespace !== "object" ||
+    whitespace.type !== "token" ||
+    whitespace.value.type !== "white-space"
+  ) {
+    return;
+  }
+
+  if (
+    typeof comma !== "object" ||
+    comma.type !== "token" ||
+    comma.value.type !== "comma"
+  ) {
+    return;
+  }
+
+  const colorSpaceArg = parseUnparsed(colorSpace, builder, property);
+  if (typeof colorSpaceArg !== "string") {
+    return;
+  }
+
+  let nextToken = rest.shift();
+
+  const leftColorArg = parseUnparsed(nextToken, builder, property);
+
+  if (!leftColorArg) {
+    return;
+  }
+
+  nextToken = rest.shift();
+
+  let leftColorPercentage: StyleDescriptor | undefined;
+  if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
+    leftColorPercentage = parseUnparsed(nextToken, builder, property);
+    nextToken = rest.shift();
+  }
+
+  if (
+    typeof nextToken !== "object" ||
+    nextToken.type !== "token" ||
+    nextToken.value.type !== "comma"
+  ) {
+    return;
+  }
+
+  nextToken = rest.shift();
+
+  const rightColorArg = parseUnparsed(nextToken, builder, property);
+
+  if (rightColorArg === "transparent") {
+    // Ignore the rest, treat as single color with alpha
+    return [{}, "colorMix", [colorSpaceArg, leftColorArg, leftColorPercentage]];
+  }
+
+  nextToken = rest.shift();
+  let rightColorPercentage: StyleDescriptor | undefined;
+  if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
+    rightColorPercentage = parseUnparsed(nextToken, builder, property);
+    nextToken = rest.shift();
+  }
+
+  // We should have expired all tokens now
+  if (nextToken) {
+    return;
+  }
+
+  return [
+    {},
+    "colorMix",
+    [
+      colorSpaceArg,
+      leftColorArg,
+      leftColorPercentage,
+      rightColorArg,
+      rightColorPercentage,
+    ],
+  ];
+}
+
 export function parseCalcArguments(
   [...args]: TokenOrValue[],
   builder: StylesheetBuilder,
@@ -3087,7 +3184,7 @@ function parseObjectFit(
   builder: StylesheetBuilder,
 ) {
   builder.addMapping({
-    "object-fit": "contentFit",
+    "object-fit": ["contentFit"],
   });
   builder.addDescriptor(
     "object-fit",
@@ -3100,7 +3197,7 @@ function parseObjectPosition(
   builder: StylesheetBuilder,
 ) {
   builder.addMapping({
-    "object-position": "contentPosition",
+    "object-position": ["contentPosition"],
   });
   builder.addDescriptor("object-position", [
     {},