fix(convertCssToJss): fix multiple class references out-of-order

fix #12

Author: jedwards1211

src/convertCssToJss.ts

@@ -117,15 +117,15 @@ export function splitGlobals(selector: string): [string | null, string | null] {
 export function convertSelectors(root: ObjectExpression): void {
   const replacements: Map<string, string> = new Map()
 
-  const processClasses = root => {
+  const processClassesSelector = selectorParser(root => {
     root.walkClasses(classNode => {
       if (!classNode.value) return
       const replacement = replacements.get(classNode.value)
       if (replacement) {
         classNode.replaceWith(selectorParser.tag({ value: replacement }))
       }
     })
-  }
+  })
 
   const processRootSelector = selectorParser(root => {
     if (root.length !== 1) return
@@ -139,8 +139,6 @@ export function convertSelectors(root: ObjectExpression): void {
       const replacement = camelCase(className)
       replacements.set(className, `$${replacement}`)
       first.first.replaceWith(selectorParser.tag({ value: replacement }))
-    } else {
-      processClasses(root)
     }
   })
 
@@ -151,18 +149,12 @@ export function convertSelectors(root: ObjectExpression): void {
         node.insertBefore(node.at(0), selectorParser.nesting({}))
       }
     })
-    processClasses(root)
-  })
-
-  const processSelectorInMediaOrGlobal = selectorParser(root => {
-    processClasses(root)
   })
 
   const processNode = (
     parentKey: string | null,
     node: ObjectExpression
   ): void => {
-    debugger
     const globals: ObjectProperty[] = []
     if (!parentKey || !/^@(keyframes|global)/.test(parentKey)) {
       node.properties = node.properties.filter(
@@ -179,24 +171,20 @@ export function convertSelectors(root: ObjectExpression): void {
               if (newKey !== key) prop.key = objectPropertyKey(newKey)
             }
           } else {
-            if (localSelector) {
-              const replaced =
-                parentKey.startsWith('@media') || parentKey === '@global'
-                  ? processSelectorInMediaOrGlobal.processSync(localSelector)
-                  : processSelector.processSync(localSelector)
+            if (
+              localSelector &&
+              !parentKey.startsWith('@media') &&
+              parentKey !== '@global'
+            ) {
+              const replaced = processSelector.processSync(localSelector)
               if (replaced !== key) {
                 prop.key = objectPropertyKey(replaced)
               }
             }
           }
           if (globalSelector) {
             globals.push(
-              j.objectProperty(
-                objectPropertyKey(
-                  processSelectorInMediaOrGlobal.processSync(globalSelector)
-                ),
-                value
-              )
+              j.objectProperty(objectPropertyKey(globalSelector), value)
             )
           }
           return localSelector != null
@@ -219,8 +207,23 @@ export function convertSelectors(root: ObjectExpression): void {
       processNode(key, value)
     }
   }
+  const processClasses = (node: ObjectExpression): void => {
+    for (const prop of node.properties) {
+      if (prop.type !== 'ObjectProperty') continue
+      const { value } = prop
+      const key = getRawKey(prop.key)
+      if (!key || value.type !== 'ObjectExpression') continue
+      const [localSelector] = splitGlobals(key)
+      if (localSelector) {
+        const newKey = processClassesSelector.processSync(localSelector)
+        if (newKey !== key) prop.key = objectPropertyKey(newKey)
+      }
 
+      processClasses(value)
+    }
+  }
   processNode(null, root)
+  processClasses(root)
 }
 
 export function convertAnimationNames(

test/css-to-jss/multipleClassReferencesOutOfOrder.ts

@@ -0,0 +1,39 @@
+export const input = `
+const styles = {
+/* selectionStart */
+.button:hover {
+  border: 1px solid blue;
+  box-shadow: 0 0 0 10px blue, 0 0 0 15px green;
+}
+.button {
+  border: none;
+  margin: 5px 10px;
+  font-size: 12px;
+  background: white contain no-repeat;
+  transition: background color font-size;
+  line-height: 1;
+  transition-duration: 300ms;
+}
+/* selectionEnd */
+}
+`
+
+export const options = {}
+
+export const expected = `
+const styles = {
+  '$button:hover': {
+    border: '1px solid blue',
+    boxShadow: '0 0 0 10px blue, 0 0 0 15px green'
+  },
+  button: {
+    border: 'none',
+    margin: '5px 10px',
+    fontSize: 12,
+    background: 'white contain no-repeat',
+    transition: 'background color font-size',
+    lineHeight: '1',
+    transitionDuration: 300
+  },
+}
+`