fix: Builder bound style literals are not removed (#1684)

BuilderIO · Feb 12, 2025 · b91dfa7 · b91dfa7
1 parent a68bd42
commit b91dfa7
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 44 deletions.
diff --git a/.changeset/warm-jars-destroy.md b/.changeset/warm-jars-destroy.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Builder: bound style string literals are not removed
diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
@@ -757,6 +757,8 @@ describe('Builder', () => {
               'responsiveStyles.small.top': 'state.top',
               'responsiveStyles.large.color': 'state.color',
               'style.fontSize': 'state.fontSize',
+              'style.background': '"red"',
+              'responsiveStyles.large.background': '"green"',
             },
           },
         ],
@@ -768,61 +770,65 @@ 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, background: \\"red\\", \\"@media (max-width: 640px)\\": { left: state.left, top: state.top }, \\"@media (max-width: 1200px)\\": { color: state.color, background: \\"green\\" }, }",
           "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,
-              },
-            }}
-          />
-        );
-      }
-      "
-    `);
+          "export default function MyComponent(props) {
+            return (
+              <div
+                style={{
+                  fontSize: state.fontSize,
+                  background: \\"red\\",
+                  \\"@media (max-width: 640px)\\": {
+                    left: state.left,
+                    top: state.top,
+                  },
+                  \\"@media (max-width: 1200px)\\": {
+                    color: state.color,
+                    background: \\"green\\",
+                  },
+                }}
+              />
+            );
+          }
+          "
+        `);
 
     const json = componentToBuilder()({ component: mitosis });
     expect(json).toMatchInlineSnapshot(`
-      {
-        "data": {
-          "blocks": [
-            {
-              "@type": "@builder.io/sdk:Element",
-              "actions": {},
-              "bindings": {
-                "responsiveStyles.large.color": "state.color",
-                "responsiveStyles.small.left": "state.left",
-                "responsiveStyles.small.top": "state.top",
-                "style.fontSize": "state.fontSize",
-              },
-              "children": [],
-              "code": {
-                "actions": {},
-                "bindings": {},
-              },
-              "properties": {},
-              "tagName": "div",
+          {
+            "data": {
+              "blocks": [
+                {
+                  "@type": "@builder.io/sdk:Element",
+                  "actions": {},
+                  "bindings": {
+                    "responsiveStyles.large.background": "\\"green\\"",
+                    "responsiveStyles.large.color": "state.color",
+                    "responsiveStyles.small.left": "state.left",
+                    "responsiveStyles.small.top": "state.top",
+                    "style.background": "\\"red\\"",
+                    "style.fontSize": "state.fontSize",
+                  },
+                  "children": [],
+                  "code": {
+                    "actions": {},
+                    "bindings": {},
+                  },
+                  "properties": {},
+                  "tagName": "div",
+                },
+              ],
+              "jsCode": "",
+              "tsCode": "",
             },
-          ],
-          "jsCode": "",
-          "tsCode": "",
-        },
-      }
-    `);
+          }
+        `);
   });
 
   test('map custom component bindings', () => {

diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts
@@ -1010,6 +1010,7 @@ export function convertExportDefaultToReturn(code: string) {
   try {
     const { types } = babel;
     const body = parseCode(code);
+    if (body.length === 0) return code;
     const newBody = body.slice();
     for (let i = 0; i < body.length; i++) {
       const statement = body[i];