fix: propagate inlineRem and Metro config to compiler (Tailwind v4) (#316)

src/__tests__/native/units.test.tsx

@@ -148,6 +148,23 @@ test("rem - css root font-size override", () => {
   });
 });
 
+test("rem - via var() inlining picks up css root font-size ", () => {
+  registerCSS(`
+    :root { font-size: 16px; --text-base: 1rem; }
+    .text-base { font-size: var(--text-base); }
+  `);
+
+  const { result } = renderHook(() => {
+    return useNativeCss(View, { className: "text-base" });
+  });
+
+  expect(result.current.type).toBe(VariableContext.Provider);
+  expect(result.current.props.children.type).toBe(View);
+  expect(result.current.props.children.props).toStrictEqual({
+    style: { fontSize: 16 },
+  });
+});
+
 test("rem - css override", () => {
   registerCSS(
     `

src/compiler/compiler.ts

@@ -92,6 +92,7 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
     const css = typeof code === "string" ? code : code.toString();
     const match = css.match(/:root\s*\{[^}]*font-size:\s*([\d.]+)px/);
     effectiveRem = match?.[1] ? parseFloat(match[1]) : 14;
+    options.inlineRem = effectiveRem;
   }
 
   const firstPassVisitor: Visitor<CustomAtRules> = {};

src/metro/metro-transformer.ts

@@ -13,13 +13,13 @@ const worker =
   require(unstable_transformerPath) as typeof import("metro-transform-worker");
 
 export async function transform(
-  config: JsTransformerConfig,
+  config: JsTransformerConfig & {
+    reactNativeCSS?: CompilerOptions | undefined;
+  },
   projectRoot: string,
   filePath: string,
   data: Buffer,
-  options: JsTransformOptions & {
-    reactNativeCSS?: CompilerOptions | undefined;
-  },
+  options: JsTransformOptions,
 ): Promise<TransformResponse> {
   const isCss = options.type !== "asset" && /\.(s?css|sass)$/.test(filePath);
 
@@ -37,7 +37,7 @@ export async function transform(
   const css = cssFile.output[0].data.css.code.toString();
 
   const productionJS = compile(css, {
-    ...options.reactNativeCSS,
+    ...config.reactNativeCSS,
     filename: filePath,
     projectRoot: projectRoot,
   }).stylesheet();