Merge pull request #618 from components-ai/theme-with-codegen

Make sure all code generators are passed theme in export

Author: johno

.changeset/cold-kids-refuse.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Make sure all code generators are passed theme in export

packages/gui/src/lib/codegen/emotion.ts

@@ -7,6 +7,7 @@ import { toReactProps } from './to-react-props'
 import { format } from './format'
 import { getPropSyntax } from './util'
 import { Theme } from '../../types/theme'
+import { CodegenOptions } from './types'
 
 const h =
   (theme?: Theme) => (tagName: string, props: any, children?: any[]) => {
@@ -21,9 +22,9 @@ const h =
     return { tagName, props: newProps, children }
   }
 
-export const emotion = async (node: HtmlNode, options: any) => {
+export const emotion = async (node: HtmlNode, options: CodegenOptions) => {
   const root = editorSchemaToHast(node, { addSlotSyntax: true })
-  const functionBody = stringifyHastNode(toH(h(options.theme), root))
+  const functionBody = stringifyHastNode(toH(h(options?.theme), root))
 
   const output = `
   /** @jsxImportSource @emotion/react */

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

@@ -6,22 +6,24 @@ import { stringifyHastNode } from './stringify-hast-node-as-html'
 import { toReactProps } from './to-react-props'
 import { format } from './format'
 import { getAttrSyntax } from './util'
+import { CodegenOptions } from './types'
+import { Theme } from '../../types/theme'
 
-const h = (tagName: string, props: any, children?: any[]) => {
+const h = (theme: Theme) => (tagName: string, props: any, children?: any[]) => {
   const newProps = toReactProps(props)
 
   if (newProps.style) {
     const style = newProps.style
     delete newProps.style
-    newProps.style = toCSSObject(style)
+    newProps.style = toCSSObject(style, theme)
   }
 
   return { tagName, props: newProps, children }
 }
 
-export const enhanceSFC = async (node: HtmlNode) => {
+export const enhanceSFC = async (node: HtmlNode, options: CodegenOptions) => {
   const root = editorSchemaToHast(node, { addSlotTagSyntax: true })
-  const functionBody = stringifyHastNode(toH(h, root))
+  const functionBody = stringifyHastNode(toH(h(options?.theme), root))
 
   const output = `
   export default function Component({ html, state = {} }) {

packages/gui/src/lib/codegen/html.ts

@@ -3,6 +3,7 @@ import rehypeStringify from 'rehype-stringify'
 import { HtmlNode } from '../../components/html/types'
 import { editorSchemaToHast } from '../transformers/editor-schema-to-hast'
 import { format } from './format'
+import { CodegenOptions } from './types'
 
 export const unstyledHtml = async (node: HtmlNode) => {
   const root = editorSchemaToHast(node, {
@@ -12,11 +13,7 @@ export const unstyledHtml = async (node: HtmlNode) => {
   return format('html', output)
 }
 
-type HTMLOptions = {
-  selector?: string
-  theme?: any
-}
-export const html = async (node: HtmlNode, { theme }: HTMLOptions = {}) => {
+export const html = async (node: HtmlNode, { theme }: CodegenOptions = {}) => {
   const res = await fetch('https://components.ai/api/v1/gui/export/html', {
     method: 'POST',
     headers: {

packages/gui/src/lib/codegen/react.ts

@@ -5,15 +5,19 @@ import { format } from './format'
 import { html as toHtml } from './html'
 import { stringifyHastNode } from './stringify-hast-node-as-jsx'
 import { toReactProps } from './to-react-props'
+import { CodegenOptions } from './types'
 
 const h = (tagName: string, props: any, children?: any[]) => {
   const newProps = toReactProps(props)
 
   return { tagName, props: newProps, children }
 }
 
-export const react = async (node: HtmlNode): Promise<string> => {
-  const html = await toHtml(node)
+export const react = async (
+  node: HtmlNode,
+  options: CodegenOptions
+): Promise<string> => {
+  const html = await toHtml(node, options)
   const { styles } = await extractStyles(html)
   const jsx = stringifyHastNode(toH(h, node as any))
 

packages/gui/src/lib/codegen/styled-jsx.ts

@@ -5,15 +5,19 @@ import { format } from './format'
 import { html as toHtml } from './html'
 import { stringifyHastNode } from './stringify-hast-node-as-jsx'
 import { toReactProps } from './to-react-props'
+import { CodegenOptions } from './types'
 
 const h = (tagName: string, props: any, children?: any[]) => {
   const newProps = toReactProps(props)
 
   return { tagName, props: newProps, children }
 }
 
-export const styledJsx = async (node: HtmlNode): Promise<string> => {
-  const html = await toHtml(node)
+export const styledJsx = async (
+  node: HtmlNode,
+  options: CodegenOptions
+): Promise<string> => {
+  const html = await toHtml(node, options)
   const { styles } = await extractStyles(html)
   const jsx = stringifyHastNode(toH(h, node as any))
 

packages/gui/src/lib/codegen/theme-ui.ts

@@ -6,22 +6,28 @@ import { stringifyHastNode } from './stringify-hast-node-as-jsx'
 import { toReactProps } from './to-react-props'
 import { format } from './format'
 import { getPropSyntax } from './util'
+import { CodegenOptions } from './types'
+import { Theme } from '../../types/theme'
 
-const h = (tagName: string, props: any, children?: any[]) => {
-  const newProps = toReactProps(props)
+const h =
+  (theme?: Theme) => (tagName: string, props: any, children?: any[]) => {
+    const newProps = toReactProps(props)
 
-  if (newProps.style) {
-    const style = newProps.style
-    delete newProps.style
-    newProps.sx = toCSSObject(style)
-  }
+    if (newProps.style) {
+      const style = newProps.style
+      delete newProps.style
+      newProps.sx = toCSSObject(style, theme)
+    }
 
-  return { tagName, props: newProps, children }
-}
+    return { tagName, props: newProps, children }
+  }
 
-export const themeUI = async (node: HtmlNode) => {
+export const themeUI = async (
+  node: HtmlNode,
+  { theme }: CodegenOptions = {}
+) => {
   const root = editorSchemaToHast(node, { addSlotSyntax: true })
-  const functionBody = stringifyHastNode(toH(h, root))
+  const functionBody = stringifyHastNode(toH(h(theme), root))
 
   const output = `
   /** @jsxImportSource theme-ui */

packages/gui/src/lib/codegen/to-css-object.ts

@@ -23,18 +23,22 @@ export const stringifyProperty = (
 type StyleEntry = [string, Length | string | null | undefined]
 export const toCSSObject = (providedStyles: Styles, theme?: Theme): any => {
   const styles = stylesToEditorSchema(providedStyles)
-  // @ts-ignore
-  return Object.entries(styles).reduce((acc: Styles, curr: StyleEntry) => {
-    const [property, value] = curr
-    if (isNestedSelector(property.replace(/^:+/, ''))) {
+  const cssObject = Object.entries(styles).reduce(
+    // @ts-ignore
+    (acc: Styles, curr: StyleEntry) => {
+      const [property, value] = curr
+      if (isNestedSelector(property.replace(/^:+/, ''))) {
+        return {
+          ...acc,
+          [stringifySelector(property)]: toCSSObject(value as Styles, theme),
+        }
+      }
       return {
         ...acc,
-        [stringifySelector(property)]: toCSSObject(value as Styles, theme),
+        [property]: stringifyProperty(property, value, theme),
       }
-    }
-    return {
-      ...acc,
-      [property]: stringifyProperty(property, value, theme),
-    }
-  }, {})
+    },
+    {}
+  )
+  return cssObject
 }

packages/gui/src/lib/codegen/types.ts

@@ -0,0 +1,4 @@
+export type CodegenOptions = {
+  selector?: string
+  theme?: any
+}

packages/gui/src/lib/codegen/vue.ts

@@ -2,9 +2,10 @@ import { HtmlNode } from '../../components/html/types'
 import { extractStyles } from './extract-styles'
 import { format } from './format'
 import { html as toHtml } from './html'
+import { CodegenOptions } from './types'
 
-export const vue = async (node: HtmlNode) => {
-  const src = await toHtml(node)
+export const vue = async (node: HtmlNode, options: CodegenOptions) => {
+  const src = await toHtml(node, options)
   const { html, styles } = await extractStyles(src)
 
   const output = `