Merge pull request #509 from components-ai/fix-style-error

Drop style attributes during import for now

Author: johno

.changeset/stupid-laws-brake.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Ignore style attribute on import for now

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

@@ -2,12 +2,17 @@ import { unified } from 'unified'
 import { cleanNewLines } from './plugins/clean-new-lines'
 import { propertiesToAttributes } from './plugins/properties-to-attributes'
 import { Root } from 'rehype-parse/lib'
+import { transformStyleAttributes } from './plugins/transform-style-attributes'
+import { moveStyleToTopLevel } from './plugins/move-style-to-top-level'
 
 export const hastToEditorSchema = (tree: Root) => {
   const processedTree = unified()
     .use(cleanNewLines)
     // @ts-ignore
+    .use(moveStyleToTopLevel)
+    // @ts-ignore
     .use(propertiesToAttributes)
+    .use(transformStyleAttributes)
     .runSync(tree)
 
   const htmlBody = processedTree.children[0]

packages/gui/src/lib/transformers/plugins/transform-style-attributes.ts

@@ -0,0 +1,16 @@
+import { isObject, isString } from 'lodash-es'
+import { visit } from 'unist-util-visit'
+
+export const transformStyleAttributes = () => (tree: any) => {
+  visit(tree, 'element', (node) => {
+    if (!node.style || isObject(node.style)) {
+      return
+    }
+
+    // TODO: Perform a style import
+    // https://github.com/components-ai/css.gui/issues/506
+    if (isString(node.style)) {
+      delete node.style
+    }
+  })
+}