Merge branch 'main' into generate-from-angular-selectors

BuilderIO · Dec 10, 2024 · a54c48d · a54c48d
2 parents 1ce09e3 + 74e4f18
commit a54c48d
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 10 deletions.
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @builder.io/mitosis-cli
 
+## 0.5.22
+
+### Patch Changes
+
+- Updated dependencies [d52fe59]
+  - @builder.io/[email protected]
+
 ## 0.5.21
 
 ### Patch Changes

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/mitosis-cli",
-  "version": "0.5.21",
+  "version": "0.5.22",
   "description": "mitosis CLI",
   "types": "build/types/types.d.ts",
   "bin": {

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.5.22
+
+### Patch Changes
+
+- d52fe59: [Builder]: bound media query styles are not converted to strings
+
 ## 0.5.21
 
 ### Patch Changes

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.21",
+  "version": "0.5.22",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {

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;
     }
   }