From e94e50a931df7347a8febc717ca76843502826c8 Mon Sep 17 00:00:00 2001
From: Diego Muracciole <diegomuracciole@gmail.com>
Date: Sat, 2 Jul 2022 23:39:20 -0300
Subject: [PATCH] fix: media queries computing (#1910)

---
 .changeset/hot-pets-repeat.md                 |  5 +++
 packages/layout/src/steps/resolveStyles.js    |  6 ++--
 .../__snapshots__/resolveStyles.test.js.snap  | 29 +++++++++++++++
 .../layout/tests/steps/resolveStyles.test.js  | 35 +++++++++++++++++++
 4 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/hot-pets-repeat.md

diff --git a/.changeset/hot-pets-repeat.md b/.changeset/hot-pets-repeat.md
new file mode 100644
index 000000000..fac544e9d
--- /dev/null
+++ b/.changeset/hot-pets-repeat.md
@@ -0,0 +1,5 @@
+---
+'@react-pdf/layout': patch
+---
+
+fix: media queries computing
diff --git a/packages/layout/src/steps/resolveStyles.js b/packages/layout/src/steps/resolveStyles.js
index e6b38127d..46b23a877 100644
--- a/packages/layout/src/steps/resolveStyles.js
+++ b/packages/layout/src/steps/resolveStyles.js
@@ -52,8 +52,10 @@ const resolveNodeStyles = container => node => {
  */
 const resolvePageStyles = page => {
   const dpi = page.props?.dpi || 72;
-  const box = page.box || page.style;
-  const container = { ...box, dpi };
+  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 };
 
   return resolveNodeStyles(container)(page);
 };
diff --git a/packages/layout/tests/steps/__snapshots__/resolveStyles.test.js.snap b/packages/layout/tests/steps/__snapshots__/resolveStyles.test.js.snap
index 5e4831c80..553999724 100644
--- a/packages/layout/tests/steps/__snapshots__/resolveStyles.test.js.snap
+++ b/packages/layout/tests/steps/__snapshots__/resolveStyles.test.js.snap
@@ -185,6 +185,35 @@ Object {
 }
 `;
 
+exports[`layout resolveStyles Should resolve nested node styles media queries with page style 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [
+        Object {
+          "style": Object {
+            "backgroundColor": "green",
+          },
+          "type": "VIEW",
+        },
+        Object {
+          "style": Object {
+            "backgroundColor": "red",
+          },
+          "type": "VIEW",
+        },
+      ],
+      "style": Object {
+        "height": 200,
+        "width": 100,
+      },
+      "type": "PAGE",
+    },
+  ],
+  "type": "DOCUMENT",
+}
+`;
+
 exports[`layout resolveStyles Should resolve page styles 1`] = `
 Object {
   "children": Array [
diff --git a/packages/layout/tests/steps/resolveStyles.test.js b/packages/layout/tests/steps/resolveStyles.test.js
index b372f9f64..0b6e83273 100644
--- a/packages/layout/tests/steps/resolveStyles.test.js
+++ b/packages/layout/tests/steps/resolveStyles.test.js
@@ -133,6 +133,41 @@ describe('layout resolveStyles', () => {
     expect(result).toMatchSnapshot();
   });
 
+  test('Should resolve nested node styles media queries with page style', () => {
+    const root = {
+      type: 'DOCUMENT',
+      children: [
+        {
+          type: 'PAGE',
+          style: { width: 100, height: 200 },
+          children: [
+            {
+              type: 'VIEW',
+              style: {
+                backgroundColor: 'red',
+                '@media max-width: 500': {
+                  backgroundColor: 'green',
+                },
+              },
+            },
+            {
+              type: 'VIEW',
+              style: {
+                backgroundColor: 'red',
+                '@media min-width: 500': {
+                  backgroundColor: 'green',
+                },
+              },
+            },
+          ],
+        },
+      ],
+    };
+    const result = resolveStyles(root);
+
+    expect(result).toMatchSnapshot();
+  });
+
   test('Should resolve nested node styles array', () => {
     const root = {
       type: 'DOCUMENT',