From b3a7b8e502ea492501fe16ebc1a8a61030924ff2 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liady@users.noreply.github.com>
Date: Wed, 2 Oct 2024 12:05:19 +0300
Subject: [PATCH] fix(css): dont set dimensions on canvas element (#6445)

**Problem:**
Today all css declarations on `body` or `html` are being applied to
`#canvas-element`, including dimesions declarations (width, height,
etc). This can cause weird canvas appearance.

**Fix:**
Filter out dimesions declarations when applying styles to the canvas
element.
This is a part of the larger Vite import task, but it's a general fix.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Play mode.
---
 editor/src/core/shared/css-utils.spec.ts |  2 ++
 editor/src/core/shared/css-utils.ts      | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/editor/src/core/shared/css-utils.spec.ts b/editor/src/core/shared/css-utils.spec.ts
index eab94b804176..e2f5e1b2e09b 100644
--- a/editor/src/core/shared/css-utils.spec.ts
+++ b/editor/src/core/shared/css-utils.spec.ts
@@ -10,6 +10,8 @@ describe('rescopeCSSToTargetCanvasOnly', () => {
     const input = `
       body {
         font-family: San Francisco, SF UI, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        width: 100%;
+        height: 100%;
       }
 
       @font-face {
diff --git a/editor/src/core/shared/css-utils.ts b/editor/src/core/shared/css-utils.ts
index 8a3a9afc4e7c..60a887c075a0 100644
--- a/editor/src/core/shared/css-utils.ts
+++ b/editor/src/core/shared/css-utils.ts
@@ -28,13 +28,28 @@ export function rescopeCSSToTargetCanvasOnly(input: string): string {
 
   let ast = csstree.parse(scopedInput)
 
-  csstree.walk(ast, (node, item, list) => {
+  csstree.walk(ast, function (node, item, list) {
     // As we are wrapping in an @scope, we need to redirect certain selectors to :scope
     if (isSelectorToChange(node) && list != null) {
       list.insertData(scopePseudoClassSelector(), item)
       list.remove(item)
+      // we need to remove dimensions since they now apply to our canvas
+      if (this.rule != null) {
+        removeDimensionsFromCssRule(this.rule)
+      }
     }
   })
 
   return csstree.generate(ast)
 }
+
+const propertiesToRemove = ['width', 'height', 'max-width', 'max-height', 'min-width', 'min-height']
+function removeDimensionsFromCssRule(rule: csstree.Rule): void {
+  csstree.walk(rule, (node, item, list) => {
+    if (node.type === 'Declaration' && list != null) {
+      if (propertiesToRemove.includes(node.property)) {
+        list.remove(item)
+      }
+    }
+  })
+}