From f63b99d4e02381a868ea3c61d2ff5a72a9744679 Mon Sep 17 00:00:00 2001
From: Kylor Hall <136543114+kylorhall-atlassian@users.noreply.github.com>
Date: Wed, 6 Nov 2024 13:19:44 +1300
Subject: [PATCH] Default `sortShorthand` to true (in extraction) to reduce
 configuration required. (#1740)

* Default `sortShorthand` to true to reduce configuration required.

This matches the config we have internally at Atlassian and our recommended guidance and also matches the runtime sorting/bucketing (which has no configurable opt-out).

* Fixup parcel snapshots (expected sorting changes
---
 .changeset/plenty-feet-rest.md                |  12 ++
 .../babel-plugin-strip-runtime/src/types.ts   |   2 +-
 .../__tests__/at-rules-and-selectors.test.ts  |   3 +-
 .../src/keyframes/__tests__/behaviour.test.ts |   6 +-
 .../src/styled/__tests__/behaviour.test.ts    | 117 ++++++++----------
 .../tagged-template-expression.test.ts        |   8 +-
 packages/css/src/__tests__/transform.test.ts  |   4 +-
 .../src/plugins/sort-atomic-style-sheet.ts    |   2 +-
 packages/parcel-optimizer/src/types.ts        |   2 +-
 .../src/__tests__/transformer.parceltest.ts   |  14 +--
 .../src/__tests__/transformer.parceltest.ts   |  16 +--
 .../src/__tests__/extract-plugin.test.ts      |  33 ++---
 packages/webpack-loader/src/types.ts          |   2 +-
 .../pages/pkg-babel-plugin-strip-runtime.mdx  |   2 +-
 .../docs/src/pages/pkg-parcel-config.mdx      |   2 +-
 .../docs/src/pages/pkg-webpack-loader.mdx     |   4 +-
 website/packages/docs/src/pages/shorthand.mdx |   6 +-
 17 files changed, 114 insertions(+), 121 deletions(-)
 create mode 100644 .changeset/plenty-feet-rest.md

diff --git a/.changeset/plenty-feet-rest.md b/.changeset/plenty-feet-rest.md
new file mode 100644
index 000000000..2e8b1b7c1
--- /dev/null
+++ b/.changeset/plenty-feet-rest.md
@@ -0,0 +1,12 @@
+---
+'@compiled/babel-plugin-strip-runtime': minor
+'@compiled/parcel-optimizer': minor
+'@compiled/webpack-loader': minor
+'@compiled/css': minor
+---
+
+Possibly BREAKING: Default `sortShorthand` to be enabled during stylesheet extraction to match the config we have internally at Atlassian and our recommendation.
+
+You can opt-out from this change by setting `sortShorthand: false` in several places, refer to https://compiledcssinjs.com/docs/shorthand and package-specific documentation.
+
+This is only a breaking change if you expect `margin:0` to override `margin-top:8px` for example, which in other CSS-in-JS libraries may actually work, but in Compiled it's not guaranteed to work, so we forcibly sort it to guarantee the order in which these styles are applied.
diff --git a/packages/babel-plugin-strip-runtime/src/types.ts b/packages/babel-plugin-strip-runtime/src/types.ts
index 722dcd52c..027adeb10 100644
--- a/packages/babel-plugin-strip-runtime/src/types.ts
+++ b/packages/babel-plugin-strip-runtime/src/types.ts
@@ -35,7 +35,7 @@ export interface PluginOptions {
   /**
    * Whether to sort shorthand and longhand properties,
    * eg. `margin` before `margin-top` for enforced determinism.
-   * Defaults to `false`.
+   * Defaults to `true`.
    */
   sortShorthand?: boolean;
 }
diff --git a/packages/babel-plugin/src/css-map/__tests__/at-rules-and-selectors.test.ts b/packages/babel-plugin/src/css-map/__tests__/at-rules-and-selectors.test.ts
index 7f9a3cd6b..f9d816e97 100644
--- a/packages/babel-plugin/src/css-map/__tests__/at-rules-and-selectors.test.ts
+++ b/packages/babel-plugin/src/css-map/__tests__/at-rules-and-selectors.test.ts
@@ -239,8 +239,7 @@ describe('css map advanced functionality (at rules, selectors object)', () => {
       '._14jq32ev color{color:pink}',
       '._1wsc13q2 fontSize{background-color:blue}',
       '._1wyb12am{font-size:50px}',
-
-      'const styles={success:"_syazjafr _1wyb12am _14jq32ev _1wsc13q2"}',
+      'const styles={success:"_syazjafr _1wyb12am _1wsc13q2 _14jq32ev"}',
     ]);
   });
 
diff --git a/packages/babel-plugin/src/keyframes/__tests__/behaviour.test.ts b/packages/babel-plugin/src/keyframes/__tests__/behaviour.test.ts
index 45cbccde5..cdab5d3c5 100644
--- a/packages/babel-plugin/src/keyframes/__tests__/behaviour.test.ts
+++ b/packages/babel-plugin/src/keyframes/__tests__/behaviour.test.ts
@@ -21,7 +21,7 @@ describe('Keyframes', () => {
       '._1wybgktf{font-size:20px}',
       '._2rko1l7b{border-radius:3px}',
       '._y44v1bcx{animation:kfwl3rt}',
-      '{ax(["_1wybgktf _2rko1l7b _y44v1bcx", __cmplp.className])}',
+      '{ax(["_2rko1l7b _y44v1bcx _1wybgktf", __cmplp.className])}',
     ]);
   });
 
@@ -45,7 +45,7 @@ describe('Keyframes', () => {
       '._y44v178k{animation:kvif0b9}',
       '._1wybgktf{font-size:20px}',
       '._2rko1l7b{border-radius:3px}',
-      '{ax(["_y44v178k _1wybgktf _2rko1l7b", __cmplp.className])}',
+      '{ax(["_y44v178k _2rko1l7b _1wybgktf", __cmplp.className])}',
     ]);
   });
 
@@ -69,7 +69,7 @@ describe('Keyframes', () => {
     expect(actual).toIncludeMultiple([
       '._syaz5scu{color:red}',
       '._y44v1bcx{animation:kfwl3rt}',
-      '{ax(["_syaz5scu _y44v1bcx", __cmplp.className])}',
+      '{ax(["_y44v1bcx _syaz5scu", __cmplp.className])}',
     ]);
   });
 
diff --git a/packages/babel-plugin/src/styled/__tests__/behaviour.test.ts b/packages/babel-plugin/src/styled/__tests__/behaviour.test.ts
index f05c654ce..3eca0d8a4 100644
--- a/packages/babel-plugin/src/styled/__tests__/behaviour.test.ts
+++ b/packages/babel-plugin/src/styled/__tests__/behaviour.test.ts
@@ -122,9 +122,7 @@ describe('styled component behaviour', () => {
       ]);
     `);
 
-    expect(actual).toInclude('{font-size:12px}');
-    expect(actual).toInclude('{color:blue}');
-    expect(actual).toInclude('{font-weight:500}');
+    expect(actual).toIncludeMultiple(['{font-size:12px}', '{color:blue}', '{font-weight:500}']);
   });
 
   it('should not destructure valid html attributes from props', () => {
@@ -256,8 +254,10 @@ describe('styled component behaviour', () => {
       });
     `);
 
-    expect(actual).toInclude('{color:var(--_63bh2t)}');
-    expect(actual).toInclude('"--_63bh2t":ix((()=>{return __cmplp.color;})())');
+    expect(actual).toIncludeMultiple([
+      '{color:var(--_63bh2t)}',
+      '"--_63bh2t":ix((()=>{return __cmplp.color;})())',
+    ]);
   });
 
   it('should transform an arrow function with a body into an IIFE by preventing passing down invalid html attributes to the node', () => {
@@ -269,9 +269,11 @@ describe('styled component behaviour', () => {
       });
     `);
 
-    expect(actual).toInclude('{font-size:var(--_1eiw442)}');
-    expect(actual).toInclude('const{textSize,...__cmpldp}=__cmplp;');
-    expect(actual).toInclude('"--_1eiw442":ix((()=>{return __cmplp.textSize;})())');
+    expect(actual).toIncludeMultiple([
+      '{font-size:var(--_1eiw442)}',
+      'const{textSize,...__cmpldp}=__cmplp;',
+      '"--_1eiw442":ix((()=>{return __cmplp.textSize;})())',
+    ]);
   });
 
   it('should move suffix and prefix of a dynamic arrow function with a body into an IIFE', () => {
@@ -283,8 +285,10 @@ describe('styled component behaviour', () => {
       });
     `);
 
-    expect(actual).toInclude('{content:var(--_63bh2t)}');
-    expect(actual).toInclude('"--_63bh2t":ix((()=>{return __cmplp.color;})(),"\\"","\\"")');
+    expect(actual).toIncludeMultiple([
+      '{content:var(--_63bh2t)}',
+      '"--_63bh2t":ix((()=>{return __cmplp.color;})(),"\\"","\\"")',
+    ]);
   });
 
   it('should collect args as styles', () => {
@@ -531,7 +535,7 @@ describe('styled component behaviour', () => {
       '._ca0qftgi{padding-top:8px}',
       '._19itlf8h{border:2px solid blue}',
       '._1wyb1ul9{font-size:30px}',
-      'ax(["_1wyb1ul9 _19itlf8h _ca0qftgi _u5f3ftgi _n3tdftgi _19bvftgi",__cmplp.isPrimary?"_syaz13q2":"_syaz5scu",__cmplp.isDone?"_1hms1911":"_1hmsglyw",__cmplp.isClamped?"_1yyj11wp":"_1yyjkb7n",__cmplp.className])',
+      'ax(["_19itlf8h _ca0qftgi _u5f3ftgi _n3tdftgi _19bvftgi _1wyb1ul9",__cmplp.isPrimary?"_syaz13q2":"_syaz5scu",__cmplp.isDone?"_1hms1911":"_1hmsglyw",__cmplp.isClamped?"_1yyj11wp":"_1yyjkb7n",__cmplp.className])',
     ]);
   });
 
@@ -624,11 +628,8 @@ describe('styled component behaviour', () => {
       '._syaz5scu{color:red}',
       '._syaz13q2{color:blue}',
       '._1wyb1ul9{font-size:30px}',
+      `ax([\"_1wyb1ul9\",__cmplp.isPrimary?\"_syaz13q2\":\"_syaz5scu\",__cmplp.isPrimary?\"_19it1nsd\":\"_19it107e\",__cmplp.className]`,
     ]);
-
-    expect(actual).toInclude(
-      `ax([\"_1wyb1ul9\",__cmplp.isPrimary?\"_syaz13q2\":\"_syaz5scu\",__cmplp.isPrimary?\"_19it1nsd\":\"_19it107e\",__cmplp.className]`
-    );
   });
 
   it('should apply conditional CSS with nested ternary operators', () => {
@@ -653,7 +654,7 @@ describe('styled component behaviour', () => {
       '._syaz5scu{color:red}',
       '._syaz13q2{color:blue}',
       '._syaz11x8{color:black}',
-      `ax([\"_1wyb1ul9 _19itlf8h _ca0qftgi _u5f3ftgi _n3tdftgi _19bvftgi\",__cmplp.isPrimary?__cmplp.isDisabled?\"_syaz11x8\":\"_syaz13q2\":\"_syaz5scu\",__cmplp.className])`,
+      `ax([\"_19itlf8h _ca0qftgi _u5f3ftgi _n3tdftgi _19bvftgi _1wyb1ul9\",__cmplp.isPrimary?__cmplp.isDisabled?\"_syaz11x8\":\"_syaz13q2\":\"_syaz5scu\",__cmplp.className])`,
     ]);
   });
 
@@ -674,11 +675,8 @@ describe('styled component behaviour', () => {
       '._19it7fe6{border:3px solid yellow}',
       '._bfhk1x77{background-color:white}',
       '._syaz5scu{color:red}',
+      'className={ax(["_bfhk1x77 _19it7fe6 _syaz5scu",__cmplp.isPrimary&&"_syaz13q2",__cmplp.className])}',
     ]);
-
-    expect(actual).toInclude(
-      'className={ax(["_syaz5scu _bfhk1x77 _19it7fe6",__cmplp.isPrimary&&"_syaz13q2",__cmplp.className])}'
-    );
   });
 
   it('should apply conditional CSS with template literal and nested ternary operators', () => {
@@ -733,11 +731,8 @@ describe('styled component behaviour', () => {
       '._k48p8n31{font-weight:bold}',
       '._syaz13q2{color:blue}',
       '._syaz5scu{color:red}',
+      'className={ax(["_syaz5scu",__cmplp.isPrimary&&"_syaz13q2",__cmplp.isBolded&&"_k48p8n31",__cmplp.className])}',
     ]);
-
-    expect(actual).toInclude(
-      'className={ax(["_syaz5scu",__cmplp.isPrimary&&"_syaz13q2",__cmplp.isBolded&&"_k48p8n31",__cmplp.className])}'
-    );
   });
 
   it('should not allow a logical statement with a conditional right-hand side', () => {
@@ -838,11 +833,8 @@ describe('styled component behaviour', () => {
       '._19it7fe6{border:3px solid yellow}',
       '._bfhk1x77{background-color:white}',
       '._syaz5scu{color:red}',
+      '{ax(["_bfhk1x77 _19it7fe6 _syaz5scu",__cmplp.isPrimary&&"_syaz13q2",__cmplp.className])}',
     ]);
-
-    expect(actual).toInclude(
-      '{ax(["_syaz5scu _bfhk1x77 _19it7fe6",__cmplp.isPrimary&&"_syaz13q2",__cmplp.className])}'
-    );
   });
 
   it('should apply unconditional after a conditional css rule with template literal', () => {
@@ -862,11 +854,8 @@ describe('styled component behaviour', () => {
       '._bfhk1x77{background-color:white}',
       '._syaz5scu{color:red}',
       '._19it7fe6{border:3px solid yellow}',
+      '{ax(["_19it7fe6 _bfhk1x77 _syaz5scu",__cmplp.isPrimary&&"_syaz13q2",__cmplp.className])}',
     ]);
-
-    expect(actual).toInclude(
-      '{ax(["_19it7fe6 _syaz5scu _bfhk1x77",__cmplp.isPrimary&&"_syaz13q2",__cmplp.className])}'
-    );
   });
 
   it('should apply unconditional CSS with props', () => {
@@ -881,9 +870,8 @@ describe('styled component behaviour', () => {
     expect(actual).toIncludeMultiple([
       'const _="._syaz1q2z{color:var(--_1r7cl4y)}"',
       '"--_1r7cl4y":ix(__cmplp.primary)',
+      'className={ax(["_syaz1q2z",__cmplp.className])}',
     ]);
-
-    expect(actual).toInclude('className={ax(["_syaz1q2z",__cmplp.className])}');
   });
 
   it('should apply unconditional CSS with and without props', () => {
@@ -900,9 +888,8 @@ describe('styled component behaviour', () => {
       '._syaz1q2z{color:var(--_1r7cl4y)}',
       '._bfhk5scu{background-color:red}',
       '--_1r7cl4y":ix(__cmplp.primary)}',
+      'className={ax(["_bfhk5scu _syaz1q2z",__cmplp.className])}',
     ]);
-
-    expect(actual).toInclude('className={ax(["_bfhk5scu _syaz1q2z",__cmplp.className])}');
   });
 
   it('should apply conditional CSS with object styles', () => {
@@ -915,11 +902,11 @@ describe('styled component behaviour', () => {
       );
     `);
 
-    expect(actual).toIncludeMultiple(['._syaz13q2{color:blue}', '._syaz5scu{color:red}']);
-
-    expect(actual).toInclude(
-      'className={ax(["_syaz5scu",__cmplp.isPrimary&&"_syaz13q2",__cmplp.className])}'
-    );
+    expect(actual).toIncludeMultiple([
+      '._syaz13q2{color:blue}',
+      '._syaz5scu{color:red}',
+      'className={ax(["_syaz5scu",__cmplp.isPrimary&&"_syaz13q2",__cmplp.className])}',
+    ]);
   });
 
   it('should apply conditional CSS with object styles and multiple props lines', () => {
@@ -937,11 +924,8 @@ describe('styled component behaviour', () => {
       '._k48p8n31{font-weight:bold}',
       '._syaz13q2{color:blue}',
       '._syaz5scu{color:red}',
+      'className={ax(["_syaz5scu",__cmplp.isPrimary&&"_syaz13q2",__cmplp.isBolded&&"_k48p8n31",__cmplp.className])}',
     ]);
-
-    expect(actual).toInclude(
-      'className={ax(["_syaz5scu",__cmplp.isPrimary&&"_syaz13q2",__cmplp.isBolded&&"_k48p8n31",__cmplp.className])}'
-    );
   });
 
   it('should apply unconditional before and after a conditional css rule with object styles', () => {
@@ -955,15 +939,12 @@ describe('styled component behaviour', () => {
       );
     `);
 
-    expect.toIncludeMultiple([
+    expect(actual).toIncludeMultiple([
       '._syaz13q2{color:blue}',
       '._19it97hw{border:1px solid black}',
       '._syaz5scu{color:red}',
+      '{ax(["_19it97hw _syaz5scu",__cmplp.isPrimary&&"_syaz13q2",__cmplp.className])}',
     ]);
-
-    expect(actual).toInclude(
-      '{ax(["_syaz5scu _19it97hw",__cmplp.isPrimary&&"_syaz13q2",__cmplp.className])}'
-    );
   });
 
   it('should apply conditional CSS with object styles regardless declaration order', () => {
@@ -976,11 +957,12 @@ describe('styled component behaviour', () => {
       );
     `);
 
-    expect(actual).toIncludeMultiple(['._syaz5scu{color:red}', '._syaz13q2{color:blue}']);
+    expect(actual).toIncludeMultiple([
+      '._syaz5scu{color:red}',
+      '._syaz13q2{color:blue}',
 
-    expect(actual).toInclude(
-      'className={ax(["_syaz13q2",__cmplp.isPrimary&&"_syaz5scu",__cmplp.className])}'
-    );
+      'className={ax(["_syaz13q2",__cmplp.isPrimary&&"_syaz5scu",__cmplp.className])}',
+    ]);
   });
 
   it('should apply multi conditional logical expression', () => {
@@ -993,11 +975,11 @@ describe('styled component behaviour', () => {
       );
     `);
 
-    expect(actual).toIncludeMultiple(['._syaz13q2{color:blue}', '._syaz5scu{color:red}']);
-
-    expect(actual).toInclude(
-      '{ax(["_syaz5scu",(__cmplp.isPrimary||__cmplp.isMaybe)&&"_syaz13q2",__cmplp.className])}'
-    );
+    expect(actual).toIncludeMultiple([
+      '._syaz13q2{color:blue}',
+      '._syaz5scu{color:red}',
+      '{ax(["_syaz5scu",(__cmplp.isPrimary||__cmplp.isMaybe)&&"_syaz13q2",__cmplp.className])}',
+    ]);
   });
 
   it('should apply multi conditional logical expression with different props lines and syntax styles', () => {
@@ -1030,11 +1012,11 @@ describe('styled component behaviour', () => {
       );
     `);
 
-    expect(actual).toIncludeMultiple(['._syaz13q2{color:blue}', '._syaz5scu{color:red}']);
-
-    expect(actual).toInclude(
-      '{ax(["_syaz5scu",__cmplp.isPrimary&&(__cmplp.isBolded||__cmplp.isFoo)&&"_syaz13q2",__cmplp.className])}'
-    );
+    expect(actual).toIncludeMultiple([
+      '._syaz13q2{color:blue}',
+      '._syaz5scu{color:red}',
+      '{ax(["_syaz5scu",__cmplp.isPrimary&&(__cmplp.isBolded||__cmplp.isFoo)&&"_syaz13q2",__cmplp.className])}',
+    ]);
   });
 
   it('should apply conditional CSS with ternary and boolean in the same line', () => {
@@ -1070,9 +1052,8 @@ describe('styled component behaviour', () => {
     expect(actual).toIncludeMultiple([
       '._bfhk1x77{background-color:white}',
       '._syazruxl{color:orange}',
+      'className={ax(["_bfhk1x77 _syazruxl",__cmplp.className])}',
     ]);
-
-    expect(actual).toInclude('className={ax(["_syazruxl _bfhk1x77",__cmplp.className])}');
   });
 
   it('should only add falsy condition when truthy condition has no value', () => {
@@ -1087,7 +1068,7 @@ describe('styled component behaviour', () => {
     expect(actual).toIncludeMultiple([
       '._syazbf54{color:green}',
       '._bfhk11x8{background-color:black}',
-      'className={ax(["",!__cmplp.isPrimary&&"_syazbf54 _bfhk11x8",__cmplp.className])}',
+      'className={ax(["",!__cmplp.isPrimary&&"_bfhk11x8 _syazbf54",__cmplp.className])}',
     ]);
   });
 
@@ -1103,7 +1084,7 @@ describe('styled component behaviour', () => {
     expect(actual).toIncludeMultiple([
       '._syazbf54{color:green}',
       '._bfhk11x8{background-color:black}',
-      'className={ax(["",__cmplp.isPrimary&&"_syazbf54 _bfhk11x8",__cmplp.className])}',
+      'className={ax(["",__cmplp.isPrimary&&"_bfhk11x8 _syazbf54",__cmplp.className])}',
     ]);
   });
 
diff --git a/packages/babel-plugin/src/styled/__tests__/tagged-template-expression.test.ts b/packages/babel-plugin/src/styled/__tests__/tagged-template-expression.test.ts
index 8a849754c..60f7eedd3 100644
--- a/packages/babel-plugin/src/styled/__tests__/tagged-template-expression.test.ts
+++ b/packages/babel-plugin/src/styled/__tests__/tagged-template-expression.test.ts
@@ -869,7 +869,7 @@ describe('styled tagged template expression', () => {
 
       const color = 'red';
       const color2 = 'blue';
-      
+
       const ListItem = styled.div\`
         background: linear-gradient(
             \${\`var(--my-variable, \${color})\`},
@@ -889,7 +889,7 @@ describe('styled tagged template expression', () => {
 
       const color = 'red';
       const interpolation = \`1px solid \${\`var(--my-variable, \${color})\`}\`;
-      
+
       const ListItem = styled.div\`
         border: \${interpolation};
       \`;
@@ -1062,7 +1062,7 @@ describe('styled tagged template expression', () => {
       '._1wybgktf{font-size:20px}',
       '._2rko1l7b{border-radius:3px}',
       '._syaz1qjj{color:var(--_pvyxdf)}',
-      '{ax(["_1wybgktf _2rko1l7b _syaz1qjj", __cmplp.className])}',
+      '{ax(["_2rko1l7b _1wybgktf _syaz1qjj", __cmplp.className])}',
     ]);
   });
 
@@ -1084,7 +1084,7 @@ describe('styled tagged template expression', () => {
       '._syaz1qjj{color:var(--_pvyxdf)}',
       '._1wybgktf{font-size:20px}',
       '._2rko1l7b{border-radius:3px}',
-      '{ax(["_syaz1qjj _1wybgktf _2rko1l7b", __cmplp.className])}',
+      '{ax(["_2rko1l7b _syaz1qjj _1wybgktf", __cmplp.className])}',
     ]);
   });
 });
diff --git a/packages/css/src/__tests__/transform.test.ts b/packages/css/src/__tests__/transform.test.ts
index 69e18b136..3e3bd3fa4 100644
--- a/packages/css/src/__tests__/transform.test.ts
+++ b/packages/css/src/__tests__/transform.test.ts
@@ -409,10 +409,10 @@ describe('#css-transform', () => {
       );
 
       expect(actual.join('\n')).toMatchInlineSnapshot(`
-        "._18u0idpf{margin-left:0}
+        "._1h6d1r31{border-color:currentColor}
+        ._18u0idpf{margin-left:0}
         ._1sb21e8g{content:"hello"}
         ._syaz15td{color:#639}
-        ._1h6d1r31{border-color:currentColor}
         ._bfhk1r31{background-color:currentColor}
         ._5wra1r31{border-left-color:currentColor}"
       `);
diff --git a/packages/css/src/plugins/sort-atomic-style-sheet.ts b/packages/css/src/plugins/sort-atomic-style-sheet.ts
index 57d93335a..d1dcaa4fd 100644
--- a/packages/css/src/plugins/sort-atomic-style-sheet.ts
+++ b/packages/css/src/plugins/sort-atomic-style-sheet.ts
@@ -45,7 +45,7 @@ export const sortAtomicStyleSheet = (config: {
   sortShorthandEnabled: boolean | undefined;
 }): Plugin => {
   const sortAtRulesEnabled = config.sortAtRulesEnabled ?? true;
-  const sortShorthandEnabled = config.sortShorthandEnabled ?? false;
+  const sortShorthandEnabled = config.sortShorthandEnabled ?? true;
 
   return {
     postcssPlugin: 'sort-atomic-style-sheet',
diff --git a/packages/parcel-optimizer/src/types.ts b/packages/parcel-optimizer/src/types.ts
index e1d63af1b..8777b8cd1 100644
--- a/packages/parcel-optimizer/src/types.ts
+++ b/packages/parcel-optimizer/src/types.ts
@@ -14,7 +14,7 @@ export interface ParcelOptimizerOpts {
   /**
    * Whether to sort shorthand and longhand properties,
    * eg. `margin` before `margin-top` for enforced determinism.
-   * Defaults to `false`.
+   * Defaults to `true`.
    */
   sortShorthand?: boolean;
 }
diff --git a/packages/parcel-transformer-external/src/__tests__/transformer.parceltest.ts b/packages/parcel-transformer-external/src/__tests__/transformer.parceltest.ts
index 11d69fa4c..a25bd312f 100644
--- a/packages/parcel-transformer-external/src/__tests__/transformer.parceltest.ts
+++ b/packages/parcel-transformer-external/src/__tests__/transformer.parceltest.ts
@@ -54,18 +54,15 @@ it('transforms assets with compiled and extraction babel plugins', async () => {
       singleQuote: true,
     })
   ).toMatchInlineSnapshot(`
-    "._1wyb12am {
+    "._19itlf8h {
+      border: 2px solid blue;
+    }
+    ._1wyb12am {
       font-size: 50px;
     }
     ._syaz13q2 {
       color: blue;
     }
-    ._19bv1vi7 {
-      padding-left: 32px;
-    }
-    ._19itlf8h {
-      border: 2px solid blue;
-    }
     ._19pk1ul9 {
       margin-top: 30px;
     }
@@ -84,6 +81,9 @@ it('transforms assets with compiled and extraction babel plugins', async () => {
     ._u5f31vi7 {
       padding-right: 32px;
     }
+    ._19bv1vi7 {
+      padding-left: 32px;
+    }
     "
   `);
 }, 50000);
diff --git a/packages/parcel-transformer/src/__tests__/transformer.parceltest.ts b/packages/parcel-transformer/src/__tests__/transformer.parceltest.ts
index a9fb82695..d333ffb5d 100644
--- a/packages/parcel-transformer/src/__tests__/transformer.parceltest.ts
+++ b/packages/parcel-transformer/src/__tests__/transformer.parceltest.ts
@@ -225,18 +225,15 @@ it('transforms assets with compiled and extraction babel plugins', async () => {
       singleQuote: true,
     })
   ).toMatchInlineSnapshot(`
-    "._1wyb12am {
+    "._19itlf8h {
+      border: 2px solid blue;
+    }
+    ._1wyb12am {
       font-size: 50px;
     }
     ._syaz13q2 {
       color: blue;
     }
-    ._19bv1vi7 {
-      padding-left: 32px;
-    }
-    ._19itlf8h {
-      border: 2px solid blue;
-    }
     ._19pk1ul9 {
       margin-top: 30px;
     }
@@ -255,6 +252,9 @@ it('transforms assets with compiled and extraction babel plugins', async () => {
     ._u5f31vi7 {
       padding-right: 32px;
     }
+    ._19bv1vi7 {
+      padding-left: 32px;
+    }
     "
   `);
 
@@ -273,7 +273,7 @@ it('transforms assets with compiled and extraction babel plugins', async () => {
             style: __cmpls,
             ref: __cmplr,
             className: (0, _runtime.ax)([
-                "_syaz13q2 _1wyb1ul9 _19itlf8h _ca0q1vi7 _u5f31vi7 _n3td1vi7 _19bv1vi7",
+                "_19itlf8h _ca0q1vi7 _u5f31vi7 _n3td1vi7 _19bv1vi7 _syaz13q2 _1wyb1ul9",
                 __cmplp.className
             ])
         }));
diff --git a/packages/webpack-loader/src/__tests__/extract-plugin.test.ts b/packages/webpack-loader/src/__tests__/extract-plugin.test.ts
index 60a3fddac..c4f75414d 100644
--- a/packages/webpack-loader/src/__tests__/extract-plugin.test.ts
+++ b/packages/webpack-loader/src/__tests__/extract-plugin.test.ts
@@ -119,8 +119,8 @@ describe('CompiledExtractPlugin', () => {
 
     // Extract the styles into said bundle
     expect(assets[cssFiles[0]]).toMatchInlineSnapshot(`
-      "._19it1e35{border:2px solid coral}
-      ._syaz1vyr{color:coral}
+      "
+      ._19it1e35{border:2px solid coral}._syaz1vyr{color:coral}
       "
     `);
   }, 10000);
@@ -129,12 +129,12 @@ describe('CompiledExtractPlugin', () => {
     const actual = await bundle(join(fixturesPath, 'babel.tsx'));
 
     expect(actual).toMatchInlineSnapshot(`
-      "._19pk1ul9{margin-top:30px}
+      "
+      ._19itlf8h{border:2px solid blue}._19pk1ul9{margin-top:30px}
       ._19bvftgi{padding-left:8px}
       ._n3tdftgi{padding-bottom:8px}
       ._u5f3ftgi{padding-right:8px}
       ._ca0qftgi{padding-top:8px}
-      ._19itlf8h{border:2px solid blue}
       ._1wyb1ul9{font-size:30px}
       ._syaz13q2{color:blue}
       "
@@ -155,30 +155,30 @@ describe('CompiledExtractPlugin', () => {
     const actual = await bundle(join(fixturesPath, 'binding-not-found.tsx'));
 
     expect(actual).toMatchInlineSnapshot(`
-      "._syaz1r31{color:currentColor}
+      "
+      ._n7zl17qw{border-bottom:1px solid transparent}
+      ._n7zl1l01{border-bottom:1px solid rgba(135,119,217,0.2)}._syaz1r31{color:currentColor}
       ._ajmmnqa1{text-decoration-style:solid}
       ._1hmsglyw{text-decoration-line:none}
       ._4bfu1r31{text-decoration-color:currentColor}
-      ._n7zl17qw{border-bottom:1px solid transparent}
-      ._n7zl1l01{border-bottom:1px solid rgba(135,119,217,0.2)}
       ._syaz1cj8{color:var(--_xexnhp)}
       ._p12f1us4{max-width:140rem}
-      ._18u01wug{margin-left:auto}
-      ._otyridpf{margin-bottom:0}
-      ._2hwx1wug{margin-right:auto}
-      ._19pkidpf{margin-top:0}
       ._1xi2idpf{right:0}
       ._1ltvidpf{left:0}
       ._154iidpf{top:0}
       ._kqswstnw{position:absolute}
       ._1pbykb7n{z-index:1}
+      ._4cvr1h6o{align-items:center}
+      ._1e0c1txw{display:flex}
+      ._4t3i1jdh{height:9rem}
+      ._18u01wug{margin-left:auto}
+      ._otyridpf{margin-bottom:0}
+      ._2hwx1wug{margin-right:auto}
+      ._19pkidpf{margin-top:0}
       ._19bv1wto{padding-left:3rem}
       ._n3tdidpf{padding-bottom:0}
       ._u5f31wto{padding-right:3rem}
       ._ca0qidpf{padding-top:0}
-      ._4cvr1h6o{align-items:center}
-      ._1e0c1txw{display:flex}
-      ._4t3i1jdh{height:9rem}
       "
     `);
   }, 10000);
@@ -187,9 +187,10 @@ describe('CompiledExtractPlugin', () => {
     const actual = await bundle(join(fixturesPath, 'extracted-component.tsx'));
 
     expect(actual).toMatchInlineSnapshot(`
-      "._1wyb1fwx{font-size:12px}
-      ._19bv1vi7{padding-left:32px}
+      "
       ._19itlf8h{border:2px solid blue}
+      ._1wyb1fwx{font-size:12px}
+      ._19bv1vi7{padding-left:32px}
       ._19pk1ul9{margin-top:30px}
       ._1wyb1ul9{font-size:30px}
       ._bfhk1gy6{background-color:yellow}
diff --git a/packages/webpack-loader/src/types.ts b/packages/webpack-loader/src/types.ts
index 00b3352de..4d07f3500 100644
--- a/packages/webpack-loader/src/types.ts
+++ b/packages/webpack-loader/src/types.ts
@@ -148,7 +148,7 @@ export interface CompiledExtractPluginOptions {
   /**
    * Whether to sort shorthand and longhand properties,
    * eg. `margin` before `margin-top` for enforced determinism.
-   * Defaults to `false`.
+   * Defaults to `true`.
    */
   sortShorthand?: boolean;
 }
diff --git a/website/packages/docs/src/pages/pkg-babel-plugin-strip-runtime.mdx b/website/packages/docs/src/pages/pkg-babel-plugin-strip-runtime.mdx
index 8f088eea0..ccd625173 100644
--- a/website/packages/docs/src/pages/pkg-babel-plugin-strip-runtime.mdx
+++ b/website/packages/docs/src/pages/pkg-babel-plugin-strip-runtime.mdx
@@ -115,4 +115,4 @@ For example, `border` will always come before `borderColor`, which will always c
 See [Shorthand properties](/shorthand) for more information.
 
 - Type: `boolean`
-- Default: `false`
+- Default: `true`
diff --git a/website/packages/docs/src/pages/pkg-parcel-config.mdx b/website/packages/docs/src/pages/pkg-parcel-config.mdx
index 87656b17c..207b9f2c3 100644
--- a/website/packages/docs/src/pages/pkg-parcel-config.mdx
+++ b/website/packages/docs/src/pages/pkg-parcel-config.mdx
@@ -157,7 +157,7 @@ For example, `border` will always come before `borderColor`, which will always c
 See [Shorthand properties](/shorthand) for more information.
 
 - Type: `boolean`
-- Default: `false`
+- Default: `true`
 
 ### \[Obsolete\] ssr
 
diff --git a/website/packages/docs/src/pages/pkg-webpack-loader.mdx b/website/packages/docs/src/pages/pkg-webpack-loader.mdx
index 8e5c016ff..8c9e4db94 100644
--- a/website/packages/docs/src/pages/pkg-webpack-loader.mdx
+++ b/website/packages/docs/src/pages/pkg-webpack-loader.mdx
@@ -308,9 +308,9 @@ See [Shorthand properties](/shorthand) for more information.
 
 ```js
 new CompiledExtractPlugin({
-  sortShorthand: true,
+  sortShorthand: false,
 });
 ```
 
 - Type: `boolean`
-- Default: `false`
+- Default: `true`
diff --git a/website/packages/docs/src/pages/shorthand.mdx b/website/packages/docs/src/pages/shorthand.mdx
index d0761a62b..d53fc4433 100644
--- a/website/packages/docs/src/pages/shorthand.mdx
+++ b/website/packages/docs/src/pages/shorthand.mdx
@@ -23,11 +23,11 @@ Note that there is a bug where [stylesheet extraction cannot be used for Parcel]
 
 ## Stylesheet extraction turned on
 
-If stylesheet extraction is turned on, then shorthand property sorting is controlled by the `sortShorthand` option. This is set to `false` by default, meaning that if stylesheet extraction is turned on, shorthand properties will not be sorted in any way by default.
+If stylesheet extraction is turned on, then shorthand property sorting is controlled by the `sortShorthand` option. This is set to `true` by default, meaning that if stylesheet extraction is turned on, shorthand properties will not be sorted in any way by default.
 
-If you are using Webpack, set `sortShorthand: true` as an option like `new CompiledExtractPlugin({ sortShorthand: true })`. If you are using Parcel, set `sortShorthand: true` in your Compiled configuration file (e.g. `.compiledcssrc`), but note that stylesheet extraction won't work unless you are in production mode [due to a bug](https://github.com/atlassian-labs/compiled/issues/1306).
+If you are using Webpack, you can set this as an option like `new CompiledExtractPlugin({ sortShorthand: true })`. If you are using Parcel, set `sortShorthand: true` in your Compiled configuration file (e.g. `.compiledcssrc`), but note that stylesheet extraction won't work unless you are in production mode [due to a bug](https://github.com/atlassian-labs/compiled/issues/1306).
 
-With `sortShorthand` set to `true`, shorthand properties will be sorted deterministically, with more specific shorthand properties taking precedence over less specific shorthand properties. Shorthand property sorting takes precedence over the sorting of pseudo-selectors. For example, given the following example:
+With `sortShorthand` not set to `false`, shorthand properties will be sorted deterministically, with more specific shorthand properties taking precedence over less specific shorthand properties. Shorthand property sorting takes precedence over the sorting of pseudo-selectors. For example, given the following example:
 
 ```tsx
 /** @jsxAutomaticRuntime @compiled/react */