fix: preserve global css when converting from/to builder json (#1561)

BuilderIO · Sep 24, 2024 · 52dc749 · 52dc749
1 parent ad7e576
commit 52dc749
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 0 deletions.
diff --git a/.changeset/ten-beers-rest.md b/.changeset/ten-beers-rest.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[Builder]: preserve global CSS when converting from/to Builder JSON.
diff --git a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
@@ -1818,6 +1818,7 @@ exports[`Builder > binding 1`] = `
  "name": "MyComponent",
  "refs": {},
  "state": {},
+ "style": "builder-component { max-width: none !important; }",
  "subComponents": [],
 }
 `;
@@ -1826,6 +1827,8 @@ exports[`Builder > binding 2`] = `
 "import { Button } from \\"@components\\";
 
 export default function MyComponent(props) {
+ useStyle(\`builder-component { max-width: none !important; }\`);
+
  return (
  <>
  <Button label=\\"hello\\" label={state.text} />
@@ -2098,6 +2101,51 @@ alert('hi');",
 }
 `;
 
+exports[`Builder > preserve cssCode when converting 1`] = `
+".foo {
+ background: green;
+}
+
+.bar {
+ font-weight: bold;
+}"
+`;
+
+exports[`Builder > preserve cssCode when converting 2`] = `
+".foo {
+ background: green;
+}
+
+.bar {
+ font-weight: bold;
+}"
+`;
+
+exports[`Builder > preserve cssCode when converting 3`] = `
+"export default function MyComponent(props) {
+ useStyle(\`.foo {
+ background: green;
+}
+
+.bar {
+ font-weight: bold;
+}\`);
+
+ return <></>;
+}
+"
+`;
+
+exports[`Builder > preserve cssCode when converting 4`] = `
+".foo {
+ background: green;
+}
+
+.bar {
+ font-weight: bold;
+}"
+`;
+
 exports[`Builder > slots 1`] = `
 {
  "@type": "@builder.io/mitosis/component",

diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
@@ -426,6 +426,36 @@ describe('Builder', () => {
  });
  expect(mitosis).toMatchSnapshot();
  });
+
+ test('preserve cssCode when converting', () => {
+ const builderJson: BuilderContent = {
+ data: {
+ cssCode: dedent`
+ .foo {
+ background: green;
+ }
+ 
+ .bar {
+ font-weight: bold;
+ }
+ `,
+ blocks: [],
+ },
+ };
+ const builderToMitosis = builderContentToMitosisComponent(builderJson);
+ expect(builderToMitosis.meta.cssCode).toMatchSnapshot();
+
+ const mitosisToBuilder = componentToBuilder()({ component: builderToMitosis })!;
+ expect(mitosisToBuilder.data!.cssCode).toMatchSnapshot();
+
+ const jsx = componentToMitosis(mitosisOptions)({
+ component: builderToMitosis,
+ });
+ expect(jsx).toMatchSnapshot();
+
+ const jsxToMitosis = parseJsx(jsx);
+ expect(jsxToMitosis.style).toMatchSnapshot();
+ });
 });
 
 const bindingJson = {

diff --git a/packages/core/src/generators/builder.ts b/packages/core/src/generators/builder.ts
@@ -355,6 +355,7 @@ export const componentToBuilder =
  })`
  }
  `),
+ cssCode: component?.style,
  blocks: component.children
  .filter(filterEmptyTextNodes)
  .map((child) => blockToBuilder(child, options)),

diff --git a/packages/core/src/generators/mitosis.ts b/packages/core/src/generators/mitosis.ts
@@ -218,6 +218,8 @@ export const componentToMitosis: TranspilerGenerator<Partial<ToMitosisOptions>>
 
  ${!json.hooks.onUnMount?.code ? '' : `onUnMount(() => { ${json.hooks.onUnMount.code} })`}
 
+ ${json.style ? `useStyle(\`${json.style}\`)` : ''}
+
  return (${addWrapper ? '<>' : ''}
  ${json.children.map((item) => blockToMitosis(item, options, component)).join('\n')}
  ${addWrapper ? '</>' : ''})

diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts
@@ -1018,8 +1018,10 @@ const builderContentPartToMitosisComponent = (
  useMetadata: {
  httpRequests: builderContent.data?.httpRequests,
  },
+ // cmp.meta.cssCode exists for backwards compatibility, prefer cmp.style
  ...(builderContent.data?.cssCode && { cssCode: builderContent.data.cssCode }),
  },
+ ...(builderContent.data?.cssCode && { style: builderContent.data?.cssCode }),
  inputs: builderContent.data?.inputs?.map((input) => ({
  name: input.name,
  defaultValue: input.defaultValue,