From a074293e005d7a31ea8468e5f221dc4ee78f74fb Mon Sep 17 00:00:00 2001
From: Diego Muracciole <diegomuracciole@gmail.com>
Date: Sun, 17 Nov 2024 19:06:30 +0100
Subject: [PATCH] feat: support rem units

---
 packages/layout/src/steps/resolveStyles.js  |  3 ++-
 packages/stylesheet/src/transform/units.js  |  4 +++-
 packages/stylesheet/tests/resolve.test.js   | 12 ++++++++++++
 packages/stylesheet/tests/transform.test.js |  2 +-
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/layout/src/steps/resolveStyles.js b/packages/layout/src/steps/resolveStyles.js
index b94637432..a3dbc26e8 100644
--- a/packages/layout/src/steps/resolveStyles.js
+++ b/packages/layout/src/steps/resolveStyles.js
@@ -60,7 +60,8 @@ export const resolvePageStyles = (page) => {
   const width = page.box?.width || page.style.width;
   const height = page.box?.height || page.style.height;
   const orientation = page.props?.orientation || 'portrait';
-  const container = { width, height, orientation, dpi };
+  const remBase = page.style?.fontSize || 18;
+  const container = { width, height, orientation, dpi, remBase };
 
   return resolveNodeStyles(container)(page);
 };
diff --git a/packages/stylesheet/src/transform/units.js b/packages/stylesheet/src/transform/units.js
index 01ec54b2e..2e675ac4e 100644
--- a/packages/stylesheet/src/transform/units.js
+++ b/packages/stylesheet/src/transform/units.js
@@ -5,7 +5,7 @@
  * @returns {Object} parsed value
  */
 const parseValue = (value) => {
-  const match = /^(-?\d*\.?\d+)(in|mm|cm|pt|vh|vw|px)?$/g.exec(value);
+  const match = /^(-?\d*\.?\d+)(in|mm|cm|pt|vh|vw|px|rem)?$/g.exec(value);
 
   return match
     ? { value: parseFloat(match[1]), unit: match[2] || 'pt' }
@@ -27,6 +27,8 @@ const transformUnit = (container, value) => {
   const cmFactor = (1 / 2.54) * dpi;
 
   switch (scalar.unit) {
+    case 'rem':
+      return scalar.value * (container.remBase || 18);
     case 'in':
       return scalar.value * dpi;
     case 'mm':
diff --git a/packages/stylesheet/tests/resolve.test.js b/packages/stylesheet/tests/resolve.test.js
index ee978975c..c75e8fbea 100644
--- a/packages/stylesheet/tests/resolve.test.js
+++ b/packages/stylesheet/tests/resolve.test.js
@@ -581,4 +581,16 @@ describe('stylesheet resolve', () => {
 
     expect(styles).toEqual({ fontSize: 10 });
   });
+
+  test('should resolve rem units correctly', () => {
+    const styles = resolve({ remBase: 10 }, { fontSize: '2rem' });
+
+    expect(styles).toEqual({ fontSize: 20 });
+  });
+
+  test('should resolve rem units when base not specificed', () => {
+    const styles = resolve({}, { fontSize: '2rem' });
+
+    expect(styles).toEqual({ fontSize: 36 });
+  });
 });
diff --git a/packages/stylesheet/tests/transform.test.js b/packages/stylesheet/tests/transform.test.js
index 30a61c073..09182c3db 100644
--- a/packages/stylesheet/tests/transform.test.js
+++ b/packages/stylesheet/tests/transform.test.js
@@ -2,7 +2,7 @@ import { describe, expect, test } from 'vitest';
 
 import _transformStyles from '../src/transform';
 
-const CONTAINER = { width: 200, height: 400 };
+const CONTAINER = { width: 200, height: 400, remBase: 10 };
 
 const transformStyles = _transformStyles(CONTAINER);