feat!: remove rem export. Allow rem to be set via :root selector (#130)

Author: marklawlor

src/__tests__/native/units.test.tsx

@@ -6,7 +6,6 @@ import { useNativeCss } from "react-native-css/runtime/native";
 
 import {
   dimensions,
-  rem,
   VAR_SYMBOL,
   VariableContext,
   vh,
@@ -112,7 +111,7 @@ test("rem - default", () => {
   });
 });
 
-test("rem - override", () => {
+test("rem - inline override", () => {
   registerCSS(`.my-class { font-size: 10rem; }`, {
     inlineRem: 10,
   });
@@ -133,32 +132,21 @@ test("rem - override", () => {
   });
 });
 
-test("rem - dynamic", () => {
-  registerCSS(`.my-class { font-size: 10rem; }`, {
-    inlineRem: false,
-  });
+test("rem - css override", () => {
+  registerCSS(
+    `
+    :root { font-size: 10px; }
+    .my-class { font-size: 10rem; }
+  `,
+    {
+      inlineRem: false,
+    },
+  );
 
   const { result } = renderHook(() => {
     return useNativeCss(View, { className: "my-class" });
   });
 
-  expect(rem.get()).toEqual(14);
-  expect(result.current.type).toBe(VariableContext.Provider);
-  expect(result.current.props.value).toStrictEqual({
-    [VAR_SYMBOL]: true,
-    [emVariableName]: [{}, "rem", 10],
-  });
-
-  expect(result.current.props.children.type).toBe(View);
-  expect(result.current.props.children.props).toStrictEqual({
-    style: { fontSize: 140 },
-  });
-
-  act(() => {
-    rem.set(10);
-  });
-
-  expect(rem.get()).toEqual(10);
   expect(result.current.type).toBe(VariableContext.Provider);
   expect(result.current.props.value).toStrictEqual({
     [VAR_SYMBOL]: true,

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);
+          }
         }
       }
     }

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);
 });

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));

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) {

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