fix: bound media query styles are not converted to strings (#1651)

BuilderIO · Dec 6, 2024 · d52fe59 · d52fe59
1 parent 2ab73e1
commit d52fe59
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/.changeset/shy-windows-rest.md b/.changeset/shy-windows-rest.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[Builder]: bound media query styles are not converted to strings
diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
@@ -698,7 +698,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",
         },
       }
@@ -712,11 +712,11 @@ describe('Builder', () => {
             style={{
               fontSize: state.fontSize,
               \\"@media (max-width: 640px)\\": {
-                left: \\"state.left\\",
-                top: \\"state.top\\",
+                left: state.left,
+                top: state.top,
               },
               \\"@media (max-width: 1200px)\\": {
-                color: \\"state.color\\",
+                color: state.color,
               },
             }}
           />

diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts
@@ -128,8 +128,8 @@ const getStyleStringFromBlock = (block: BuilderElement, options: BuilderToMitosi
          * responsiveStyles.large.background: "state.background"
          * Should get mapped to:
          * @media (max-width: 1200px): {
-         *   color: "state.color",
-         *   background: "state.background"
+         *   color: state.color,
+         *   background: state.background
          * }
          */
       } else if (key.includes('responsiveStyles')) {
@@ -148,9 +148,16 @@ const getStyleStringFromBlock = (block: BuilderElement, options: BuilderToMitosi
       }
     }
 
-    // All binding values are strings, so stringify media query objects
+    /**
+     * All binding values are strings, but we don't want to stringify the values
+     * within the style object otherwise the bindings will be evaluated as strings.
+     * As a result, do not use JSON.stringify here.
+     */
     for (const key in responsiveStyles) {
-      styleBindings[key] = JSON.stringify(responsiveStyles[key]);
+      const styles = Object.keys(responsiveStyles[key]);
+      const keyValues = styles.map((prop) => `${prop}: ${responsiveStyles[key][prop]}`);
+      const stringifiedObject = `{ ${keyValues.join(', ')} }`;
+      styleBindings[key] = stringifiedObject;
     }
   }