fix: preserve bound media query styles when converting builder to mitosis

.changeset/violet-kangaroos-sing.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[Builder] preserve bound media query styles when converting to Mitosis

packages/core/src/__tests__/builder.test.ts

@@ -675,6 +675,56 @@ describe('Builder', () => {
       'world',
     );
   });
+
+  test('preserve bound media query styles when converting to mitosis', () => {
+    const content = {
+      data: {
+        blocks: [
+          {
+            '@type': '@builder.io/sdk:Element' as const,
+            bindings: {
+              'responsiveStyles.small.left': 'state.left',
+              'responsiveStyles.small.top': 'state.top',
+              'responsiveStyles.large.color': 'state.color',
+              'style.fontSize': 'state.fontSize',
+            },
+          },
+        ],
+      },
+    };
+
+    const mitosis = builderContentToMitosisComponent(content);
+    expect(mitosis.children[0].bindings).toMatchInlineSnapshot(`
+      {
+        "style": {
+          "bindingType": "expression",
+          "code": "{ fontSize: state.fontSize, \\"@media (max-width: 640px)\\": {\\"left\\":\\"state.left\\",\\"top\\":\\"state.top\\"}, \\"@media (max-width: 1200px)\\": {\\"color\\":\\"state.color\\"}, }",
+          "type": "single",
+        },
+      }
+    `);
+
+    const jsx = componentToMitosis()({ component: mitosis });
+    expect(jsx).toMatchInlineSnapshot(`
+      "export default function MyComponent(props) {
+        return (
+          <div
+            style={{
+              fontSize: state.fontSize,
+              \\"@media (max-width: 640px)\\": {
+                left: \\"state.left\\",
+                top: \\"state.top\\",
+              },
+              \\"@media (max-width: 1200px)\\": {
+                color: \\"state.color\\",
+              },
+            }}
+          />
+        );
+      }
+      "
+    `);
+  });
 });
 
 const bindingJson = {

packages/core/src/parsers/builder/builder.ts

@@ -108,17 +108,50 @@ const getActionBindingsFromBlock = (
 
 const getStyleStringFromBlock = (block: BuilderElement, options: BuilderToMitosisOptions) => {
   const styleBindings: any = {};
+  const responsiveStyles: Record<string, Record<string, string>> = {};
   let styleString = '';
 
   if (block.bindings) {
     for (const key in block.bindings) {
-      if (key.includes('style') && key.includes('.')) {
+      if (!key.includes('.')) {
+        continue;
+      }
+      if (key.includes('style')) {
         const styleProperty = key.split('.')[1];
         styleBindings[styleProperty] = convertExportDefaultToReturn(
           block.code?.bindings?.[key] || block.bindings[key],
         );
+        /**
+         * responsiveStyles that are bound need to be merged into media queries.
+         * Example:
+         * responsiveStyles.large.color: "state.color"
+         * responsiveStyles.large.background: "state.background"
+         * Should get mapped to:
+         * @media (max-width: 1200px): {
+         *   color: "state.color",
+         *   background: "state.background"
+         * }
+         */
+      } else if (key.includes('responsiveStyles')) {
+        const [_, size, prop] = key.split('.');
+        const mediaKey = `@media (max-width: ${sizes[size as Size].max}px)`;
+
+        /**
+         * 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],
+        };
       }
     }
+
+    // All binding values are strings, so stringify media query objects
+    for (const key in responsiveStyles) {
+      styleBindings[key] = JSON.stringify(responsiveStyles[key]);
+    }
   }
 
   const styleKeys = Object.keys(styleBindings);