react-native-css 0.0.0-nightly.61d67fe → 0.0.0-nightly.96f5ce2

package/dist/typescript/module/src/runtime/web/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../../src/runtime/web/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EACV,WAAW,EACX,KAAK,EACL,mBAAmB,EACnB,aAAa,EACb,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,MAAM,GACjB,KAAK,CAAC,CAAC,SAAS,cAAc,EAC9B,KAAK,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAEtC,eAAe,CAAC,EAChB,SAAS,CAAC,EACV,WAAW,aAAa,MAEhB,OAAO,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,2FAGjD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,KAAK,CAAC,CAAC,SAAS,cAAc,EAC1D,WAAW,CAAC,EACZ,eAAe,KAAK,EACpB,SAAS,mBAAmB,CAAC,CAAC,CAAC,2FA4BhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,WAOzB,CAAC;AAEF,wBAAgB,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,0BAW9D;AAED,eAAO,MAAM,iBAAiB,aAE7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,aAErC,CAAC"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../../../../src/runtime/web/api.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,WAAW,EACX,KAAK,EACL,mBAAmB,EACnB,aAAa,EACb,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,MAAM,GACjB,KAAK,CAAC,CAAC,SAAS,cAAc,EAC9B,KAAK,CAAC,CAAC,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAEtC,eAAe,CAAC,EAChB,SAAS,CAAC,EACV,WAAW,aAAa,MAEhB,OAAO,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,2FAGjD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,cAAc,EACpD,WAAW,CAAC,EACZ,eAAe,KAAK,EACpB,SAAS,mBAAmB,CAAC,CAAC,CAAC,2FA4BhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,WAOzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,0BAW9D;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAAA;CAAE,CAAC,2CAenE;AAED,eAAO,MAAM,iBAAiB,aAE7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,aAErC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-css",
-  "version": "0.0.0-nightly.61d67fe",
+  "version": "0.0.0-nightly.96f5ce2",
   "description": "A CSS polyfill for React Native",
   "exports": {
     ".": {

package/src/compiler/atRules.ts

@@ -88,6 +88,8 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
     "-webkit-line-clamp": ["numberOfLines"],
     "-rn-ripple-color": ["android_ripple", "color"],
     "-rn-ripple-style": ["android_ripple", "borderless"],
+    "-rn-ripple-radius": ["android_ripple", "radius"],
+    "-rn-ripple-layer": ["android_ripple", "foreground"],
   };
 
   if (!rules) return mapping;

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 {
@@ -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,
@@ -175,26 +178,26 @@ const parsers: {
   "inline-size": parseSizeDeclaration,
   "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,
@@ -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,
@@ -2097,16 +2137,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(
@@ -2359,6 +2390,18 @@ 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,
@@ -2416,6 +2459,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 +2489,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 +3099,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 +3125,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/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) {

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

@@ -1,4 +1,9 @@
-import { createElement, type ComponentProps } from "react";
+import {
+  createElement,
+  useMemo,
+  type ComponentProps,
+  type PropsWithChildren,
+} from "react";
 import { Appearance } from "react-native";
 
 import type {
@@ -24,7 +29,7 @@ export const styled = <
   };
 };
 
-export const useCssElement = <const C extends ReactComponent>(
+export const useCssElement = <C extends ReactComponent>(
   component: C,
   incomingProps: Props,
   mapping: StyledConfiguration<C>,
@@ -66,6 +71,9 @@ export const colorScheme: ColorScheme = {
   },
 };
 
+/**
+ * @deprecated Use `<VariableContextProvider />` instead.
+ */
 export function vars(variables: Record<string, string | number>) {
   const $variables: Record<string, string> = {};
 
@@ -79,6 +87,24 @@ export function vars(variables: Record<string, string | number>) {
   return $variables;
 }
 
+export function VariableContextProvider(
+  props: PropsWithChildren<{ value: Record<`--${string}`, string> }>,
+) {
+  const style = useMemo(() => {
+    return {
+      display: "content",
+      ...Object.fromEntries(
+        Object.entries(props.value).map(([key, value]) => [
+          key.startsWith("--") ? key : `--${key}`,
+          value,
+        ]),
+      ),
+    };
+  }, [props.value]);
+
+  return <div style={style}>{props.children}</div>;
+}
+
 export const useNativeVariable = () => {
   throw new Error("useNativeVariable is not supported in web");
 };

package/src/style-collection/root.ts

@@ -33,3 +33,5 @@ const rootVariableFamily = () => {
 
 export const rootVariables = rootVariableFamily();
 export const universalVariables = rootVariableFamily();
+
+rootVariables("__rn-css-rem").set([[14]]);