feat: support rem units

.changeset/famous-kings-dress.md

@@ -0,0 +1,6 @@
+---
+"@react-pdf/layout": patch
+"@react-pdf/stylesheet": minor
+---
+
+feat: support rem units

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

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':

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

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