Properly handle pseudos when stringifying CSS object

components-ai · Sep 29, 2022 · debd3b8 · debd3b8 · vercel · Sep 29, 2022
1 parent c05e7b0
commit debd3b8
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/.changeset/clever-kangaroos-warn.md b/.changeset/clever-kangaroos-warn.md
@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Properly handle pseudos when stringifying CSS object
diff --git a/packages/gui/src/lib/codegen/stringify-css-object.ts b/packages/gui/src/lib/codegen/stringify-css-object.ts
@@ -1,7 +1,7 @@
 import { isEmpty, kebabCase } from 'lodash-es'
 import { isCSSClass } from '../classes'
 import { isElement } from '../elements'
-import { isPseudo } from '../pseudos'
+import { addPseudoSyntax, hasPseudoSyntax, isPseudo } from '../pseudos'
 
 export const objectToDecls = (obj: any): string => {
   return Object.entries(obj)
@@ -28,8 +28,8 @@ const flattenCSSObject = (
         ...flattenedGroups,
       }
       return
-    } else if (isPseudo(key)) {
-      const fullSelector = selector + key
+    } else if (isPseudo(key) || hasPseudoSyntax(key)) {
+      const fullSelector = selector + addPseudoSyntax(key)
       const flattenedGroups = flattenCSSObject(value, fullSelector)
       cssDeclGroups = {
         ...cssDeclGroups,

diff --git a/packages/gui/src/lib/pseudos.ts b/packages/gui/src/lib/pseudos.ts
@@ -42,6 +42,10 @@ export const stringifySelectorFunction = (
 }
 
 export const addPseudoSyntax = (str: string): string => {
+  if (hasPseudoSyntax(str)) {
+    return str
+  }
+
   if (isPseudoClass(str) || isSelectorFunction(str)) {
     return ':' + str
   } else if (isPseudoElement(str)) {

diff --git a/packages/gui/src/lib/transformers/inline-styles-to-style-element.ts b/packages/gui/src/lib/transformers/inline-styles-to-style-element.ts
@@ -31,7 +31,6 @@ export const inlineStylesToStyleElement = (
 
         delete node.properties.style
 
-        console.log(options)
         styleMap[selector] = stringifyCSSObject(
           toCSSObject(style, options?.theme),
           addCSSClassSyntax(selector)