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

@@ -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 {

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