From ccf2a554914ddaf3c6a9841551d35cc5a4c7678a Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 4 Apr 2023 16:12:14 -0400
Subject: [PATCH 1/6] Re-sort inset utilities to clockwise

---
 src/corePlugins.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 2c3b99283a5a..95b9ed1a0aaa 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -631,14 +631,12 @@ export let corePlugins = {
         ['inset-x', ['left', 'right']],
         ['inset-y', ['top', 'bottom']],
       ],
-      [
-        ['start', ['inset-inline-start']],
-        ['end', ['inset-inline-end']],
-        ['top', ['top']],
-        ['right', ['right']],
-        ['bottom', ['bottom']],
-        ['left', ['left']],
-      ],
+      [['top', ['top']]],
+      [['right', ['right']]],
+      [['end', ['inset-inline-end']]],
+      [['bottom', ['bottom']]],
+      [['left', ['left']]],
+      [['start', ['inset-inline-start']]],
     ],
     { supportsNegativeValues: true }
   ),

From 23730795c3ef61b93204a982ea823a9bbbbc11be Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 4 Apr 2023 16:12:22 -0400
Subject: [PATCH 2/6] Update tests

---
 tests/any-type.test.js                | 24 ++++++------
 tests/arbitrary-values.oxide.test.css | 55 +++++++++++++--------------
 tests/arbitrary-values.test.css       | 30 +++++++--------
 tests/basic-usage.oxide.test.css      | 13 +++----
 tests/basic-usage.test.css            | 12 +++---
 tests/raw-content.oxide.test.css      | 12 +++---
 tests/raw-content.test.css            | 12 +++---
 7 files changed, 78 insertions(+), 80 deletions(-)

diff --git a/tests/any-type.test.js b/tests/any-type.test.js
index 11b92c8977bc..c555d7b7f3fe 100644
--- a/tests/any-type.test.js
+++ b/tests/any-type.test.js
@@ -197,18 +197,18 @@ crosscheck(({ stable, oxide }) => {
           top: var(--any-value);
           bottom: var(--any-value);
         }
+        .top-\[var\(--any-value\)\] {
+          top: var(--any-value);
+        }
+        .right-\[var\(--any-value\)\] {
+          right: var(--any-value);
+        }
         .bottom-\[var\(--any-value\)\] {
           bottom: var(--any-value);
         }
         .left-\[var\(--any-value\)\] {
           left: var(--any-value);
         }
-        .right-\[var\(--any-value\)\] {
-          right: var(--any-value);
-        }
-        .top-\[var\(--any-value\)\] {
-          top: var(--any-value);
-        }
         .z-\[var\(--any-value\)\] {
           z-index: var(--any-value);
         }
@@ -751,18 +751,18 @@ crosscheck(({ stable, oxide }) => {
           top: var(--any-value);
           bottom: var(--any-value);
         }
+        .top-\[var\(--any-value\)\] {
+          top: var(--any-value);
+        }
+        .right-\[var\(--any-value\)\] {
+          right: var(--any-value);
+        }
         .bottom-\[var\(--any-value\)\] {
           bottom: var(--any-value);
         }
         .left-\[var\(--any-value\)\] {
           left: var(--any-value);
         }
-        .right-\[var\(--any-value\)\] {
-          right: var(--any-value);
-        }
-        .top-\[var\(--any-value\)\] {
-          top: var(--any-value);
-        }
         .z-\[var\(--any-value\)\] {
           z-index: var(--any-value);
         }
diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css
index fbf433b61a49..b7364d0af398 100644
--- a/tests/arbitrary-values.oxide.test.css
+++ b/tests/arbitrary-values.oxide.test.css
@@ -20,6 +20,18 @@
   top: var(--value);
   bottom: var(--value);
 }
+.top-\[11px\] {
+  top: 11px;
+}
+.top-\[var\(--value\)\] {
+  top: var(--value);
+}
+.right-\[11px\] {
+  right: 11px;
+}
+.right-\[var\(--value\)\] {
+  right: var(--value);
+}
 .bottom-\[11px\] {
   bottom: 11px;
 }
@@ -32,18 +44,6 @@
 .left-\[var\(--value\)\] {
   left: var(--value);
 }
-.right-\[11px\] {
-  right: 11px;
-}
-.right-\[var\(--value\)\] {
-  right: var(--value);
-}
-.top-\[11px\] {
-  top: 11px;
-}
-.top-\[var\(--value\)\] {
-  top: var(--value);
-}
 .z-\[123\] {
   z-index: 123;
 }
@@ -134,13 +134,13 @@
   min-height: var(--height);
 }
 .w-\[\'\)\(\)\'\] {
-  width: ")()";
+  width: ')()';
 }
 .w-\[\'\]\[\]\'\] {
-  width: "][]";
+  width: '][]';
 }
 .w-\[\'\}\{\}\'\] {
-  width: "}{}";
+  width: '}{}';
 }
 .w-\[\(\(\)\)\] {
   width: (());
@@ -176,10 +176,10 @@
   width: var(--width, calc(100% + 1rem));
 }
 .w-\[\{\{\}\}\] {
-  width: {{} }
+  width: {{}};
 }
 .w-\[\{\}\] {
-  width: {}
+  width: {};
 }
 .min-w-\[3\.23rem\] {
   min-width: 3.23rem;
@@ -345,10 +345,10 @@
   cursor: pointer;
 }
 .cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\,pointer\] {
-  cursor: url("./path_to_hand.cur") 2 2, pointer;
+  cursor: url('./path_to_hand.cur') 2 2, pointer;
 }
 .cursor-\[url\(hand\.cur\)_2_2\,pointer\] {
-  cursor: url("hand.cur") 2 2, pointer;
+  cursor: url('hand.cur') 2 2, pointer;
 }
 .cursor-\[var\(--value\)\] {
   cursor: var(--value);
@@ -406,13 +406,13 @@
   scroll-padding-top: var(--scroll-padding);
 }
 .list-\[\'\\1f44d\'\] {
-  list-style-type: "👍";
+  list-style-type: '👍';
 }
 .list-\[var\(--value\)\] {
   list-style-type: var(--value);
 }
 .list-image-\[url\(\.\/my-image\.png\)\] {
-  list-style-image: url("./my-image.png");
+  list-style-image: url('./my-image.png');
 }
 .list-image-\[var\(--value\)\] {
   list-style-image: var(--value);
@@ -653,7 +653,7 @@
   background-image: linear-gradient(to left, rgb(var(--green)), blue);
 }
 .bg-\[url\(\'\/path-to-image\.png\'\)\] {
-  background-image: url("/path-to-image.png");
+  background-image: url('/path-to-image.png');
 }
 .bg-\[url\:var\(--url\)\] {
   background-image: var(--url);
@@ -713,7 +713,7 @@
   fill: #da5b66;
 }
 .fill-\[url\(\#icon-gradient\)\] {
-  fill: url("#icon-gradient");
+  fill: url('#icon-gradient');
 }
 .fill-\[var\(--value\)\] {
   fill: var(--value);
@@ -725,7 +725,7 @@
   stroke: var(--value);
 }
 .stroke-\[url\(\#icon-gradient\)\] {
-  stroke: url("#icon-gradient");
+  stroke: url('#icon-gradient');
 }
 .stroke-\[20px\] {
   stroke-width: 20px;
@@ -787,7 +787,7 @@
   font-family: Some Font, sans-serif;
 }
 .font-\[\'Some_Font\'\,var\(--other-font\)\] {
-  font-family: "Some Font", var(--other-font);
+  font-family: 'Some Font', var(--other-font);
 }
 .font-\[Georgia\,serif\] {
   font-family: Georgia, serif;
@@ -1062,11 +1062,11 @@
   will-change: var(--will-change);
 }
 .content-\[\'\>\'\] {
-  --tw-content: ">";
+  --tw-content: '>';
   content: var(--tw-content);
 }
 .content-\[\'hello\'\] {
-  --tw-content: "hello";
+  --tw-content: 'hello';
   content: var(--tw-content);
 }
 .content-\[attr\(content-before\)\] {
@@ -1078,4 +1078,3 @@
     grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
   }
 }
-
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 927431210ab7..4d31b5b6d31d 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -20,6 +20,18 @@
   top: var(--value);
   bottom: var(--value);
 }
+.top-\[11px\] {
+  top: 11px;
+}
+.top-\[var\(--value\)\] {
+  top: var(--value);
+}
+.right-\[11px\] {
+  right: 11px;
+}
+.right-\[var\(--value\)\] {
+  right: var(--value);
+}
 .bottom-\[11px\] {
   bottom: 11px;
 }
@@ -32,18 +44,6 @@
 .left-\[var\(--value\)\] {
   left: var(--value);
 }
-.right-\[11px\] {
-  right: 11px;
-}
-.right-\[var\(--value\)\] {
-  right: var(--value);
-}
-.top-\[11px\] {
-  top: 11px;
-}
-.top-\[var\(--value\)\] {
-  top: var(--value);
-}
 .z-\[123\] {
   z-index: 123;
 }
@@ -176,10 +176,10 @@
   width: var(--width, calc(100% + 1rem));
 }
 .w-\[\{\{\}\}\] {
-  width: {{} }
+  width: {{}};
 }
 .w-\[\{\}\] {
-  width: {}
+  width: {};
 }
 .min-w-\[3\.23rem\] {
   min-width: 3.23rem;
@@ -412,7 +412,7 @@
   list-style-type: var(--value);
 }
 .list-image-\[url\(\.\/my-image\.png\)\] {
-  list-style-image: url("./my-image.png");
+  list-style-image: url('./my-image.png');
 }
 .list-image-\[var\(--value\)\] {
   list-style-image: var(--value);
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
index e3207ab31885..391f74a8fcfc 100644
--- a/tests/basic-usage.oxide.test.css
+++ b/tests/basic-usage.oxide.test.css
@@ -109,18 +109,18 @@
   top: 1rem;
   bottom: 1rem;
 }
+.top-6 {
+  top: 1.5rem;
+}
+.right-8 {
+  right: 2rem;
+}
 .bottom-12 {
   bottom: 3rem;
 }
 .left-16 {
   left: 4rem;
 }
-.right-8 {
-  right: 2rem;
-}
-.top-6 {
-  top: 1.5rem;
-}
 .isolate {
   isolation: isolate;
 }
@@ -1028,4 +1028,3 @@
   --tw-content: none;
   content: var(--tw-content);
 }
-
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index aa4897913424..92532144745e 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -109,18 +109,18 @@
   top: 1rem;
   bottom: 1rem;
 }
+.top-6 {
+  top: 1.5rem;
+}
+.right-8 {
+  right: 2rem;
+}
 .bottom-12 {
   bottom: 3rem;
 }
 .left-16 {
   left: 4rem;
 }
-.right-8 {
-  right: 2rem;
-}
-.top-6 {
-  top: 1.5rem;
-}
 .isolate {
   isolation: isolate;
 }
diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css
index b34e47930a08..2776a58e9498 100644
--- a/tests/raw-content.oxide.test.css
+++ b/tests/raw-content.oxide.test.css
@@ -60,18 +60,18 @@
   top: 1rem;
   bottom: 1rem;
 }
+.top-6 {
+  top: 1.5rem;
+}
+.right-8 {
+  right: 2rem;
+}
 .bottom-12 {
   bottom: 3rem;
 }
 .left-16 {
   left: 4rem;
 }
-.right-8 {
-  right: 2rem;
-}
-.top-6 {
-  top: 1.5rem;
-}
 .isolate {
   isolation: isolate;
 }
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
index 5bee46672539..5ca892fe3ab7 100644
--- a/tests/raw-content.test.css
+++ b/tests/raw-content.test.css
@@ -60,18 +60,18 @@
   top: 1rem;
   bottom: 1rem;
 }
+.top-6 {
+  top: 1.5rem;
+}
+.right-8 {
+  right: 2rem;
+}
 .bottom-12 {
   bottom: 3rem;
 }
 .left-16 {
   left: 4rem;
 }
-.right-8 {
-  right: 2rem;
-}
-.top-6 {
-  top: 1.5rem;
-}
 .isolate {
   isolation: isolate;
 }

From 5d276144ae15fe9d38c00fa28d3ae8c172377af0 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 4 Apr 2023 16:34:26 -0400
Subject: [PATCH 3/6] Sort utilities clockwise

---
 src/corePlugins.js | 102 +++++++++++++++++++--------------------------
 1 file changed, 44 insertions(+), 58 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index 95b9ed1a0aaa..d74b96d99011 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -682,14 +682,12 @@ export let corePlugins = {
         ['mx', ['margin-left', 'margin-right']],
         ['my', ['margin-top', 'margin-bottom']],
       ],
-      [
-        ['ms', ['margin-inline-start']],
-        ['me', ['margin-inline-end']],
-        ['mt', ['margin-top']],
-        ['mr', ['margin-right']],
-        ['mb', ['margin-bottom']],
-        ['ml', ['margin-left']],
-      ],
+      [['mt', ['margin-top']]],
+      [['mr', ['margin-right']]],
+      [['me', ['margin-inline-end']]],
+      [['mb', ['margin-bottom']]],
+      [['ml', ['margin-left']]],
+      [['ms', ['margin-inline-start']]],
     ],
     { supportsNegativeValues: true }
   ),
@@ -1062,14 +1060,12 @@ export let corePlugins = {
         ['scroll-mx', ['scroll-margin-left', 'scroll-margin-right']],
         ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
       ],
-      [
-        ['scroll-ms', ['scroll-margin-inline-start']],
-        ['scroll-me', ['scroll-margin-inline-end']],
-        ['scroll-mt', ['scroll-margin-top']],
-        ['scroll-mr', ['scroll-margin-right']],
-        ['scroll-mb', ['scroll-margin-bottom']],
-        ['scroll-ml', ['scroll-margin-left']],
-      ],
+      [['scroll-mt', ['scroll-margin-top']]],
+      [['scroll-mr', ['scroll-margin-right']]],
+      [['scroll-me', ['scroll-margin-inline-end']]],
+      [['scroll-mb', ['scroll-margin-bottom']]],
+      [['scroll-ml', ['scroll-margin-left']]],
+      [['scroll-ms', ['scroll-margin-inline-start']]],
     ],
     { supportsNegativeValues: true }
   ),
@@ -1080,14 +1076,12 @@ export let corePlugins = {
       ['scroll-px', ['scroll-padding-left', 'scroll-padding-right']],
       ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']],
     ],
-    [
-      ['scroll-ps', ['scroll-padding-inline-start']],
-      ['scroll-pe', ['scroll-padding-inline-end']],
-      ['scroll-pt', ['scroll-padding-top']],
-      ['scroll-pr', ['scroll-padding-right']],
-      ['scroll-pb', ['scroll-padding-bottom']],
-      ['scroll-pl', ['scroll-padding-left']],
-    ],
+    [['scroll-pt', ['scroll-padding-top']]],
+    [['scroll-pr', ['scroll-padding-right']]],
+    [['scroll-pe', ['scroll-padding-inline-end']]],
+    [['scroll-pb', ['scroll-padding-bottom']]],
+    [['scroll-pl', ['scroll-padding-left']]],
+    [['scroll-ps', ['scroll-padding-inline-start']]],
   ]),
 
   listStylePosition: ({ addUtilities }) => {
@@ -1513,24 +1507,20 @@ export let corePlugins = {
 
   borderRadius: createUtilityPlugin('borderRadius', [
     ['rounded', ['border-radius']],
-    [
-      ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
-      ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']],
-      ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
-      ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
-      ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
-      ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
-    ],
-    [
-      ['rounded-ss', ['border-start-start-radius']],
-      ['rounded-se', ['border-start-end-radius']],
-      ['rounded-ee', ['border-end-end-radius']],
-      ['rounded-es', ['border-end-start-radius']],
-      ['rounded-tl', ['border-top-left-radius']],
-      ['rounded-tr', ['border-top-right-radius']],
-      ['rounded-br', ['border-bottom-right-radius']],
-      ['rounded-bl', ['border-bottom-left-radius']],
-    ],
+    [['rounded-t', ['border-top-left-radius', 'border-top-right-radius']]],
+    [['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']]],
+    [['rounded-e', ['border-start-end-radius', 'border-end-end-radius']]],
+    [['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']]],
+    [['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']]],
+    [['rounded-s', ['border-start-start-radius', 'border-end-start-radius']]],
+    [['rounded-tl', ['border-top-left-radius']]],
+    [['rounded-ss', ['border-start-start-radius']]],
+    [['rounded-tr', ['border-top-right-radius']]],
+    [['rounded-se', ['border-start-end-radius']]],
+    [['rounded-br', ['border-bottom-right-radius']]],
+    [['rounded-ee', ['border-end-end-radius']]],
+    [['rounded-bl', ['border-bottom-left-radius']]],
+    [['rounded-es', ['border-end-start-radius']]],
   ]),
 
   borderWidth: createUtilityPlugin(
@@ -1541,14 +1531,12 @@ export let corePlugins = {
         ['border-x', [['@defaults border-width', {}], 'border-left-width', 'border-right-width']],
         ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']],
       ],
-      [
-        ['border-s', [['@defaults border-width', {}], 'border-inline-start-width']],
-        ['border-e', [['@defaults border-width', {}], 'border-inline-end-width']],
-        ['border-t', [['@defaults border-width', {}], 'border-top-width']],
-        ['border-r', [['@defaults border-width', {}], 'border-right-width']],
-        ['border-b', [['@defaults border-width', {}], 'border-bottom-width']],
-        ['border-l', [['@defaults border-width', {}], 'border-left-width']],
-      ],
+      [['border-t', [['@defaults border-width', {}], 'border-top-width']]],
+      [['border-r', [['@defaults border-width', {}], 'border-right-width']]],
+      [['border-e', [['@defaults border-width', {}], 'border-inline-end-width']]],
+      [['border-b', [['@defaults border-width', {}], 'border-bottom-width']]],
+      [['border-l', [['@defaults border-width', {}], 'border-left-width']]],
+      [['border-s', [['@defaults border-width', {}], 'border-inline-start-width']]],
     ],
     { type: ['line-width', 'length'] }
   ),
@@ -1939,14 +1927,12 @@ export let corePlugins = {
       ['px', ['padding-left', 'padding-right']],
       ['py', ['padding-top', 'padding-bottom']],
     ],
-    [
-      ['ps', ['padding-inline-start']],
-      ['pe', ['padding-inline-end']],
-      ['pt', ['padding-top']],
-      ['pr', ['padding-right']],
-      ['pb', ['padding-bottom']],
-      ['pl', ['padding-left']],
-    ],
+    [['pt', ['padding-top']]],
+    [['pr', ['padding-right']]],
+    [['pe', ['padding-inline-end']]],
+    [['pb', ['padding-bottom']]],
+    [['pl', ['padding-left']]],
+    [['ps', ['padding-inline-start']]],
   ]),
 
   textAlign: ({ addUtilities }) => {

From 2ea7d3eeee3c783831f86ee1d09e517cbc0f4164 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 4 Apr 2023 16:42:26 -0400
Subject: [PATCH 4/6] Update test

---
 tests/arbitrary-values.oxide.test.css | 114 +++++++++++++-------------
 tests/arbitrary-values.test.css       | 114 +++++++++++++-------------
 2 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css
index b7364d0af398..0605658753a4 100644
--- a/tests/arbitrary-values.oxide.test.css
+++ b/tests/arbitrary-values.oxide.test.css
@@ -85,20 +85,20 @@
   margin-top: 7px;
   margin-bottom: 7px;
 }
-.mb-\[7px\] {
-  margin-bottom: 7px;
+.mt-\[7px\] {
+  margin-top: 7px;
 }
-.ml-\[7px\] {
-  margin-left: 7px;
+.mt-\[clamp\(30px\,100px\)\] {
+  margin-top: clamp(30px, 100px);
 }
 .mr-\[7px\] {
   margin-right: 7px;
 }
-.mt-\[7px\] {
-  margin-top: 7px;
+.mb-\[7px\] {
+  margin-bottom: 7px;
 }
-.mt-\[clamp\(30px\,100px\)\] {
-  margin-top: clamp(30px, 100px);
+.ml-\[7px\] {
+  margin-left: 7px;
 }
 .aspect-\[16\/9\] {
   aspect-ratio: 16 / 9;
@@ -364,20 +364,20 @@
   scroll-margin-top: 7px;
   scroll-margin-bottom: 7px;
 }
-.scroll-mb-\[7px\] {
-  scroll-margin-bottom: 7px;
+.scroll-mt-\[7px\] {
+  scroll-margin-top: 7px;
 }
-.scroll-ml-\[7px\] {
-  scroll-margin-left: 7px;
+.scroll-mt-\[var\(--scroll-margin\)\] {
+  scroll-margin-top: var(--scroll-margin);
 }
 .scroll-mr-\[7px\] {
   scroll-margin-right: 7px;
 }
-.scroll-mt-\[7px\] {
-  scroll-margin-top: 7px;
+.scroll-mb-\[7px\] {
+  scroll-margin-bottom: 7px;
 }
-.scroll-mt-\[var\(--scroll-margin\)\] {
-  scroll-margin-top: var(--scroll-margin);
+.scroll-ml-\[7px\] {
+  scroll-margin-left: 7px;
 }
 .scroll-p-\[7px\] {
   scroll-padding: 7px;
@@ -390,20 +390,20 @@
   scroll-padding-top: 7px;
   scroll-padding-bottom: 7px;
 }
-.scroll-pb-\[7px\] {
-  scroll-padding-bottom: 7px;
+.scroll-pt-\[7px\] {
+  scroll-padding-top: 7px;
 }
-.scroll-pl-\[7px\] {
-  scroll-padding-left: 7px;
+.scroll-pt-\[var\(--scroll-padding\)\] {
+  scroll-padding-top: var(--scroll-padding);
 }
 .scroll-pr-\[7px\] {
   scroll-padding-right: 7px;
 }
-.scroll-pt-\[7px\] {
-  scroll-padding-top: 7px;
+.scroll-pb-\[7px\] {
+  scroll-padding-bottom: 7px;
 }
-.scroll-pt-\[var\(--scroll-padding\)\] {
-  scroll-padding-top: var(--scroll-padding);
+.scroll-pl-\[7px\] {
+  scroll-padding-left: 7px;
 }
 .list-\[\'\\1f44d\'\] {
   list-style-type: '👍';
@@ -505,27 +505,21 @@
 .rounded-\[11px\] {
   border-radius: 11px;
 }
-.rounded-b-\[var\(--radius\)\] {
-  border-bottom-right-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
-}
-.rounded-l-\[var\(--radius\)\] {
+.rounded-t-\[var\(--radius\)\] {
   border-top-left-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
 }
 .rounded-r-\[var\(--radius\)\] {
   border-top-right-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
 }
-.rounded-t-\[var\(--radius\)\] {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-}
-.rounded-bl-\[var\(--radius\)\] {
+.rounded-b-\[var\(--radius\)\] {
+  border-bottom-right-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
 }
-.rounded-br-\[var\(--radius\)\] {
-  border-bottom-right-radius: var(--radius);
+.rounded-l-\[var\(--radius\)\] {
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
 .rounded-tl-\[var\(--radius\)\] {
   border-top-left-radius: var(--radius);
@@ -533,12 +527,30 @@
 .rounded-tr-\[var\(--radius\)\] {
   border-top-right-radius: var(--radius);
 }
+.rounded-br-\[var\(--radius\)\] {
+  border-bottom-right-radius: var(--radius);
+}
+.rounded-bl-\[var\(--radius\)\] {
+  border-bottom-left-radius: var(--radius);
+}
 .border-\[2\.5px\] {
   border-width: 2.5px;
 }
 .border-\[length\:var\(--value\)\] {
   border-width: var(--value);
 }
+.border-t-\[2\.5px\] {
+  border-top-width: 2.5px;
+}
+.border-t-\[length\:var\(--value\)\] {
+  border-top-width: var(--value);
+}
+.border-r-\[2\.5px\] {
+  border-right-width: 2.5px;
+}
+.border-r-\[length\:var\(--value\)\] {
+  border-right-width: var(--value);
+}
 .border-b-\[2\.5px\] {
   border-bottom-width: 2.5px;
 }
@@ -551,18 +563,6 @@
 .border-l-\[length\:var\(--value\)\] {
   border-left-width: var(--value);
 }
-.border-r-\[2\.5px\] {
-  border-right-width: 2.5px;
-}
-.border-r-\[length\:var\(--value\)\] {
-  border-right-width: var(--value);
-}
-.border-t-\[2\.5px\] {
-  border-top-width: 2.5px;
-}
-.border-t-\[length\:var\(--value\)\] {
-  border-top-width: var(--value);
-}
 .border-\[\#f00\] {
   border-color: red;
 }
@@ -753,20 +753,20 @@
   padding-top: 7px;
   padding-bottom: 7px;
 }
-.pb-\[7px\] {
-  padding-bottom: 7px;
+.pt-\[7px\] {
+  padding-top: 7px;
 }
-.pl-\[7px\] {
-  padding-left: 7px;
+.pt-\[clamp\(30px\,100px\)\] {
+  padding-top: clamp(30px, 100px);
 }
 .pr-\[7px\] {
   padding-right: 7px;
 }
-.pt-\[7px\] {
-  padding-top: 7px;
+.pb-\[7px\] {
+  padding-bottom: 7px;
 }
-.pt-\[clamp\(30px\,100px\)\] {
-  padding-top: clamp(30px, 100px);
+.pl-\[7px\] {
+  padding-left: 7px;
 }
 .indent-\[50\%\] {
   text-indent: 50%;
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 4d31b5b6d31d..b85fbe402c2c 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -85,20 +85,20 @@
   margin-top: 7px;
   margin-bottom: 7px;
 }
-.mb-\[7px\] {
-  margin-bottom: 7px;
+.mt-\[7px\] {
+  margin-top: 7px;
 }
-.ml-\[7px\] {
-  margin-left: 7px;
+.mt-\[clamp\(30px\,100px\)\] {
+  margin-top: clamp(30px, 100px);
 }
 .mr-\[7px\] {
   margin-right: 7px;
 }
-.mt-\[7px\] {
-  margin-top: 7px;
+.mb-\[7px\] {
+  margin-bottom: 7px;
 }
-.mt-\[clamp\(30px\,100px\)\] {
-  margin-top: clamp(30px, 100px);
+.ml-\[7px\] {
+  margin-left: 7px;
 }
 .aspect-\[16\/9\] {
   aspect-ratio: 16 / 9;
@@ -364,20 +364,20 @@
   scroll-margin-top: 7px;
   scroll-margin-bottom: 7px;
 }
-.scroll-mb-\[7px\] {
-  scroll-margin-bottom: 7px;
+.scroll-mt-\[7px\] {
+  scroll-margin-top: 7px;
 }
-.scroll-ml-\[7px\] {
-  scroll-margin-left: 7px;
+.scroll-mt-\[var\(--scroll-margin\)\] {
+  scroll-margin-top: var(--scroll-margin);
 }
 .scroll-mr-\[7px\] {
   scroll-margin-right: 7px;
 }
-.scroll-mt-\[7px\] {
-  scroll-margin-top: 7px;
+.scroll-mb-\[7px\] {
+  scroll-margin-bottom: 7px;
 }
-.scroll-mt-\[var\(--scroll-margin\)\] {
-  scroll-margin-top: var(--scroll-margin);
+.scroll-ml-\[7px\] {
+  scroll-margin-left: 7px;
 }
 .scroll-p-\[7px\] {
   scroll-padding: 7px;
@@ -390,20 +390,20 @@
   scroll-padding-top: 7px;
   scroll-padding-bottom: 7px;
 }
-.scroll-pb-\[7px\] {
-  scroll-padding-bottom: 7px;
+.scroll-pt-\[7px\] {
+  scroll-padding-top: 7px;
 }
-.scroll-pl-\[7px\] {
-  scroll-padding-left: 7px;
+.scroll-pt-\[var\(--scroll-padding\)\] {
+  scroll-padding-top: var(--scroll-padding);
 }
 .scroll-pr-\[7px\] {
   scroll-padding-right: 7px;
 }
-.scroll-pt-\[7px\] {
-  scroll-padding-top: 7px;
+.scroll-pb-\[7px\] {
+  scroll-padding-bottom: 7px;
 }
-.scroll-pt-\[var\(--scroll-padding\)\] {
-  scroll-padding-top: var(--scroll-padding);
+.scroll-pl-\[7px\] {
+  scroll-padding-left: 7px;
 }
 .list-\[\'\\1f44d\'\] {
   list-style-type: '👍';
@@ -512,27 +512,21 @@
 .rounded-\[11px\] {
   border-radius: 11px;
 }
-.rounded-b-\[var\(--radius\)\] {
-  border-bottom-right-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
-}
-.rounded-l-\[var\(--radius\)\] {
+.rounded-t-\[var\(--radius\)\] {
   border-top-left-radius: var(--radius);
-  border-bottom-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
 }
 .rounded-r-\[var\(--radius\)\] {
   border-top-right-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
 }
-.rounded-t-\[var\(--radius\)\] {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-}
-.rounded-bl-\[var\(--radius\)\] {
+.rounded-b-\[var\(--radius\)\] {
+  border-bottom-right-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
 }
-.rounded-br-\[var\(--radius\)\] {
-  border-bottom-right-radius: var(--radius);
+.rounded-l-\[var\(--radius\)\] {
+  border-top-left-radius: var(--radius);
+  border-bottom-left-radius: var(--radius);
 }
 .rounded-tl-\[var\(--radius\)\] {
   border-top-left-radius: var(--radius);
@@ -540,12 +534,30 @@
 .rounded-tr-\[var\(--radius\)\] {
   border-top-right-radius: var(--radius);
 }
+.rounded-br-\[var\(--radius\)\] {
+  border-bottom-right-radius: var(--radius);
+}
+.rounded-bl-\[var\(--radius\)\] {
+  border-bottom-left-radius: var(--radius);
+}
 .border-\[2\.5px\] {
   border-width: 2.5px;
 }
 .border-\[length\:var\(--value\)\] {
   border-width: var(--value);
 }
+.border-t-\[2\.5px\] {
+  border-top-width: 2.5px;
+}
+.border-t-\[length\:var\(--value\)\] {
+  border-top-width: var(--value);
+}
+.border-r-\[2\.5px\] {
+  border-right-width: 2.5px;
+}
+.border-r-\[length\:var\(--value\)\] {
+  border-right-width: var(--value);
+}
 .border-b-\[2\.5px\] {
   border-bottom-width: 2.5px;
 }
@@ -558,18 +570,6 @@
 .border-l-\[length\:var\(--value\)\] {
   border-left-width: var(--value);
 }
-.border-r-\[2\.5px\] {
-  border-right-width: 2.5px;
-}
-.border-r-\[length\:var\(--value\)\] {
-  border-right-width: var(--value);
-}
-.border-t-\[2\.5px\] {
-  border-top-width: 2.5px;
-}
-.border-t-\[length\:var\(--value\)\] {
-  border-top-width: var(--value);
-}
 .border-\[\#f00\] {
   --tw-border-opacity: 1;
   border-color: rgb(255 0 0 / var(--tw-border-opacity));
@@ -782,20 +782,20 @@
   padding-top: 7px;
   padding-bottom: 7px;
 }
-.pb-\[7px\] {
-  padding-bottom: 7px;
+.pt-\[7px\] {
+  padding-top: 7px;
 }
-.pl-\[7px\] {
-  padding-left: 7px;
+.pt-\[clamp\(30px\,100px\)\] {
+  padding-top: clamp(30px, 100px);
 }
 .pr-\[7px\] {
   padding-right: 7px;
 }
-.pt-\[7px\] {
-  padding-top: 7px;
+.pb-\[7px\] {
+  padding-bottom: 7px;
 }
-.pt-\[clamp\(30px\,100px\)\] {
-  padding-top: clamp(30px, 100px);
+.pl-\[7px\] {
+  padding-left: 7px;
 }
 .indent-\[50\%\] {
   text-indent: 50%;

From 980503607b5701f91cad4b5b6c9b1c380e3e236c Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 10 Apr 2023 15:22:55 -0400
Subject: [PATCH 5/6] Reorganize plugins

---
 src/corePlugins.js | 276 ++++++++++++++++++++++-----------------------
 1 file changed, 133 insertions(+), 143 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index d74b96d99011..d7a83c540066 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -627,16 +627,14 @@ export let corePlugins = {
     'inset',
     [
       ['inset', ['inset']],
-      [
-        ['inset-x', ['left', 'right']],
-        ['inset-y', ['top', 'bottom']],
-      ],
+      [['inset-y', ['top', 'bottom']]],
+      [['inset-x', ['left', 'right']]],
       [['top', ['top']]],
-      [['right', ['right']]],
-      [['end', ['inset-inline-end']]],
       [['bottom', ['bottom']]],
-      [['left', ['left']]],
       [['start', ['inset-inline-start']]],
+      [['left', ['left']]],
+      [['end', ['inset-inline-end']]],
+      [['right', ['right']]],
     ],
     { supportsNegativeValues: true }
   ),
@@ -678,16 +676,14 @@ export let corePlugins = {
     'margin',
     [
       ['m', ['margin']],
-      [
-        ['mx', ['margin-left', 'margin-right']],
-        ['my', ['margin-top', 'margin-bottom']],
-      ],
+      [['my', ['margin-top', 'margin-bottom']]],
+      [['mx', ['margin-left', 'margin-right']]],
       [['mt', ['margin-top']]],
-      [['mr', ['margin-right']]],
-      [['me', ['margin-inline-end']]],
       [['mb', ['margin-bottom']]],
-      [['ml', ['margin-left']]],
       [['ms', ['margin-inline-start']]],
+      [['ml', ['margin-left']]],
+      [['me', ['margin-inline-end']]],
+      [['mr', ['margin-right']]],
     ],
     { supportsNegativeValues: true }
   ),
@@ -955,34 +951,34 @@ export let corePlugins = {
     addUtilities({
       '.touch-auto': { 'touch-action': 'auto' },
       '.touch-none': { 'touch-action': 'none' },
-      '.touch-pan-x': {
+      '.touch-pan-y': {
         '@defaults touch-action': {},
-        '--tw-pan-x': 'pan-x',
+        '--tw-pan-y': 'pan-y',
         'touch-action': cssTouchActionValue,
       },
-      '.touch-pan-left': {
+      '.touch-pan-x': {
         '@defaults touch-action': {},
-        '--tw-pan-x': 'pan-left',
+        '--tw-pan-x': 'pan-x',
         'touch-action': cssTouchActionValue,
       },
-      '.touch-pan-right': {
+      '.touch-pan-up': {
         '@defaults touch-action': {},
-        '--tw-pan-x': 'pan-right',
+        '--tw-pan-y': 'pan-up',
         'touch-action': cssTouchActionValue,
       },
-      '.touch-pan-y': {
+      '.touch-pan-down': {
         '@defaults touch-action': {},
-        '--tw-pan-y': 'pan-y',
+        '--tw-pan-y': 'pan-down',
         'touch-action': cssTouchActionValue,
       },
-      '.touch-pan-up': {
+      '.touch-pan-left': {
         '@defaults touch-action': {},
-        '--tw-pan-y': 'pan-up',
+        '--tw-pan-x': 'pan-left',
         'touch-action': cssTouchActionValue,
       },
-      '.touch-pan-down': {
+      '.touch-pan-right': {
         '@defaults touch-action': {},
-        '--tw-pan-y': 'pan-down',
+        '--tw-pan-x': 'pan-right',
         'touch-action': cssTouchActionValue,
       },
       '.touch-pinch-zoom': {
@@ -1019,14 +1015,14 @@ export let corePlugins = {
 
     addUtilities({
       '.snap-none': { 'scroll-snap-type': 'none' },
-      '.snap-x': {
-        '@defaults scroll-snap-type': {},
-        'scroll-snap-type': 'x var(--tw-scroll-snap-strictness)',
-      },
       '.snap-y': {
         '@defaults scroll-snap-type': {},
         'scroll-snap-type': 'y var(--tw-scroll-snap-strictness)',
       },
+      '.snap-x': {
+        '@defaults scroll-snap-type': {},
+        'scroll-snap-type': 'x var(--tw-scroll-snap-strictness)',
+      },
       '.snap-both': {
         '@defaults scroll-snap-type': {},
         'scroll-snap-type': 'both var(--tw-scroll-snap-strictness)',
@@ -1056,32 +1052,28 @@ export let corePlugins = {
     'scrollMargin',
     [
       ['scroll-m', ['scroll-margin']],
-      [
-        ['scroll-mx', ['scroll-margin-left', 'scroll-margin-right']],
-        ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
-      ],
-      [['scroll-mt', ['scroll-margin-top']]],
-      [['scroll-mr', ['scroll-margin-right']]],
-      [['scroll-me', ['scroll-margin-inline-end']]],
-      [['scroll-mb', ['scroll-margin-bottom']]],
-      [['scroll-ml', ['scroll-margin-left']]],
-      [['scroll-ms', ['scroll-margin-inline-start']]],
+      ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
+      ['scroll-mx', ['scroll-margin-left', 'scroll-margin-right']],
+      ['scroll-mt', ['scroll-margin-top']],
+      ['scroll-mb', ['scroll-margin-bottom']],
+      ['scroll-ms', ['scroll-margin-inline-start']],
+      ['scroll-ml', ['scroll-margin-left']],
+      ['scroll-me', ['scroll-margin-inline-end']],
+      ['scroll-mr', ['scroll-margin-right']],
     ],
     { supportsNegativeValues: true }
   ),
 
   scrollPadding: createUtilityPlugin('scrollPadding', [
     ['scroll-p', ['scroll-padding']],
-    [
-      ['scroll-px', ['scroll-padding-left', 'scroll-padding-right']],
-      ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']],
-    ],
-    [['scroll-pt', ['scroll-padding-top']]],
-    [['scroll-pr', ['scroll-padding-right']]],
-    [['scroll-pe', ['scroll-padding-inline-end']]],
-    [['scroll-pb', ['scroll-padding-bottom']]],
-    [['scroll-pl', ['scroll-padding-left']]],
-    [['scroll-ps', ['scroll-padding-inline-start']]],
+    ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']],
+    ['scroll-px', ['scroll-padding-left', 'scroll-padding-right']],
+    ['scroll-pt', ['scroll-padding-top']],
+    ['scroll-pb', ['scroll-padding-bottom']],
+    ['scroll-ps', ['scroll-padding-inline-start']],
+    ['scroll-pl', ['scroll-padding-left']],
+    ['scroll-pe', ['scroll-padding-inline-end']],
+    ['scroll-pr', ['scroll-padding-right']],
   ]),
 
   listStylePosition: ({ addUtilities }) => {
@@ -1242,15 +1234,24 @@ export let corePlugins = {
 
   gap: createUtilityPlugin('gap', [
     ['gap', ['gap']],
-    [
-      ['gap-x', ['columnGap']],
-      ['gap-y', ['rowGap']],
-    ],
+    ['gap-y', ['rowGap']],
+    ['gap-x', ['columnGap']],
   ]),
 
   space: ({ matchUtilities, addUtilities, theme }) => {
     matchUtilities(
       {
+        'space-y': (value) => {
+          value = value === '0' ? '0px' : value
+
+          return {
+            '& > :not([hidden]) ~ :not([hidden])': {
+              '--tw-space-y-reverse': '0',
+              'margin-top': `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
+              'margin-bottom': `calc(${value} * var(--tw-space-y-reverse))`,
+            },
+          }
+        },
         'space-x': (value) => {
           value = value === '0' ? '0px' : value
 
@@ -1272,17 +1273,6 @@ export let corePlugins = {
             },
           }
         },
-        'space-y': (value) => {
-          value = value === '0' ? '0px' : value
-
-          return {
-            '& > :not([hidden]) ~ :not([hidden])': {
-              '--tw-space-y-reverse': '0',
-              'margin-top': `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
-              'margin-bottom': `calc(${value} * var(--tw-space-y-reverse))`,
-            },
-          }
-        },
       },
       { values: theme('space'), supportsNegativeValues: true }
     )
@@ -1296,6 +1286,18 @@ export let corePlugins = {
   divideWidth: ({ matchUtilities, addUtilities, theme }) => {
     matchUtilities(
       {
+        'divide-y': (value) => {
+          value = value === '0' ? '0px' : value
+
+          return {
+            '& > :not([hidden]) ~ :not([hidden])': {
+              '@defaults border-width': {},
+              '--tw-divide-y-reverse': '0',
+              'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
+              'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`,
+            },
+          }
+        },
         'divide-x': (value) => {
           value = value === '0' ? '0px' : value
 
@@ -1319,18 +1321,6 @@ export let corePlugins = {
             },
           }
         },
-        'divide-y': (value) => {
-          value = value === '0' ? '0px' : value
-
-          return {
-            '& > :not([hidden]) ~ :not([hidden])': {
-              '@defaults border-width': {},
-              '--tw-divide-y-reverse': '0',
-              'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
-              'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`,
-            },
-          }
-        },
       },
       { values: theme('divideWidth'), type: ['line-width', 'length', 'any'] }
     )
@@ -1434,16 +1424,16 @@ export let corePlugins = {
       '.overflow-clip': { overflow: 'clip' },
       '.overflow-visible': { overflow: 'visible' },
       '.overflow-scroll': { overflow: 'scroll' },
-      '.overflow-x-auto': { 'overflow-x': 'auto' },
       '.overflow-y-auto': { 'overflow-y': 'auto' },
-      '.overflow-x-hidden': { 'overflow-x': 'hidden' },
+      '.overflow-x-auto': { 'overflow-x': 'auto' },
       '.overflow-y-hidden': { 'overflow-y': 'hidden' },
-      '.overflow-x-clip': { 'overflow-x': 'clip' },
+      '.overflow-x-hidden': { 'overflow-x': 'hidden' },
       '.overflow-y-clip': { 'overflow-y': 'clip' },
-      '.overflow-x-visible': { 'overflow-x': 'visible' },
+      '.overflow-x-clip': { 'overflow-x': 'clip' },
       '.overflow-y-visible': { 'overflow-y': 'visible' },
-      '.overflow-x-scroll': { 'overflow-x': 'scroll' },
+      '.overflow-x-visible': { 'overflow-x': 'visible' },
       '.overflow-y-scroll': { 'overflow-y': 'scroll' },
+      '.overflow-x-scroll': { 'overflow-x': 'scroll' },
     })
   },
 
@@ -1507,36 +1497,38 @@ export let corePlugins = {
 
   borderRadius: createUtilityPlugin('borderRadius', [
     ['rounded', ['border-radius']],
-    [['rounded-t', ['border-top-left-radius', 'border-top-right-radius']]],
-    [['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']]],
-    [['rounded-e', ['border-start-end-radius', 'border-end-end-radius']]],
-    [['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']]],
-    [['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']]],
-    [['rounded-s', ['border-start-start-radius', 'border-end-start-radius']]],
-    [['rounded-tl', ['border-top-left-radius']]],
-    [['rounded-ss', ['border-start-start-radius']]],
-    [['rounded-tr', ['border-top-right-radius']]],
-    [['rounded-se', ['border-start-end-radius']]],
-    [['rounded-br', ['border-bottom-right-radius']]],
-    [['rounded-ee', ['border-end-end-radius']]],
-    [['rounded-bl', ['border-bottom-left-radius']]],
-    [['rounded-es', ['border-end-start-radius']]],
+
+    ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
+    ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
+
+    ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
+    ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
+    ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']],
+    ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
+
+    ['rounded-ss', ['border-start-start-radius']],
+    ['rounded-tl', ['border-top-left-radius']],
+    ['rounded-se', ['border-start-end-radius']],
+    ['rounded-tr', ['border-top-right-radius']],
+
+    ['rounded-es', ['border-end-start-radius']],
+    ['rounded-bl', ['border-bottom-left-radius']],
+    ['rounded-ee', ['border-end-end-radius']],
+    ['rounded-br', ['border-bottom-right-radius']],
   ]),
 
   borderWidth: createUtilityPlugin(
     'borderWidth',
     [
       ['border', [['@defaults border-width', {}], 'border-width']],
-      [
-        ['border-x', [['@defaults border-width', {}], 'border-left-width', 'border-right-width']],
-        ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']],
-      ],
-      [['border-t', [['@defaults border-width', {}], 'border-top-width']]],
-      [['border-r', [['@defaults border-width', {}], 'border-right-width']]],
-      [['border-e', [['@defaults border-width', {}], 'border-inline-end-width']]],
-      [['border-b', [['@defaults border-width', {}], 'border-bottom-width']]],
-      [['border-l', [['@defaults border-width', {}], 'border-left-width']]],
-      [['border-s', [['@defaults border-width', {}], 'border-inline-start-width']]],
+      ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']],
+      ['border-x', [['@defaults border-width', {}], 'border-left-width', 'border-right-width']],
+      ['border-t', [['@defaults border-width', {}], 'border-top-width']],
+      ['border-b', [['@defaults border-width', {}], 'border-bottom-width']],
+      ['border-s', [['@defaults border-width', {}], 'border-inline-start-width']],
+      ['border-l', [['@defaults border-width', {}], 'border-left-width']],
+      ['border-e', [['@defaults border-width', {}], 'border-inline-end-width']],
+      ['border-r', [['@defaults border-width', {}], 'border-right-width']],
     ],
     { type: ['line-width', 'length'] }
   ),
@@ -1577,31 +1569,31 @@ export let corePlugins = {
 
     matchUtilities(
       {
-        'border-x': (value) => {
+        'border-y': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
-              'border-left-color': toColorValue(value),
-              'border-right-color': toColorValue(value),
+              'border-top-color': toColorValue(value),
+              'border-bottom-color': toColorValue(value),
             }
           }
 
           return withAlphaVariable({
             color: value,
-            property: ['border-left-color', 'border-right-color'],
+            property: ['border-top-color', 'border-bottom-color'],
             variable: '--tw-border-opacity',
           })
         },
-        'border-y': (value) => {
+        'border-x': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
-              'border-top-color': toColorValue(value),
-              'border-bottom-color': toColorValue(value),
+              'border-left-color': toColorValue(value),
+              'border-right-color': toColorValue(value),
             }
           }
 
           return withAlphaVariable({
             color: value,
-            property: ['border-top-color', 'border-bottom-color'],
+            property: ['border-left-color', 'border-right-color'],
             variable: '--tw-border-opacity',
           })
         },
@@ -1614,81 +1606,81 @@ export let corePlugins = {
 
     matchUtilities(
       {
-        'border-s': (value) => {
+        'border-t': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
-              'border-inline-start-color': toColorValue(value),
+              'border-top-color': toColorValue(value),
             }
           }
 
           return withAlphaVariable({
             color: value,
-            property: 'border-inline-start-color',
+            property: 'border-top-color',
             variable: '--tw-border-opacity',
           })
         },
-        'border-e': (value) => {
+        'border-b': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
-              'border-inline-end-color': toColorValue(value),
+              'border-bottom-color': toColorValue(value),
             }
           }
 
           return withAlphaVariable({
             color: value,
-            property: 'border-inline-end-color',
+            property: 'border-bottom-color',
             variable: '--tw-border-opacity',
           })
         },
-        'border-t': (value) => {
+        'border-s': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
-              'border-top-color': toColorValue(value),
+              'border-inline-start-color': toColorValue(value),
             }
           }
 
           return withAlphaVariable({
             color: value,
-            property: 'border-top-color',
+            property: 'border-inline-start-color',
             variable: '--tw-border-opacity',
           })
         },
-        'border-r': (value) => {
+        'border-l': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
-              'border-right-color': toColorValue(value),
+              'border-left-color': toColorValue(value),
             }
           }
 
           return withAlphaVariable({
             color: value,
-            property: 'border-right-color',
+            property: 'border-left-color',
             variable: '--tw-border-opacity',
           })
         },
-        'border-b': (value) => {
+        'border-e': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
-              'border-bottom-color': toColorValue(value),
+              'border-inline-end-color': toColorValue(value),
             }
           }
 
           return withAlphaVariable({
             color: value,
-            property: 'border-bottom-color',
+            property: 'border-inline-end-color',
             variable: '--tw-border-opacity',
           })
         },
-        'border-l': (value) => {
+        'border-r': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
-              'border-left-color': toColorValue(value),
+              'border-right-color': toColorValue(value),
             }
           }
 
           return withAlphaVariable({
             color: value,
-            property: 'border-left-color',
+            property: 'border-right-color',
             variable: '--tw-border-opacity',
           })
         },
@@ -1869,8 +1861,8 @@ export let corePlugins = {
     addUtilities({
       '.bg-repeat': { 'background-repeat': 'repeat' },
       '.bg-no-repeat': { 'background-repeat': 'no-repeat' },
-      '.bg-repeat-x': { 'background-repeat': 'repeat-x' },
       '.bg-repeat-y': { 'background-repeat': 'repeat-y' },
+      '.bg-repeat-x': { 'background-repeat': 'repeat-x' },
       '.bg-repeat-round': { 'background-repeat': 'round' },
       '.bg-repeat-space': { 'background-repeat': 'space' },
     })
@@ -1923,16 +1915,14 @@ export let corePlugins = {
 
   padding: createUtilityPlugin('padding', [
     ['p', ['padding']],
-    [
-      ['px', ['padding-left', 'padding-right']],
-      ['py', ['padding-top', 'padding-bottom']],
-    ],
-    [['pt', ['padding-top']]],
-    [['pr', ['padding-right']]],
-    [['pe', ['padding-inline-end']]],
-    [['pb', ['padding-bottom']]],
-    [['pl', ['padding-left']]],
-    [['ps', ['padding-inline-start']]],
+    ['py', ['padding-top', 'padding-bottom']],
+    ['px', ['padding-left', 'padding-right']],
+    ['pt', ['padding-top']],
+    ['pb', ['padding-bottom']],
+    ['ps', ['padding-inline-start']],
+    ['pl', ['padding-left']],
+    ['pe', ['padding-inline-end']],
+    ['pr', ['padding-right']],
   ]),
 
   textAlign: ({ addUtilities }) => {

From e3b8db15194712f66ae56e4cb8af0a6425a83f5c Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 10 Apr 2023 15:40:35 -0400
Subject: [PATCH 6/6] Work on utility order some more

---
 src/corePlugins.js | 82 ++++++++++++++++++++--------------------------
 1 file changed, 35 insertions(+), 47 deletions(-)

diff --git a/src/corePlugins.js b/src/corePlugins.js
index d7a83c540066..459a2c01aaba 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -627,14 +627,14 @@ export let corePlugins = {
     'inset',
     [
       ['inset', ['inset']],
-      [['inset-y', ['top', 'bottom']]],
-      [['inset-x', ['left', 'right']]],
-      [['top', ['top']]],
-      [['bottom', ['bottom']]],
-      [['start', ['inset-inline-start']]],
-      [['left', ['left']]],
-      [['end', ['inset-inline-end']]],
-      [['right', ['right']]],
+      ['inset-y', ['top', 'bottom']],
+      ['inset-x', ['left', 'right']],
+      ['top', ['top']],
+      ['bottom', ['bottom']],
+      ['start', ['inset-inline-start']],
+      ['left', ['left']],
+      ['end', ['inset-inline-end']],
+      ['right', ['right']],
     ],
     { supportsNegativeValues: true }
   ),
@@ -676,14 +676,14 @@ export let corePlugins = {
     'margin',
     [
       ['m', ['margin']],
-      [['my', ['margin-top', 'margin-bottom']]],
-      [['mx', ['margin-left', 'margin-right']]],
-      [['mt', ['margin-top']]],
-      [['mb', ['margin-bottom']]],
-      [['ms', ['margin-inline-start']]],
-      [['ml', ['margin-left']]],
-      [['me', ['margin-inline-end']]],
-      [['mr', ['margin-right']]],
+      ['my', ['margin-top', 'margin-bottom']],
+      ['mx', ['margin-left', 'margin-right']],
+      ['mt', ['margin-top']],
+      ['mb', ['margin-bottom']],
+      ['ms', ['margin-inline-start']],
+      ['ml', ['margin-left']],
+      ['me', ['margin-inline-end']],
+      ['mr', ['margin-right']],
     ],
     { supportsNegativeValues: true }
   ),
@@ -747,8 +747,8 @@ export let corePlugins = {
   aspectRatio: createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]]),
 
   height: createUtilityPlugin('height', [['h', ['height']]]),
-  maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]),
   minHeight: createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]),
+  maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]),
 
   width: createUtilityPlugin('width', [['w', ['width']]]),
   minWidth: createUtilityPlugin('minWidth', [['min-w', ['minWidth']]]),
@@ -802,16 +802,16 @@ export let corePlugins = {
             'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
           }
         },
-        'border-spacing-x': (value) => {
+        'border-spacing-y': (value) => {
           return {
-            '--tw-border-spacing-x': value,
+            '--tw-border-spacing-y': value,
             '@defaults border-spacing': {},
             'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
           }
         },
-        'border-spacing-y': (value) => {
+        'border-spacing-x': (value) => {
           return {
-            '--tw-border-spacing-y': value,
+            '--tw-border-spacing-x': value,
             '@defaults border-spacing': {},
             'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
           }
@@ -826,14 +826,12 @@ export let corePlugins = {
     'translate',
     [
       [
-        [
-          'translate-x',
-          [['@defaults transform', {}], '--tw-translate-x', ['transform', cssTransformValue]],
-        ],
-        [
-          'translate-y',
-          [['@defaults transform', {}], '--tw-translate-y', ['transform', cssTransformValue]],
-        ],
+        'translate-y',
+        [['@defaults transform', {}], '--tw-translate-y', ['transform', cssTransformValue]],
+      ],
+      [
+        'translate-x',
+        [['@defaults transform', {}], '--tw-translate-x', ['transform', cssTransformValue]],
       ],
     ],
     { supportsNegativeValues: true }
@@ -846,10 +844,8 @@ export let corePlugins = {
   skew: createUtilityPlugin(
     'skew',
     [
-      [
-        ['skew-x', [['@defaults transform', {}], '--tw-skew-x', ['transform', cssTransformValue]]],
-        ['skew-y', [['@defaults transform', {}], '--tw-skew-y', ['transform', cssTransformValue]]],
-      ],
+      ['skew-y', [['@defaults transform', {}], '--tw-skew-y', ['transform', cssTransformValue]]],
+      ['skew-x', [['@defaults transform', {}], '--tw-skew-x', ['transform', cssTransformValue]]],
     ],
     { supportsNegativeValues: true }
   ),
@@ -865,16 +861,8 @@ export let corePlugins = {
           ['transform', cssTransformValue],
         ],
       ],
-      [
-        [
-          'scale-x',
-          [['@defaults transform', {}], '--tw-scale-x', ['transform', cssTransformValue]],
-        ],
-        [
-          'scale-y',
-          [['@defaults transform', {}], '--tw-scale-y', ['transform', cssTransformValue]],
-        ],
-      ],
+      ['scale-y', [['@defaults transform', {}], '--tw-scale-y', ['transform', cssTransformValue]]],
+      ['scale-x', [['@defaults transform', {}], '--tw-scale-x', ['transform', cssTransformValue]]],
     ],
     { supportsNegativeValues: true }
   ),
@@ -1132,11 +1120,11 @@ export let corePlugins = {
 
   gridAutoFlow: ({ addUtilities }) => {
     addUtilities({
-      '.grid-flow-row': { gridAutoFlow: 'row' },
       '.grid-flow-col': { gridAutoFlow: 'column' },
+      '.grid-flow-row': { gridAutoFlow: 'row' },
       '.grid-flow-dense': { gridAutoFlow: 'dense' },
-      '.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
       '.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
+      '.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
     })
   },
 
@@ -1148,10 +1136,10 @@ export let corePlugins = {
 
   flexDirection: ({ addUtilities }) => {
     addUtilities({
-      '.flex-row': { 'flex-direction': 'row' },
-      '.flex-row-reverse': { 'flex-direction': 'row-reverse' },
       '.flex-col': { 'flex-direction': 'column' },
       '.flex-col-reverse': { 'flex-direction': 'column-reverse' },
+      '.flex-row': { 'flex-direction': 'row' },
+      '.flex-row-reverse': { 'flex-direction': 'row-reverse' },
     })
   },