From debd3b89f9f5ff56e03fb60437696a2151444225 Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Thu, 29 Sep 2022 17:49:01 -0600
Subject: [PATCH] Properly handle pseudos when stringifying CSS object

---
 .changeset/clever-kangaroos-warn.md                         | 5 +++++
 packages/gui/src/lib/codegen/stringify-css-object.ts        | 6 +++---
 packages/gui/src/lib/pseudos.ts                             | 4 ++++
 .../src/lib/transformers/inline-styles-to-style-element.ts  | 1 -
 4 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/clever-kangaroos-warn.md

diff --git a/.changeset/clever-kangaroos-warn.md b/.changeset/clever-kangaroos-warn.md
new file mode 100644
index 00000000..f384c51a
--- /dev/null
+++ 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
index c17dad12..95d3076f 100644
--- 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
index 48d396c6..aa494b0a 100644
--- 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
index 915672bf..b04c2b75 100644
--- 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)