Change pseudo-selector sorting to take priority over shorthand sorting

atlassian-labs · Oct 23, 2024 · 8b6edba · 8b6edba
1 parent 60d50a5
commit 8b6edba
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/packages/css/src/plugins/__tests__/sort-shorthand-declarations.test.ts b/packages/css/src/plugins/__tests__/sort-shorthand-declarations.test.ts
@@ -210,6 +210,7 @@ describe('sort shorthand vs. longhand declarations', () => {
 
   it('sorts a variety of different shorthand properties used together', () => {
     const actual = transform(outdent`
+
       @media all {
         .f {
           display: block;
@@ -314,9 +315,6 @@ describe('sort shorthand vs. longhand declarations', () => {
       .c {
         border-block-start: none;
       }
-      .d:active {
-        border-block-start: none;
-      }
 
       .j {
         margin-bottom: 6px;
@@ -333,7 +331,11 @@ describe('sort shorthand vs. longhand declarations', () => {
       }
       .e:hover {
         border-block-start-color: transparent;
-      }@media all {
+      }
+      .d:active {
+        border-block-start: none;
+      }
+      @media all {
         .a {
           all: unset;
         }
@@ -471,13 +473,13 @@ describe('sort shorthand vs. longhand declarations', () => {
     expect(actual).toMatchInlineSnapshot(`
       "
       ._abcd1234 { border: none }
-      ._abcd1234:hover { border: none }
-      ._abcd1234:active { border: none }
       ._abcd1234 { border-top: 1px solid }
-      ._abcd1234:hover { border-top: 1px solid }
-      ._abcd1234:active { border-top: 1px solid }
       ._abcd1234 { border-top-color: red }
+      ._abcd1234:hover { border: none }
+      ._abcd1234:hover { border-top: 1px solid }
       ._abcd1234:hover { border-top-color: red }
+      ._abcd1234:active { border: none }
+      ._abcd1234:active { border-top: 1px solid }
       ._abcd1234:active { border-top-color: red }
       @media (max-width: 150px) { ._abcd1234 { border: none } }
       @media (max-width: 120px) {

diff --git a/packages/css/src/plugins/sort-atomic-style-sheet.ts b/packages/css/src/plugins/sort-atomic-style-sheet.ts
@@ -87,6 +87,14 @@ export const sortAtomicStyleSheet = (config: {
         }
       });
 
+      if (sortShorthandEnabled) {
+        sortShorthandDeclarations(catchAll);
+        sortShorthandDeclarations(rules);
+        sortShorthandDeclarations(atRules.map((atRule) => atRule.node));
+      }
+
+      // Pseudo-selector and at-rule sorting takes priority over shorthand
+      // property sorting.
       sortPseudoSelectors(rules);
       if (sortAtRulesEnabled) {
         atRules.sort(sortAtRules);
@@ -101,10 +109,6 @@ export const sortAtomicStyleSheet = (config: {
       }
 
       root.nodes = [...catchAll, ...rules, ...atRules.map((atRule) => atRule.node)];
-
-      if (sortShorthandEnabled) {
-        sortShorthandDeclarations(root.nodes);
-      }
     },
   };
 };