[New] jsx-sort-props: add locale option

Fixes #3002

Author: ljharb

CHANGELOG.md

@@ -13,6 +13,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-did-mount-set-state`], [`no-did-update-set-state`]: no-op with react >= 16.3 ([#1754][] @ljharb)
 * [`jsx-sort-props`]: support multiline prop groups ([#3198][] @duhamelgm)
 * [`jsx-key`]: add `warnDuplicates` option to warn on duplicate jsx keys in an array ([#2614][] @ljharb)
+* [`jsx-sort-props`]: add `locale` option ([#3002][] @ljharb)
 
 ### Fixed
 * [`prop-types`], `propTypes`: add support for exported type inference ([#3163][] @vedadeepta)
@@ -58,6 +59,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3163]: https://github.com/yannickcr/eslint-plugin-react/pull/3163
 [#3160]: https://github.com/yannickcr/eslint-plugin-react/pull/3160
 [#3133]: https://github.com/yannickcr/eslint-plugin-react/pull/3133
+[#3002]: https://github.com/yannickcr/eslint-plugin-react/issues/3002
 [#2945]: https://github.com/yannickcr/eslint-plugin-react/issues/2945
 [#2921]: https://github.com/yannickcr/eslint-plugin-react/pull/2921
 [#2861]: https://github.com/yannickcr/eslint-plugin-react/issues/2861

docs/rules/jsx-sort-props.md

@@ -33,6 +33,7 @@ Examples of **correct** code for this rule:
   "ignoreCase": <boolean>,
   "noSortAlphabetically": <boolean>,
   "reservedFirst": <boolean>|<array<string>>,
+  "locale": "auto" | "any valid locale"
 }]
 ...
 ```
@@ -135,6 +136,12 @@ With `reservedFirst: ["key"]`, the following will **not** warn:
 <Hello key={'uuid'} name="John" ref="ref" />
 ```
 
+### `locale`
+
+Defaults to `"auto"`, meaning, the locale of the current environment.
+
+Any other string provided here may be passed to `String.prototype.localeCompare` - note that an unknown or invalid locale may throw an exception and crash.
+
 ## When Not To Use It
 
 This rule is a formatting preference and not following it won't negatively affect the quality of your code. If alphabetizing props isn't a part of your coding standards, then you can leave this rule off.

lib/rules/jsx-sort-props.js

@@ -98,15 +98,20 @@ function contextCompare(a, b, options) {
     return 0;
   }
 
+  const actualLocale = options.locale === 'auto' ? undefined : options.locale;
+
   if (options.ignoreCase) {
     aProp = aProp.toLowerCase();
     bProp = bProp.toLowerCase();
-    return aProp.localeCompare(bProp);
+    return aProp.localeCompare(bProp, actualLocale);
   }
   if (aProp === bProp) {
     return 0;
   }
-  return aProp < bProp ? -1 : 1;
+  if (options.locale === 'auto') {
+    return aProp < bProp ? -1 : 1;
+  }
+  return aProp.localeCompare(bProp, actualLocale);
 }
 
 /**
@@ -149,6 +154,7 @@ const generateFixerFunction = (node, context, reservedList) => {
   const multiline = configuration.multiline || 'ignore';
   const noSortAlphabetically = configuration.noSortAlphabetically || false;
   const reservedFirst = configuration.reservedFirst || false;
+  const locale = configuration.locale || 'auto';
 
   // Sort props according to the context. Only supports ignoreCase.
   // Since we cannot safely move JSXSpreadAttribute (due to potential variable overrides),
@@ -162,6 +168,7 @@ const generateFixerFunction = (node, context, reservedList) => {
     noSortAlphabetically,
     reservedFirst,
     reservedList,
+    locale,
   };
   const sortableAttributeGroups = getGroupsOfSortableAttributes(attributes);
   const sortedAttributeGroups = sortableAttributeGroups
@@ -305,6 +312,10 @@ module.exports = {
         reservedFirst: {
           type: ['array', 'boolean'],
         },
+        locale: {
+          type: 'string',
+          default: 'auto',
+        },
       },
       additionalProperties: false,
     }],
@@ -321,6 +332,7 @@ module.exports = {
     const reservedFirst = configuration.reservedFirst || false;
     const reservedFirstError = validateReservedFirstConfig(context, reservedFirst);
     let reservedList = Array.isArray(reservedFirst) ? reservedFirst : RESERVED_PROPS_LIST;
+    const locale = configuration.locale || 'auto';
 
     return {
       JSXOpeningElement(node) {
@@ -431,8 +443,8 @@ module.exports = {
           if (
             !noSortAlphabetically
             && (
-              ignoreCase
-                ? previousPropName.localeCompare(currentPropName) > 0
+              (ignoreCase || locale !== 'auto')
+                ? previousPropName.localeCompare(currentPropName, locale === 'auto' ? undefined : locale) > 0
                 : previousPropName > currentPropName
             )
           ) {

tests/lib/rules/jsx-sort-props.js

@@ -10,6 +10,7 @@
 // -----------------------------------------------------------------------------
 
 const RuleTester = require('eslint').RuleTester;
+const semver = require('semver');
 const rule = require('../../../lib/rules/jsx-sort-props');
 
 const parsers = require('../../helpers/parsers');
@@ -120,7 +121,7 @@ const multilineAndShorthandAndCallbackLastArgs = [
 ];
 
 ruleTester.run('jsx-sort-props', rule, {
-  valid: parsers.all([
+  valid: parsers.all([].concat(
     { code: '<App />;' },
     { code: '<App {...this.props} />;' },
     { code: '<App a b c />;' },
@@ -276,7 +277,26 @@ ruleTester.run('jsx-sort-props', rule, {
       code: '<App key="key" c="c" b />',
       options: reservedFirstWithShorthandLast,
     },
-  ]),
+    {
+      code: `
+        <RawFileField
+          onChange={handleChange}
+          onFileRemove={asMedia ? null : handleRemove}
+          {...props}
+        />
+      `,
+    },
+    semver.satisfies(process.version, '>= 13') ? {
+      code: `
+        <RawFileField
+          onFileRemove={asMedia ? null : handleRemove}
+          onChange={handleChange}
+          {...props}
+        />
+      `,
+      options: [{ locale: 'sk-SK' }],
+    } : []
+  )),
   invalid: parsers.all([
     {
       code: '<App b a />;',