Add scrollbar-width and scrollbar-color to property order list (#20019)

This PR adds the `scrollbar-width` and `scrollbar-color` properties to
the property order list such that we have a stable sort order for these
properties.

I put `scrollbar-width` before `scrollbar-color`, which is the same
order as the `border-width` and `border-color` properties.

## Test plan

1. Had to update a test because of the swapped order
2. All other tests pass

Author: RobinMalfait

CHANGELOG.md

@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - _Experimental_: add `@container-size` utility ([#18901](https://github.com/tailwindlabs/tailwindcss/pull/18901))
-- _Experimental_: add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ([#19981](https://github.com/tailwindlabs/tailwindcss/pull/19981))
+- _Experimental_: add `scrollbar-{auto,thin,none}` utilities for `scrollbar-width`, and `scrollbar-thumb-*` / `scrollbar-track-*` color utilities for `scrollbar-color` ([#19981](https://github.com/tailwindlabs/tailwindcss/pull/19981), [#20019](https://github.com/tailwindlabs/tailwindcss/pull/20019))
 - Allow using `@variant` with stacked variants (e.g. `@variant hover:focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
 - Allow using `@variant` with compound variants (e.g. `@variant hover, focus { … }`) ([#19996](https://github.com/tailwindlabs/tailwindcss/pull/19996))
 - Support `--default(…)` in `--value(…)` and `--modifier(…)` for functional `@utility` definitions ([#19989](https://github.com/tailwindlabs/tailwindcss/pull/19989))

packages/tailwindcss/src/compat/config.test.ts

@@ -215,12 +215,12 @@ test('Config files can affect the theme', async () => {
 
   expect(pretty(compiler.build(['bg-primary', 'scrollbar-primary']))).toMatchInlineSnapshot(`
     "
-    .bg-primary {
-      background-color: #c0ffee;
-    }
     .scrollbar-primary {
       scrollbar-color: #c0ffee;
     }
+    .bg-primary {
+      background-color: #c0ffee;
+    }
     "
   `)
 })

packages/tailwindcss/src/compat/plugin-api.test.ts

@@ -3953,17 +3953,17 @@ describe('matchUtilities()', () => {
       expect(optimizeCss(await run(['scrollbar-[2px]', 'scrollbar-[#08c]', 'scrollbar-[#08c]/50'])))
         .toMatchInlineSnapshot(`
           "
+          .scrollbar-\\[2px\\] {
+            scrollbar-width: 2px;
+          }
+
           .scrollbar-\\[\\#08c\\] {
             scrollbar-color: #08c;
           }
 
           .scrollbar-\\[\\#08c\\]\\/50 {
             scrollbar-color: oklab(59.9824% -.067 -.124 / .5);
           }
-
-          .scrollbar-\\[2px\\] {
-            scrollbar-width: 2px;
-          }
           "
         `)
       expect(optimizeCss(await run(['scrollbar-[2px]/50']))).toEqual('')
@@ -4117,10 +4117,14 @@ describe('matchUtilities()', () => {
       ),
     ).toMatchInlineSnapshot(`
       "
-      .scrollbar-2 {
+      .scrollbar-2, .scrollbar-\\[2px\\] {
         scrollbar-width: 2px;
       }
 
+      .scrollbar-\\[length\\:var\\(--my-width\\)\\] {
+        scrollbar-width: var(--my-width);
+      }
+
       .scrollbar-\\[\\#fff\\] {
         scrollbar-color: #fff;
       }
@@ -4129,10 +4133,6 @@ describe('matchUtilities()', () => {
         scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
       }
 
-      .scrollbar-\\[2px\\] {
-        scrollbar-width: 2px;
-      }
-
       .scrollbar-\\[color\\:var\\(--my-color\\)\\], .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
         scrollbar-color: var(--my-color);
       }
@@ -4143,10 +4143,6 @@ describe('matchUtilities()', () => {
         }
       }
 
-      .scrollbar-\\[length\\:var\\(--my-width\\)\\] {
-        scrollbar-width: var(--my-width);
-      }
-
       .scrollbar-\\[var\\(--my-color\\)\\], .scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
         scrollbar-color: var(--my-color);
       }

packages/tailwindcss/src/property-order.ts

@@ -131,6 +131,8 @@ export default [
   'scroll-padding-bottom',
   'scroll-padding-left',
 
+  'scrollbar-width',
+  'scrollbar-color',
   'scrollbar-gutter',
 
   'list-style-position',