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

package/src/compiler/declarations.ts

@@ -1,4 +1,4 @@
-// cSpell:ignore rcap,vmin,svmin,lvmin,dvmin,cqmin,vmax,svmax,lvmax,dvmax,cqmax,currentcolor,oklab,oklch,prophoto
+// cSpell:ignore rcap,vmin,svmin,lvmin,dvmin,cqmin,vmax,svmax,lvmax,dvmax,cqmax,currentcolor,oklab,oklch,prophoto,squircle,oldstyle,nums
 
 import Color from "colorjs.io";
 import type {
@@ -63,15 +63,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",
 ]);
 
@@ -91,6 +91,7 @@ const parsers: {
   "animation-play-state": addAnimationValue,
   "animation-timing-function": addAnimationValue,
   "aspect-ratio": parseAspectRatio,
+  "backface-visibility": parseBackfaceVisibility,
   "background-color": parseColorDeclaration,
   "background-image": parseBackgroundImage,
   "block-size": parseSizeDeclaration,
@@ -146,8 +147,9 @@ const parsers: {
   "border-top-style": parseBorderStyleDeclaration,
   "border-top-width": parseBorderSideWidthDeclaration,
   "border-width": parseBorderWidth,
-  "bottom": parseSizeDeclaration,
+  "bottom": parseSizeWithAutoDeclaration,
   "box-shadow": parseBoxShadow,
+  "box-sizing": parseBoxSizing,
   "caret-color": parseColorOrAutoDeclaration,
   "color": parseFontColorDeclaration,
   "column-gap": parseGap,
@@ -155,10 +157,11 @@ const parsers: {
   "container-name": parseContainerName,
   "container-type": parseContainerType,
   "display": parseDisplay,
+  "direction": parseDirection,
   "fill": parseSVGPaint,
   "filter": parseFilter,
   "flex": parseFlex,
-  "flex-basis": parseLengthPercentageOrAutoDeclaration,
+  "flex-basis": parseLengthPercentageDeclaration,
   "flex-direction": ({ value }) => value,
   "flex-flow": parseFlexFlow,
   "flex-grow": ({ value }) => value,
@@ -171,30 +174,30 @@ 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": parseLengthPercentageOrAutoDeclaration,
-  "inset-block-start": parseLengthPercentageOrAutoDeclaration,
+  "inset-block-end": parseLengthPercentageDeclaration,
+  "inset-block-start": parseLengthPercentageDeclaration,
   "inset-inline": parseInsetInline,
-  "inset-inline-end": parseLengthPercentageOrAutoDeclaration,
-  "inset-inline-start": parseLengthPercentageOrAutoDeclaration,
+  "inset-inline-end": parseLengthPercentageDeclaration,
+  "inset-inline-start": parseLengthPercentageDeclaration,
   "justify-content": parseJustifyContent,
-  "left": parseSizeDeclaration,
+  "left": parseSizeWithAutoDeclaration,
   "letter-spacing": parseLetterSpacing,
   "line-height": parseLineHeightDeclaration,
   "margin": parseMargin,
   "margin-block": parseMarginBlock,
   "margin-block-end": parseLengthPercentageOrAutoDeclaration,
   "margin-block-start": parseLengthPercentageOrAutoDeclaration,
-  "margin-bottom": parseSizeDeclaration,
+  "margin-bottom": parseSizeWithAutoDeclaration,
   "margin-inline": parseMarginInline,
   "margin-inline-end": parseLengthPercentageOrAutoDeclaration,
   "margin-inline-start": parseLengthPercentageOrAutoDeclaration,
-  "margin-left": parseSizeDeclaration,
-  "margin-right": parseSizeDeclaration,
-  "margin-top": parseSizeDeclaration,
+  "margin-left": parseSizeWithAutoDeclaration,
+  "margin-right": parseSizeWithAutoDeclaration,
+  "margin-top": parseSizeWithAutoDeclaration,
   "max-block-size": parseSizeDeclaration,
   "max-height": parseSizeDeclaration,
   "max-inline-size": parseSizeDeclaration,
@@ -203,21 +206,24 @@ const parsers: {
   "min-height": parseSizeDeclaration,
   "min-inline-size": parseSizeDeclaration,
   "min-width": parseSizeDeclaration,
-  "opacity": ({ value }) => value,
+  "opacity": ({ value }) => round(value),
+  "outline-color": parseColorDeclaration,
+  "outline-style": parseOutlineStyle,
+  "outline-width": parseBorderSideWidthDeclaration,
   "overflow": parseOverflow,
   "padding": parsePadding,
   "padding-block": parsePaddingBlock,
-  "padding-block-end": parseLengthPercentageOrAutoDeclaration,
-  "padding-block-start": parseLengthPercentageOrAutoDeclaration,
+  "padding-block-end": parseLengthPercentageDeclaration,
+  "padding-block-start": parseLengthPercentageDeclaration,
   "padding-bottom": parseSizeDeclaration,
   "padding-inline": parsePaddingInline,
-  "padding-inline-end": parseLengthPercentageOrAutoDeclaration,
-  "padding-inline-start": parseLengthPercentageOrAutoDeclaration,
+  "padding-inline-end": parseLengthPercentageDeclaration,
+  "padding-inline-start": parseLengthPercentageDeclaration,
   "padding-left": parseSizeDeclaration,
   "padding-right": parseSizeDeclaration,
   "padding-top": parseSizeDeclaration,
   "position": parsePosition,
-  "right": parseSizeDeclaration,
+  "right": parseSizeWithAutoDeclaration,
   "rotate": parseRotate,
   "row-gap": parseGap,
   "scale": parseScale,
@@ -230,7 +236,7 @@ const parsers: {
   "text-decoration-style": parseTextDecorationStyle,
   "text-shadow": parseTextShadow,
   "text-transform": ({ value }) => value.case,
-  "top": parseSizeDeclaration,
+  "top": parseSizeWithAutoDeclaration,
   "transform": parseTransform,
   "transition": addTransitionValue,
   "transition-delay": addTransitionValue,
@@ -241,7 +247,7 @@ const parsers: {
   "user-select": parseUserSelect,
   "vertical-align": parseVerticalAlign,
   "visibility": parseVisibility,
-  "width": parseSizeDeclaration,
+  "width": parseSizeWithAutoDeclaration,
   "z-index": parseZIndex,
 };
 
@@ -611,8 +617,11 @@ function parseMarginBlock(
     "margin-block-start": parseLengthPercentageOrAuto(
       value.blockStart,
       builder,
+      { allowAuto: true },
     ),
-    "margin-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder),
+    "margin-block-end": parseLengthPercentageOrAuto(value.blockEnd, builder, {
+      allowAuto: true,
+    }),
   });
 }
 
@@ -624,8 +633,11 @@ function parseMarginInline(
     "margin-inline-start": parseLengthPercentageOrAuto(
       value.inlineStart,
       builder,
+      { allowAuto: true },
     ),
-    "margin-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder),
+    "margin-inline-end": parseLengthPercentageOrAuto(value.inlineEnd, builder, {
+      allowAuto: true,
+    }),
   });
 }
 
@@ -971,17 +983,31 @@ 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);
   } else if (property === "object-position") {
     // https://github.com/parcel-bundler/lightningcss/issues/1047
     parseObjectPosition(declaration.value, builder);
+  } else if (property === "outline-offset") {
+    // https://github.com/parcel-bundler/lightningcss/issues/1048
+    builder.addDescriptor(
+      property,
+      parseUnparsed(declaration.value.value, builder, property),
+    );
+  } else if (property === "corner-shape") {
+    parseCornerShape(declaration.value, builder);
   } else if (
     validProperties.has(property) ||
     property.startsWith("--") ||
@@ -1457,6 +1483,13 @@ export function parseSizeDeclaration(
   return parseSize(declaration.value, builder);
 }
 
+export function parseSizeWithAutoDeclaration(
+  declaration: { value: Size | MaxSize },
+  builder: StylesheetBuilder,
+) {
+  return parseSize(declaration.value, builder, { allowAuto: true });
+}
+
 export function parsePointerEvents(
   { value }: { value: string },
   builder: StylesheetBuilder,
@@ -1709,13 +1742,20 @@ export function parseColor(cssColor: CssColor, builder: StylesheetBuilder) {
   }
 }
 
-export function parseLengthPercentageOrAutoDeclaration(
+export function parseLengthPercentageDeclaration(
   value: { value: LengthPercentageOrAuto },
   builder: StylesheetBuilder,
 ) {
   return parseLengthPercentageOrAuto(value.value, builder);
 }
 
+export function parseLengthPercentageOrAutoDeclaration(
+  value: { value: LengthPercentageOrAuto },
+  builder: StylesheetBuilder,
+) {
+  return parseLengthPercentageOrAuto(value.value, builder, { allowAuto: true });
+}
+
 export function parseLengthPercentageOrAuto(
   lengthPercentageOrAuto: LengthPercentageOrAuto,
   builder: StylesheetBuilder,
@@ -1788,6 +1828,7 @@ export function parseAlignContent(
     "stretch",
     "space-between",
     "space-around",
+    "space-evenly",
   ]);
 
   let value: string | undefined;
@@ -2007,7 +2048,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;
   }
 
@@ -2097,16 +2142,7 @@ function parseBorderBlockStyle(
 }
 
 export function parseBorderSideWidthDeclaration(
-  declaration: DeclarationType<
-    | "border-block-end-width"
-    | "border-block-start-width"
-    | "border-bottom-width"
-    | "border-inline-end-width"
-    | "border-inline-start-width"
-    | "border-left-width"
-    | "border-right-width"
-    | "border-top-width"
-  >,
+  declaration: Extract<Declaration, { value: BorderSideWidth }>,
   builder: StylesheetBuilder,
 ) {
   builder.addDescriptor(
@@ -2154,7 +2190,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(
@@ -2359,12 +2400,24 @@ export function parseBoxShadow(
   }
 }
 
+export function parseBoxSizing(
+  declaration: DeclarationType<"box-sizing">,
+  builder: StylesheetBuilder,
+) {
+  if (["border-box", "content-box"].includes(declaration.value)) {
+    return declaration.value;
+  }
+
+  builder.addWarning("value", declaration.value);
+  return undefined;
+}
+
 export function parseDisplay(
   { value }: DeclarationType<"display">,
   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);
@@ -2416,6 +2469,19 @@ export function parseDisplay(
   }
 }
 
+export function parseDirection(
+  declaration: DeclarationType<"direction">,
+  builder: StylesheetBuilder,
+) {
+  if (["ltr", "rtl"].includes(declaration.value)) {
+    builder.addDescriptor("direction", declaration.value);
+    builder.addDescriptor("--__rn-css-direction", declaration.value);
+  }
+
+  builder.addWarning("value", declaration.value);
+  return;
+}
+
 export function parseAspectRatio({
   value,
 }: DeclarationType<"aspect-ratio">): StyleDescriptor {
@@ -2433,6 +2499,18 @@ export function parseAspectRatio({
   }
 }
 
+export function parseBackfaceVisibility(
+  { value }: DeclarationType<"backface-visibility">,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  if (["visible", "hidden"].includes(value)) {
+    return value;
+  } else {
+    builder.addWarning("value", value);
+    return;
+  }
+}
+
 export function parseDimension(
   { unit, value }: Extract<Token, { type: "dimension" }>,
   builder: StylesheetBuilder,
@@ -3031,6 +3109,19 @@ function parseObjectPosition(
   ]);
 }
 
+function parseCornerShape(
+  declaration: CustomProperty,
+  builder: StylesheetBuilder,
+) {
+  const shape = parseUnparsed(declaration.value, builder, "corner-shape");
+
+  if (shape === "round") {
+    builder.addDescriptor("borderCurve", "circular");
+  } else if (shape === "squircle") {
+    builder.addDescriptor("borderCurve", "continuous");
+  }
+}
+
 function parseVisibility(
   declaration: DeclarationType<"visibility">,
   builder: StylesheetBuilder,
@@ -3044,6 +3135,25 @@ function parseVisibility(
   }
 }
 
+function parseOutlineStyle(
+  declaration: DeclarationType<"outline-style">,
+  builder: StylesheetBuilder,
+) {
+  const allowed = ["solid", "dotted", "dashed"];
+
+  if (
+    declaration.value.type !== "auto" &&
+    allowed.includes(declaration.value.value)
+  ) {
+    builder.addDescriptor("outlineStyle", declaration.value.value);
+  } else {
+    builder.addWarning(
+      "value",
+      declaration.value.type === "auto" ? "auto" : declaration.value.value,
+    );
+  }
+}
+
 function parseFilter(
   declaration: DeclarationType<"filter">,
   builder: StylesheetBuilder,

package/src/compiler/stylesheet.ts

@@ -568,6 +568,12 @@ export class StylesheetBuilder {
             : [value];
           // Append extra media queries if they exist
           this.shared[type][name].push(variableValue);
+
+          if (type === "rootVariables" && name === "__rn-css-em") {
+            const remName = "__rn-css-rem";
+            this.shared[type][remName] ??= [];
+            this.shared[type][remName].push(variableValue);
+          }
         }
       }
     }

package/src/jest/index.ts

@@ -5,7 +5,7 @@ import { inspect } from "node:util";
 import { compile, type CompilerOptions } from "react-native-css/compiler";
 import { StyleCollection } from "react-native-css/style-collection";
 
-import { colorScheme, dimensions, rem } from "../runtime/native/reactivity";
+import { colorScheme, dimensions } from "../runtime/native/reactivity";
 
 declare global {
   /* eslint-disable @typescript-eslint/no-namespace */
@@ -21,7 +21,6 @@ export const testID = "react-native-css";
 beforeEach(() => {
   StyleCollection.styles.clear();
   dimensions.set(Dimensions.get("window"));
-  rem.set(14);
   Appearance.setColorScheme(null);
   colorScheme.set(null);
 });

package/src/runtime/native/{api.ts → api.tsx}

@@ -1,8 +1,8 @@
 /* eslint-disable  */
-import { useContext, useState } from "react";
+import { useContext, useMemo, useState, type PropsWithChildren } from "react";
 import { Appearance } from "react-native";
 
-import type { InlineVariable, StyleDescriptor } from "../../compiler";
+import type { StyleDescriptor } from "../../compiler";
 import type {
   ColorScheme,
   Props,
@@ -18,6 +18,7 @@ import {
   VariableContext,
   type Effect,
   type Getter,
+  type VariableContextValue,
 } from "./reactivity";
 import { resolveValue } from "./styles/resolve";
 
@@ -102,7 +103,33 @@ export function useNativeVariable(name: string) {
   return resolveValue([{}, "var", [name]], effect.get, { inheritedVariables });
 }
 
+/**
+ * @deprecated Use `<VariableContextProvider />` instead.
+ */
 export function vars(variables: Record<string, StyleDescriptor>) {
-  (variables as InlineVariable)[VAR_SYMBOL] = "inline";
-  return variables;
+  return Object.assign(
+    { [VAR_SYMBOL]: "inline" },
+    Object.fromEntries(
+      Object.entries(variables).map(([k, v]) => [k.replace(/^--/, ""), v]),
+    ),
+  );
+}
+
+export function VariableContextProvider(
+  props: PropsWithChildren<{ value: Record<`--${string}`, StyleDescriptor> }>,
+) {
+  const inheritedVariables = useContext(VariableContext);
+
+  const value: VariableContextValue = useMemo(
+    () => ({
+      ...inheritedVariables,
+      ...Object.fromEntries(
+        Object.entries(props.value).map(([k, v]) => [k.replace(/^--/, ""), v]),
+      ),
+      [VAR_SYMBOL]: true,
+    }),
+    [inheritedVariables, props.value],
+  );
+
+  return <VariableContext value={value}>{props.children}</VariableContext>;
 }

package/src/runtime/native/reactivity.ts

@@ -189,10 +189,6 @@ export const VariableContext = createContext<VariableContextValue>({
   [VAR_SYMBOL]: true,
 });
 
-/** Units *********************************************************************/
-
-export const rem = observable(14);
-
 /** Pseudo Classes ************************************************************/
 
 export const hoverFamily = weakFamily(() => observable(false));

package/src/runtime/native/styles/line-height.ts

@@ -0,0 +1,25 @@
+import type { StyleFunctionResolver } from "./resolve";
+
+export const lineHeight: StyleFunctionResolver = (resolve, func) => {
+  const value = resolve(func[2]);
+
+  if (typeof value !== "number") {
+    return;
+  }
+
+  let emValue = resolve([{}, "var", ["__rn-css-em"]]);
+
+  if (typeof emValue !== "number") {
+    emValue = resolve([{}, "var", ["__rn-css-rem"]]);
+  }
+
+  if (typeof emValue !== "number") {
+    return;
+  }
+
+  return round(value * emValue);
+};
+
+function round(number: number) {
+  return Math.round((number + Number.EPSILON) * 100) / 100;
+}

package/src/runtime/native/styles/resolve.ts

@@ -10,6 +10,7 @@ import { type Getter, type VariableContextValue } from "../reactivity";
 import type { calculateProps } from "./calculate-props";
 import { transformKeys } from "./defaults";
 import * as functions from "./functions";
+import { lineHeight } from "./line-height";
 import * as shorthands from "./shorthands";
 import { em, rem, vh, vw } from "./units";
 import { varResolver } from "./variables";
@@ -37,6 +38,7 @@ const functionResolvers = {
   ...shorthands,
   ...functions,
   animationName: shorthands.animation,
+  lineHeight,
   em,
   rem,
   vh,

package/src/runtime/native/styles/shorthands/box-shadow.ts

@@ -1,3 +1,4 @@
+import type { StyleDescriptor } from "../../../../compiler";
 import { isStyleDescriptorArray } from "../../../utils";
 import type { StyleFunctionResolver } from "../resolve";
 import { shorthandHandler } from "./_handler";
@@ -9,6 +10,27 @@ const blurRadius = ["blurRadius", "number"] as const;
 const spreadDistance = ["spreadDistance", "number"] as const;
 // const inset = ["inset", "string"] as const;
 
+function deepFlattenToArrayOfStyleDescriptors(
+  arr: StyleDescriptor[],
+): StyleDescriptor[] {
+  const result: StyleDescriptor[] = [];
+  const stack = [arr];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (Array.isArray(current)) {
+      if (current.length > 0 && Array.isArray(current[0])) {
+        for (let i = current.length - 1; i >= 0; i--) {
+          const elem = current[i];
+          if (isStyleDescriptorArray(elem)) stack.push(elem);
+        }
+      } else {
+        result.push(current);
+      }
+    }
+  }
+  return result;
+}
+
 const handler = shorthandHandler(
   [
     [offsetX, offsetY, blurRadius, spreadDistance, color],
@@ -33,26 +55,10 @@ export const boxShadow: StyleFunctionResolver = (
   if (!isStyleDescriptorArray(args)) {
     return args;
   } else {
-    return args
-      .flatMap((shadows) => {
+    return deepFlattenToArrayOfStyleDescriptors(args)
+      .map((shadows) => {
         if (shadows === undefined) {
           return [];
-        } else if (isStyleDescriptorArray(shadows)) {
-          if (shadows.length === 0) {
-            return [];
-          } else if (Array.isArray(shadows[0])) {
-            return shadows
-              .map((shadow) => {
-                return omitTransparentShadows(
-                  handler(resolveValue, shadow, get, options),
-                );
-              })
-              .filter((v) => v !== undefined);
-          } else {
-            return omitTransparentShadows(
-              handler(resolveValue, shadows, get, options),
-            );
-          }
         } else {
           return omitTransparentShadows(
             handler(resolveValue, shadows, get, options),

package/src/runtime/native/styles/units.ts

@@ -1,9 +1,8 @@
-/* eslint-disable */
-import { rem as remObs, vh as vhObs, vw as vwObs } from "../reactivity";
+import { vh as vhObs, vw as vwObs } from "../reactivity";
 import type { StyleFunctionResolver } from "./resolve";
 
-export const em: StyleFunctionResolver = (resolve, func, get) => {
-  let value = func[2];
+export const em: StyleFunctionResolver = (resolve, func) => {
+  const value = func[2];
 
   if (typeof value !== "number") {
     return;
@@ -12,14 +11,14 @@ export const em: StyleFunctionResolver = (resolve, func, get) => {
   let emValue = resolve([{}, "var", ["__rn-css-em"]]);
 
   if (typeof emValue !== "number") {
-    emValue = get(remObs);
+    emValue = resolve([{}, "var", ["__rn-css-rem"]]);
   }
 
   if (typeof emValue !== "number") {
     return;
   }
 
-  return round(Number(value) * emValue);
+  return round(value * emValue);
 };
 
 export const vw: StyleFunctionResolver = (_, func, get) => {
@@ -42,14 +41,20 @@ export const vh: StyleFunctionResolver = (_, func, get) => {
   return round((value / 100) * get(vhObs));
 };
 
-export const rem: StyleFunctionResolver = (_, func, get) => {
+export const rem: StyleFunctionResolver = (resolve, func) => {
   const value = func[2];
 
   if (typeof value !== "number") {
     return;
   }
 
-  return round(value * get(remObs));
+  const remValue = resolve([{}, "var", ["__rn-css-rem"]]);
+
+  if (typeof remValue === "number") {
+    return round(value * remValue);
+  }
+
+  return;
 };
 
 function round(number: number) {