Merge pull request #622 from components-ai/style-elements

Add style element to enhance export

Author: johno

.changeset/long-camels-study.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Add style element to enhance export

packages/gui/package.json

@@ -41,6 +41,7 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
+    "@emotion/hash": "^0.9.0",
     "@emotion/react": "^11.9.0",
     "@mdx-js/react": "^1.6.22",
     "@radix-ui/react-accordion": "^0.1.6",

packages/gui/src/lib/codegen/enhance-sfc.ts

@@ -8,6 +8,7 @@ import { format } from './format'
 import { getAttrSyntax } from './util'
 import { CodegenOptions } from './types'
 import { Theme } from '../../types/theme'
+import { inlineStylesToStyleElement } from '../transformers/inline-styles-to-style-element'
 
 const h = (theme: Theme) => (tagName: string, props: any, children?: any[]) => {
   const newProps = toReactProps(props)
@@ -23,13 +24,20 @@ const h = (theme: Theme) => (tagName: string, props: any, children?: any[]) => {
 
 export const enhanceSFC = async (node: HtmlNode, options: CodegenOptions) => {
   const root = editorSchemaToHast(node, { addSlotTagSyntax: true })
-  const functionBody = stringifyHastNode(toH(h(options?.theme), root))
+  const { node: htmlNode, styles } = inlineStylesToStyleElement(root)
+  // @ts-ignore
+  const functionBody = stringifyHastNode(toH(h(options?.theme), htmlNode))
+
+  const htmlString = `
+        <style>${styles}</style>
+      ${functionBody}`
+  const formattedHtmlString = await format('html', htmlString)
 
   const output = `
   export default function Component({ html, state = {} }) {
     ${getAttrSyntax(node)}
     return html\`
-      ${functionBody}
+      ${formattedHtmlString}
     \`
   }
   `

packages/gui/src/lib/transformers/editor-schema-to-hast.ts

@@ -40,5 +40,6 @@ export const editorSchemaToHast = (node: any, options?: Options) => {
       }
     })
     .runSync(cloneDeep(node))
+
   return processedTree
 }

packages/gui/src/lib/transformers/inline-styles-to-style-element.ts

@@ -0,0 +1,42 @@
+import { cloneDeep } from 'lodash-es'
+import { unified } from 'unified'
+import { visit } from 'unist-util-visit'
+import hash from '@emotion/hash'
+import { stringifyCSSObject } from '../codegen/stringify-css-object'
+import { toCSSObject } from '../codegen/to-css-object'
+import { addCSSClassSyntax } from '../classes'
+
+export const inlineStylesToStyleElement = (node: any) => {
+  const styleMap: Record<string, any> = {}
+  const processedTree = unified()
+    .use(() => (tree) => {
+      visit(tree, 'element', (node: any) => {
+        if (!node.properties.style) {
+          return
+        }
+
+        const style = node.properties.style
+        // @ts-ignore
+        const selector = 'css-' + hash.default(JSON.stringify(style))
+
+        if (!node.properties.class) {
+          node.properties.class = selector
+        } else {
+          node.properties.class = node.properties.class + ' ' + selector
+        }
+
+        delete node.properties.style
+
+        styleMap[selector] = stringifyCSSObject(
+          toCSSObject(style),
+          addCSSClassSyntax(selector)
+        )
+      })
+    })
+    .runSync(cloneDeep(node))
+
+  return {
+    node: processedTree,
+    styles: Object.values(styleMap).join('\n'),
+  }
+}

yarn.lock

@@ -565,6 +565,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/hash@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
+
 "@emotion/is-prop-valid@^0.8.1":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"