Merge pull request #620 from components-ai/style-string-and-attrs

Use a style string rather than object

Author: johno

.changeset/strong-cheetahs-tap.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Use style string and don't destructure slots as attrs

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

@@ -3,7 +3,7 @@ import { isCSSClass } from '../classes'
 import { isElement } from '../elements'
 import { isPseudo } from '../pseudos'
 
-const objectToDecls = (obj: any): string => {
+export const objectToDecls = (obj: any): string => {
   return Object.entries(obj)
     .map(([key, value]: [string, any]) => {
       return `  ${kebabCase(key)}: ${value};`

packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts

@@ -2,6 +2,7 @@ import { isArray, isNumber, isObject, kebabCase } from 'lodash-es'
 import escapeHtml from 'escape-html'
 import { isElement, isVoidElement } from '../elements'
 import { getSlots, isSlot } from './util'
+import { objectToDecls } from './stringify-css-object'
 
 // TODO: This can, and should, be done at the AST level in the future
 export const formatTagName = (node: any) => {
@@ -23,6 +24,10 @@ export const stringifyHastNode = (node: any) => {
     return node.value || node
   }
 
+  if (node.props.style) {
+    node.props.style = objectToDecls(node.props.style).trim()
+  }
+
   if (isVoidElement(node.tagName)) {
     return `<${formatTagName(node)} ${stringifyProps(node.props)} />`
   }

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

@@ -55,7 +55,9 @@ export const stringifySlotInProp = (value: any, outerProps: any) => {
 export const isText = (value: HtmlNode) => value?.type === 'text'
 export const isSlot = (value: HtmlNode) => value?.type === 'slot'
 
+// TODO: This should find attr slots only
 export const getAttrSyntax = (value: HtmlNode) => {
+  return ''
   const slots = getSlots(value)
 
   if (!slots.length) {