fix: missing class property insert position

Author: jedwards1211

src/convertCssToJss.ts

@@ -5,6 +5,10 @@ import {
   StringLiteral,
   NumericLiteral,
   ArrayExpression,
+  Property,
+  ObjectMethod,
+  SpreadProperty,
+  SpreadElement,
 } from 'jscodeshift'
 import j from 'jscodeshift'
 import * as postcss from 'postcss'
@@ -228,20 +232,31 @@ export function convertSelectors(root: ObjectExpression): void {
     }
   }
   const addMissingClassProperties = (node: ObjectExpression): void => {
-    if (node === root) insertMissingClassPropertyBefore = 0
-
-    for (const prop of node.properties) {
-      if (prop.type !== 'ObjectProperty') continue
+    function process(
+      prop:
+        | ObjectProperty
+        | Property
+        | ObjectMethod
+        | SpreadProperty
+        | SpreadElement
+    ): void {
+      if (prop.type !== 'ObjectProperty') return
       const { value } = prop
       const key = getRawKey(prop.key)
-      if (!key || value.type !== 'ObjectExpression') continue
+      if (!key || value.type !== 'ObjectExpression') return
       const [localSelector] = splitGlobals(key)
       if (localSelector) {
         addMissingClassPropertiesSelector.processSync(localSelector)
       }
-
       addMissingClassProperties(value)
-      insertMissingClassPropertyBefore++
+    }
+    if (node === root) {
+      for (let i = 0; i < node.properties.length; i++) {
+        insertMissingClassPropertyBefore = i
+        process(node.properties[i])
+      }
+    } else {
+      for (const prop of node.properties) process(prop)
     }
   }
   const convertClassReferences = (node: ObjectExpression): void => {

test/css-to-jss/bigExample.ts

@@ -61,6 +61,7 @@ const styles = {
       color: 'red',
     },
   },
+  baz: {},
   foo: {
     color: 'green',
     '& $barQux, & $glorm:after': {
@@ -101,6 +102,5 @@ const styles = {
       },
     },
   },
-  baz: {},
 }
 `

test/css-to-jss/classSelectors.ts

@@ -29,6 +29,7 @@ const styles = {
 
 export const expected = `
 const styles = {
+  baz: {},
   foo: {
     color: 'green',
     '& $barQux, & $glorm:after': {
@@ -38,7 +39,6 @@ const styles = {
       color: 'blue',
     }
   },
-  baz: {},
   glorm: {
     color: 'green',
   },