feat: improve rem inlining to simplify calc()

Author: marklawlor

src/__tests__/compiler/compiler.test.tsx

@@ -381,3 +381,27 @@ test("warnings", () => {
     },
   });
 });
+
+test("simplifies rem", () => {
+  const compiled = compile(`.test {
+    border-width: calc(10rem + 2px);
+  }`);
+
+  expect(compiled.stylesheet()).toStrictEqual({
+    s: [
+      [
+        "test",
+        [
+          {
+            d: [
+              {
+                borderWidth: 142,
+              },
+            ],
+            s: [1, 1],
+          },
+        ],
+      ],
+    ],
+  });
+});

src/compiler/compiler.ts

@@ -33,6 +33,7 @@ const defaultLogger = debug("react-native-css:compiler");
  */
 export function compile(code: Buffer | string, options: CompilerOptions = {}) {
   const { logger = defaultLogger } = options;
+
   const isLoggerEnabled =
     "enabled" in logger ? logger.enabled : Boolean(logger);
 
@@ -103,9 +104,32 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) {
     };
   }
 
-  // Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
-  lightningcss({
+  /**
+   * Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
+   *
+   * We pass the CSS twice, the first time to inline variables and then the second so lightningcss can optimize
+   * the changes we did
+   */
+  const { code: firstPass } = lightningcss({
     code: typeof code === "string" ? new TextEncoder().encode(code) : code,
+    visitor: {
+      Length(length) {
+        if (length.unit !== "rem" || options.inlineRem === false) {
+          return length;
+        }
+
+        return {
+          unit: "px",
+          value: length.value * (options.inlineRem ?? 14),
+        };
+      },
+    },
+    filename: options.filename ?? "style.css",
+    projectRoot: options.projectRoot ?? process.cwd(),
+  });
+
+  lightningcss({
+    code: firstPass,
     visitor,
     filename: options.filename ?? "style.css",
     projectRoot: options.projectRoot ?? process.cwd(),