feat: add ability to disable sorting objects in jsx styles

azat-io · Sep 30, 2024 · 45f7661 · 45f7661
1 parent 9434334
commit 45f7661
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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: [],
+      },
+    )
   })
 })