From 45f7661941fbdce3569261d94dbe0ceff102c9b5 Mon Sep 17 00:00:00 2001
From: "Azat S." <to@azat.io>
Date: Tue, 1 Oct 2024 01:58:11 +0300
Subject: [PATCH] feat: add ability to disable sorting objects in jsx styles

---
 docs/content/rules/sort-objects.mdx |  2 +-
 rules/sort-objects.ts               | 15 ++++++-----
 test/sort-objects.test.ts           | 39 +++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/docs/content/rules/sort-objects.mdx b/docs/content/rules/sort-objects.mdx
index 6f18f88c..4f0f47ee 100644
--- a/docs/content/rules/sort-objects.mdx
+++ b/docs/content/rules/sort-objects.mdx
@@ -220,7 +220,7 @@ In this example, the `partitionByNewLine` option will cause the rule to treat ea
 
 <sub>default: `true`</sub>
 
-Determines whether this rule should be applied to styled-components like libraries.
+Determines whether this rule should be applied to styled-components like libraries or `style` JSX attribute.
 
 - `true` — Apply the rule to styled-components.
 - `false` — Disable the rule for styled-components.
diff --git a/rules/sort-objects.ts b/rules/sort-objects.ts
index eebdc252..ffe67618 100644
--- a/rules/sort-objects.ts
+++ b/rules/sort-objects.ts
@@ -263,12 +263,15 @@ export default createEslintRule<Options, MESSAGE_ID>({
           styledNode: TSESTree.Node | undefined,
         ): boolean =>
           styledNode !== undefined &&
-          styledNode.type === 'CallExpression' &&
-          (isCssCallExpression(styledNode.callee) ||
-            (styledNode.callee.type === 'MemberExpression' &&
-              isStyledCallExpression(styledNode.callee.object)) ||
-            (styledNode.callee.type === 'CallExpression' &&
-              isStyledCallExpression(styledNode.callee.callee)))
+          ((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'))
         if (
           !options.styledComponents &&
           (isStyledComponents(node.parent) ||
diff --git a/test/sort-objects.test.ts b/test/sort-objects.test.ts
index 0888a69d..685c1723 100644
--- a/test/sort-objects.test.ts
+++ b/test/sort-objects.test.ts
@@ -3287,6 +3287,16 @@ describe(ruleName, () => {
   })
 
   describe(`${ruleName}: misc`, () => {
+    let ruleTesterJSX = new RuleTester({
+      languageOptions: {
+        parserOptions: {
+          ecmaFeatures: {
+            jsx: true,
+          },
+        },
+      },
+    })
+
     ruleTester.run(
       `${ruleName}: sets alphabetical asc sorting as default`,
       rule,
@@ -3787,5 +3797,34 @@ describe(ruleName, () => {
         ],
       })
     })
+
+    ruleTesterJSX.run(
+      'allows to disable sorting object is style prop in jsx',
+      rule,
+      {
+        valid: [
+          {
+            code: dedent`
+            let Element = () => (
+              <div
+                style={{
+                  display: 'block',
+                  margin: 0,
+                  padding: 20,
+                  background: 'orange',
+                }}
+              />
+            )
+          `,
+            options: [
+              {
+                styledComponents: false,
+              },
+            ],
+          },
+        ],
+        invalid: [],
+      },
+    )
   })
 })