document

BuilderIO · Nov 21, 2024 · 8d7ae81 · 8d7ae81
1 parent 78d5015
commit 8d7ae81
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
@@ -660,7 +660,7 @@ describe('Builder', () => {
       {
         "style": {
           "bindingType": "expression",
-          "code": "{ fontSize: state.fontSize, '@media (max-width: 640px)': {\\"left\\":\\"state.left\\",\\"top\\":\\"state.top\\"}, '@media (max-width: 1200px)': {\\"color\\":\\"state.color\\"}, }",
+          "code": "{ fontSize: state.fontSize, \\"@media (max-width: 640px)\\": {\\"left\\":\\"state.left\\",\\"top\\":\\"state.top\\"}, \\"@media (max-width: 1200px)\\": {\\"color\\":\\"state.color\\"}, }",
           "type": "single",
         },
       }

diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts
@@ -136,7 +136,11 @@ const getStyleStringFromBlock = (block: BuilderElement, options: BuilderToMitosi
         const [_, size, prop] = key.split('.');
         const mediaKey = `@media (max-width: ${sizes[size as Size].max}px)`;
 
-        const objKey = `'${mediaKey}'`;
+        /**
+         * The media query key has spaces/special characters so we need to ensure
+         * that the key is always a string otherwise there will be runtime errors.
+         */
+        const objKey = `"${mediaKey}"`;
         responsiveStyles[objKey] = {
           ...responsiveStyles[objKey],
           [prop]: block.bindings[key],