[eslint-plugin] order pseudo-classes and stylex.when selectors according to the priorities

.flowconfig

@@ -19,6 +19,7 @@ module.use_strict=true
 munge_underscores=true
 module.name_mapper='^@stylexjs/babel-plugin$' -> '<PROJECT_ROOT>/packages/@stylexjs/babel-plugin/src/index.js'
 module.name_mapper='^@stylexjs/stylex$' -> '<PROJECT_ROOT>/packages/@stylexjs/stylex/src/stylex.js'
+module.name_mapper='^@stylexjs/shared$' -> '<PROJECT_ROOT>/packages/@stylexjs/shared/src/index.js'
 module.name_mapper='^style-value-parser$' -> '<PROJECT_ROOT>/packages/style-value-parser/src/index.js'
 ; type-stubs
 module.system.node.resolve_dirname=flow_modules

packages/@stylexjs/babel-plugin/package.json

@@ -21,6 +21,7 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
+    "@stylexjs/shared": "0.16.3",
     "@stylexjs/stylex": "0.16.3",
     "postcss-value-parser": "^4.1.0"
   },

packages/@stylexjs/babel-plugin/src/shared/index.js

@@ -41,7 +41,7 @@ import {
   PSEUDO_CLASS_PRIORITIES as _PSEUDO_CLASS_PRIORITIES,
   AT_RULE_PRIORITIES as _AT_RULE_PRIORITIES,
   PSEUDO_ELEMENT_PRIORITY as _PSEUDO_ELEMENT_PRIORITY,
-} from './utils/property-priorities';
+} from '@stylexjs/shared';
 
 export * as types from './types';
 export * as when from './when/when';

packages/@stylexjs/babel-plugin/src/shared/utils/generate-css-rule.js

@@ -14,7 +14,7 @@ import { defaultOptions } from './default-options';
 
 import generateLtr from '../physical-rtl/generate-ltr';
 import generateRtl from '../physical-rtl/generate-rtl';
-import getPriority from './property-priorities';
+import { getPriority } from '@stylexjs/shared';
 
 const THUMB_VARIANTS = [
   '::-webkit-slider-thumb',

packages/@stylexjs/eslint-plugin/__tests__/stylex-sort-keys-test.js

@@ -88,8 +88,8 @@ eslintTester.run('stylex-sort-keys', rule.default, {
           alignItems: 'center',
           display: 'flex',
           ...obj,
-          alignSelf: 'center',
           borderColor: 'black',
+          alignSelf: 'center',
         }
       });
     `,
@@ -126,6 +126,30 @@ eslintTester.run('stylex-sort-keys', rule.default, {
       });
     `,
     },
+    {
+      code: `
+      import { create as cr } from '@stylexjs/stylex';
+      const styles = cr({
+        button: {
+          marginBlock: 6,
+          marginInline: 8,
+        }
+      });
+    `,
+    },
+    {
+      code: `
+      import { create as cr } from '@stylexjs/stylex';
+      const styles = cr({
+        button: {
+          margin: 16,
+          marginInline: 8,
+          marginBlockEnd: 6,
+          marginLeft: 4,
+        }
+      });
+    `,
+    },
     {
       options: [{ allowLineSeparatedGroups: true }],
       code: `
@@ -135,8 +159,8 @@ eslintTester.run('stylex-sort-keys', rule.default, {
           alignItems: 'center',
           display: 'flex',
 
-          alignSelf: 'center',
           borderColor: 'black',
+          alignSelf: 'center',
         }
       });
     `,
@@ -333,11 +357,11 @@ eslintTester.run('stylex-sort-keys', rule.default, {
       import * as stylex from '@stylexjs/stylex';
       const styles = stylex.create({
         nav: {
+          paddingBlock: 0,
           maxWidth: {
             default: "1080px",
             "@media (min-width: 2000px)": "calc((1080 / 24) * 1rem)"
           },
-          paddingBlock: 0,
         },
       });`,
     },
@@ -348,8 +372,8 @@ eslintTester.run('stylex-sort-keys', rule.default, {
         import * as stylex from '@stylexjs/stylex';
         const styles = stylex.create({
           main: {
-            padding: 10,
             animationDuration: '100ms',
+            padding: 10,
             fontSize: 12,
           }
         });
@@ -358,16 +382,16 @@ eslintTester.run('stylex-sort-keys', rule.default, {
         import * as stylex from '@stylexjs/stylex';
         const styles = stylex.create({
           main: {
-            animationDuration: '100ms',
             padding: 10,
+            animationDuration: '100ms',
             fontSize: 12,
           }
         });
       `,
       errors: [
         {
           message:
-            'StyleX property key "animationDuration" should be above "padding"',
+            'StyleX property key "padding" should be above "animationDuration"',
         },
       ],
     },
@@ -409,8 +433,8 @@ eslintTester.run('stylex-sort-keys', rule.default, {
             alignItems: 'center',
             display: 'flex',
             ...obj,
-            borderColor: 'red', // ok
             alignSelf: 'center',
+            borderColor: 'red', // ok
           }
         });
       `,
@@ -422,15 +446,15 @@ eslintTester.run('stylex-sort-keys', rule.default, {
             alignItems: 'center',
             display: 'flex',
             ...obj,
-            alignSelf: 'center',
             borderColor: 'red', // ok
+            alignSelf: 'center',
           }
         });
       `,
       errors: [
         {
           message:
-            'StyleX property key "alignSelf" should be above "borderColor"',
+            'StyleX property key "borderColor" should be above "alignSelf"',
         },
       ],
     },
@@ -1070,8 +1094,8 @@ eslintTester.run('stylex-sort-keys', rule.default, {
           // foo
 
           // bar
-          borderColor: 'black',
           alignSelf: 'center',
+          borderColor: 'black',
         }
       });
       `,
@@ -1083,16 +1107,16 @@ eslintTester.run('stylex-sort-keys', rule.default, {
           display: 'flex',
           // foo
 
-          alignSelf: 'center',
-          // bar
           borderColor: 'black',
+          // bar
+          alignSelf: 'center',
         }
       });
       `,
       errors: [
         {
           message:
-            'StyleX property key "alignSelf" should be above "borderColor"',
+            'StyleX property key "borderColor" should be above "alignSelf"',
         },
       ],
     },
@@ -1142,8 +1166,8 @@ eslintTester.run('stylex-sort-keys', rule.default, {
         import { css } from 'a';
         const styles = css.create({
           main: {
-            padding: 10,
             animationDuration: '100ms',
+            padding: 10,
             fontSize: 12,
           }
         });
@@ -1152,16 +1176,16 @@ eslintTester.run('stylex-sort-keys', rule.default, {
         import { css } from 'a';
         const styles = css.create({
           main: {
-            animationDuration: '100ms',
             padding: 10,
+            animationDuration: '100ms',
             fontSize: 12,
           }
         });
       `,
       errors: [
         {
           message:
-            'StyleX property key "animationDuration" should be above "padding"',
+            'StyleX property key "padding" should be above "animationDuration"',
         },
       ],
     },
@@ -1199,14 +1223,76 @@ eslintTester.run('stylex-sort-keys', rule.default, {
         },
       ],
     },
+    {
+      code: `
+      import { create, when } from '@stylexjs/stylex';
+      const styles = create({
+        base: {
+          display: 'flex',
+          width: {
+            ':hover': 10,
+            default: 20,
+          },
+        },
+      });
+      `,
+      output: `
+      import { create, when } from '@stylexjs/stylex';
+      const styles = create({
+        base: {
+          display: 'flex',
+          width: {
+            default: 20,
+            ':hover': 10,
+          },
+        },
+      });
+      `,
+      errors: [
+        {
+          message: 'StyleX property key "default" should be above ":hover"',
+        },
+      ],
+    },
+    {
+      code: `
+      import { create, when } from '@stylexjs/stylex';
+      const styles = create({
+        base: {
+          display: 'flex',
+          width: {
+            ':focus': 10,
+            ':hover': 20,
+          },
+        },
+      });
+      `,
+      output: `
+      import { create, when } from '@stylexjs/stylex';
+      const styles = create({
+        base: {
+          display: 'flex',
+          width: {
+            ':hover': 20,
+            ':focus': 10,
+          },
+        },
+      });
+      `,
+      errors: [
+        {
+          message: 'StyleX property key ":hover" should be above ":focus"',
+        },
+      ],
+    },
     {
       code: `
       import { create, when } from '@stylexjs/stylex';
       const styles = create({
         base: {
           width: {
-            [when.siblingAfter(":active")]: 30,
-            [when.descendant(":focus")]: 20,
+            [when.siblingAfter(':active')]: 30,
+            [when.descendant(':focus')]: 20,
           },
           display: 'flex',
         },
@@ -1218,17 +1304,85 @@ eslintTester.run('stylex-sort-keys', rule.default, {
         base: {
           display: 'flex',
           width: {
-            [when.siblingAfter(":active")]: 30,
-            [when.descendant(":focus")]: 20,
+            [when.siblingAfter(':active')]: 30,
+            [when.descendant(':focus')]: 20,
           },
         },
       });
       `,
       errors: [
+        {
+          message:
+            'StyleX property key ":when:descendant:focus" should be above ":when:siblingAfter:active"',
+        },
         {
           message: 'StyleX property key "display" should be above "width"',
         },
       ],
     },
+    {
+      code: `
+      import { create, when } from '@stylexjs/stylex';
+      const styles = create({
+        base: {
+          display: 'flex',
+          width: {
+            [stylex.when.siblingAfter(':active')]: 30,
+            [when.descendant(':focus')]: 20,
+          },
+        },
+      });
+      `,
+      output: `
+      import { create, when } from '@stylexjs/stylex';
+      const styles = create({
+        base: {
+          display: 'flex',
+          width: {
+            [when.descendant(':focus')]: 20,
+            [stylex.when.siblingAfter(':active')]: 30,
+          },
+        },
+      });
+      `,
+      errors: [
+        {
+          message:
+            'StyleX property key ":when:descendant:focus" should be above ":when:siblingAfter:active"',
+        },
+      ],
+    },
+    {
+      code: `
+      import { create, when } from '@stylexjs/stylex';
+      const styles = create({
+        base: {
+          display: 'flex',
+          width: {
+            [when[api](\`:focus\`)]: 20,
+            [when[api](\`:active\`)]: 30,
+          },
+        },
+      });
+      `,
+      output: `
+      import { create, when } from '@stylexjs/stylex';
+      const styles = create({
+        base: {
+          display: 'flex',
+          width: {
+            [when[api](\`:active\`)]: 30,
+            [when[api](\`:focus\`)]: 20,
+          },
+        },
+      });
+      `,
+      errors: [
+        {
+          message:
+            'StyleX property key ":when:api:active" should be above ":when:api:focus"',
+        },
+      ],
+    },
   ],
 });

packages/@stylexjs/eslint-plugin/package.json

@@ -16,6 +16,7 @@
     "test": "jest --detectOpenHandles --coverage"
   },
   "dependencies": {
+    "@stylexjs/shared": "0.16.3",
     "css-shorthand-expand": "^1.2.0",
     "micromatch": "^4.0.5",
     "postcss-value-parser": "^4.2.0"

packages/@stylexjs/eslint-plugin/src/stylex-sort-keys.js

@@ -55,6 +55,7 @@ function isValidOrder(
   const curr = getPropertyPriorityAndType(currName, order);
 
   if (prev.type !== 'string' || curr.type !== 'string') {
+    if (prev.priority === curr.priority) return prevName <= currName;
     return prev.priority <= curr.priority;
   }