fix(sort-objects): fix nested objects not impacted by styled components

Author: hugop95

rules/sort-objects.ts

@@ -155,28 +155,14 @@ export default createEslintRule<Options, MESSAGE_ID>({
         return
       }
 
-      let isStyledCallExpression = (identifier: TSESTree.Expression): boolean =>
-        identifier.type === 'Identifier' && identifier.name === 'styled'
-      let isCssCallExpression = (identifier: TSESTree.Expression): boolean =>
-        identifier.type === 'Identifier' && identifier.name === 'css'
-      let isStyledComponents = (
-        styledNode: TSESTree.Node | undefined,
-      ): boolean =>
-        !!styledNode &&
-        ((styledNode.type === 'CallExpression' &&
-          (isCssCallExpression(styledNode.callee) ||
-            (styledNode.callee.type === 'MemberExpression' &&
-              isStyledCallExpression(styledNode.callee.object)) ||
-            (styledNode.callee.type === 'CallExpression' &&
-              isStyledCallExpression(styledNode.callee.callee)))) ||
-          (styledNode.type === 'JSXExpressionContainer' &&
-            styledNode.parent.type === 'JSXAttribute' &&
-            styledNode.parent.name.name === 'style'))
+      let objectRoot =
+        nodeObject.type === 'ObjectPattern' ? null : getRootObject(nodeObject)
       if (
+        objectRoot &&
         !options.styledComponents &&
-        (isStyledComponents(nodeObject.parent) ||
-          (nodeObject.parent.type === 'ArrowFunctionExpression' &&
-            isStyledComponents(nodeObject.parent.parent)))
+        (isStyledComponents(objectRoot.parent) ||
+          (objectRoot.parent.type === 'ArrowFunctionExpression' &&
+            isStyledComponents(objectRoot.parent.parent)))
       ) {
         return
       }
@@ -575,6 +561,19 @@ let getObjectParent = ({
   return null
 }
 
+let getRootObject = (
+  node: TSESTree.ObjectExpression,
+): TSESTree.ObjectExpression => {
+  let objectRoot = node
+  while (
+    objectRoot.parent.type === 'Property' &&
+    objectRoot.parent.parent.type === 'ObjectExpression'
+  ) {
+    objectRoot = objectRoot.parent.parent
+  }
+  return objectRoot
+}
+
 let getVariableParentName = ({
   onlyFirstParent,
   node,
@@ -624,3 +623,31 @@ let getCallExpressionParentName = ({
 
   return callParent.callee.type === 'Identifier' ? callParent.callee.name : null
 }
+
+let isStyledCallExpression = (identifier: TSESTree.Expression): boolean =>
+  identifier.type === 'Identifier' && identifier.name === 'styled'
+
+let isCssCallExpression = (identifier: TSESTree.Expression): boolean =>
+  identifier.type === 'Identifier' && identifier.name === 'css'
+
+let isStyledComponents = (styledNode: TSESTree.Node): boolean => {
+  if (
+    styledNode.type === 'JSXExpressionContainer' &&
+    styledNode.parent.type === 'JSXAttribute' &&
+    styledNode.parent.name.name === 'style'
+  ) {
+    return true
+  }
+
+  if (styledNode.type !== 'CallExpression') {
+    return false
+  }
+
+  return (
+    isCssCallExpression(styledNode.callee) ||
+    (styledNode.callee.type === 'MemberExpression' &&
+      isStyledCallExpression(styledNode.callee.object)) ||
+    (styledNode.callee.type === 'CallExpression' &&
+      isStyledCallExpression(styledNode.callee.callee))
+  )
+}

test/rules/sort-objects.test.ts

@@ -5507,6 +5507,27 @@ describe(ruleName, () => {
               },
             ],
           },
+          {
+            code: dedent`
+              const PropsBox = styled.div((props) => ({
+                nested1: {
+                  nested2: {
+                    [theme.breakpoints.down('mid2')]: {
+                      right: '24px',
+                    },
+                    [theme.breakpoints.down('mid1')]: {
+                      bottom: '-273px',
+                    }
+                  }
+                }
+              }))
+            `,
+            options: [
+              {
+                styledComponents: false,
+              },
+            ],
+          },
         ],
         invalid: [],
       },