Sort arbitrary properties alphabetically across multiple class lists (#12911)

* Sort arbitrary properties alphabetically across multiple files

* Update test

Author: thecrypticace

tests/variants.test.js

@@ -5,6 +5,57 @@ import { crosscheck, run, html, css, defaults } from './util/run'
 
 crosscheck(({ stable, oxide }) => {
   test('variants', () => {
+  let config = {
+    darkMode: 'selector',
+    content: [path.resolve(__dirname, './variants.test.html')],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(
+      fs.readFileSync(path.resolve(__dirname, './variants.test.css'), 'utf8')
+    )
+  })
+})
+
+test('order matters and produces different behaviour', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="hover:file:[--value:1]"></div>
+          <div class="file:hover:[--value:2]"></div>
+        `,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .hover\:file\:\[--value\:1\]::-webkit-file-upload-button:hover {
+        --value: 1;
+      }
+      .hover\:file\:\[--value\:1\]::file-selector-button:hover {
+        --value: 1;
+      }
+      .file\:hover\:\[--value\:2\]:hover::-webkit-file-upload-button {
+        --value: 2;
+      }
+      .file\:hover\:\[--value\:2\]:hover::file-selector-button {
+        --value: 2;
+      }
+    `)
+  })
+})
+
+describe('custom advanced variants', () => {
+  test('at-rules without params', () => {
     let config = {
       darkMode: 'selector',
       content: [path.resolve(__dirname, './variants.test.html')],
@@ -1070,181 +1121,4 @@ crosscheck(({ stable, oxide }) => {
       `)
     })
   })
-
-  test('variants with slashes support modifiers', () => {
-    let config = {
-      content: [
-        {
-          raw: html` <div class="ar-1/10/20:text-red-500">ar-1/10</div> `,
-        },
-      ],
-      corePlugins: { preflight: false },
-      plugins: [
-        function ({ matchVariant }) {
-          matchVariant(
-            'ar',
-            (value, { modifier }) => {
-              return [`@media (min-aspect-ratio: ${value}) and (foo: ${modifier})`]
-            },
-            { values: { '1/10': '1/10' } }
-          )
-        },
-      ],
-    }
-
-    let input = css`
-      @tailwind utilities;
-    `
-
-    return run(input, config).then((result) => {
-      stable.expect(result.css).toMatchFormattedCss(css`
-        @media (min-aspect-ratio: 1 / 10) and (foo: 20) {
-          .ar-1\/10\/20\:text-red-500 {
-            --tw-text-opacity: 1;
-            color: rgb(239 68 68 / var(--tw-text-opacity));
-          }
-        }
-      `)
-      oxide.expect(result.css).toMatchFormattedCss(css`
-        @media (min-aspect-ratio: 1 / 10) and (foo: 20) {
-          .ar-1\/10\/20\:text-red-500 {
-            color: #ef4444;
-          }
-        }
-      `)
-    })
-  })
-
-  test('arbitrary variant selectors should not re-order scrollbar pseudo classes', async () => {
-    let config = {
-      content: [
-        {
-          raw: html`
-            <div class="[&::-webkit-scrollbar:hover]:underline" />
-            <div class="[&::-webkit-scrollbar-button:hover]:underline" />
-            <div class="[&::-webkit-scrollbar-thumb:hover]:underline" />
-            <div class="[&::-webkit-scrollbar-track:hover]:underline" />
-            <div class="[&::-webkit-scrollbar-track-piece:hover]:underline" />
-            <div class="[&::-webkit-scrollbar-corner:hover]:underline" />
-            <div class="[&::-webkit-resizer:hover]:underline" />
-          `,
-        },
-      ],
-      corePlugins: { preflight: false },
-    }
-
-    let input = css`
-      @tailwind utilities;
-    `
-
-    let result = await run(input, config)
-
-    expect(result.css).toMatchFormattedCss(css`
-      .\[\&\:\:-webkit-resizer\:hover\]\:underline::-webkit-resizer:hover {
-        text-decoration-line: underline;
-      }
-      .\[\&\:\:-webkit-scrollbar-button\:hover\]\:underline::-webkit-scrollbar-button:hover {
-        text-decoration-line: underline;
-      }
-      .\[\&\:\:-webkit-scrollbar-corner\:hover\]\:underline::-webkit-scrollbar-corner:hover {
-        text-decoration-line: underline;
-      }
-      .\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:underline::-webkit-scrollbar-thumb:hover {
-        text-decoration-line: underline;
-      }
-      .\[\&\:\:-webkit-scrollbar-track-piece\:hover\]\:underline::-webkit-scrollbar-track-piece:hover {
-        text-decoration-line: underline;
-      }
-      .\[\&\:\:-webkit-scrollbar-track\:hover\]\:underline::-webkit-scrollbar-track:hover {
-        text-decoration-line: underline;
-      }
-      .\[\&\:\:-webkit-scrollbar\:hover\]\:underline::-webkit-scrollbar:hover {
-        text-decoration-line: underline;
-      }
-    `)
-  })
-
-  test('stacking dark and rtl variants', async () => {
-    let config = {
-      darkMode: 'selector',
-      content: [
-        {
-          raw: html`<div class="dark:rtl:italic" />`,
-        },
-      ],
-      corePlugins: { preflight: false },
-    }
-
-    let input = css`
-      @tailwind utilities;
-    `
-
-    let result = await run(input, config)
-
-    expect(result.css).toMatchFormattedCss(css`
-      .dark\:rtl\:italic:where([dir='rtl'], [dir='rtl'] *):where(.dark, .dark *) {
-        font-style: italic;
-      }
-    `)
-  })
-
-  test('stacking dark and rtl variants with pseudo elements', async () => {
-    let config = {
-      darkMode: 'selector',
-      content: [
-        {
-          raw: html`<div class="dark:rtl:placeholder:italic" />`,
-        },
-      ],
-      corePlugins: { preflight: false },
-    }
-
-    let input = css`
-      @tailwind utilities;
-    `
-
-    let result = await run(input, config)
-
-    expect(result.css).toMatchFormattedCss(css`
-      .dark\:rtl\:placeholder\:italic:where([dir='rtl'], [dir='rtl'] *):where(
-          .dark,
-          .dark *
-        )::placeholder {
-        font-style: italic;
-      }
-    `)
-  })
-
-  test('* is matched by the parser as the children variant', async () => {
-    let config = {
-      content: [
-        {
-          raw: html`
-            <div class="*:italic" />
-            <div class="*:hover:italic" />
-            <div class="hover:*:italic" />
-            <div class="data-[slot=label]:*:hover:italic" />
-            <div class="[&_p]:*:hover:italic" />
-          `,
-        },
-      ],
-      corePlugins: { preflight: false },
-    }
-
-    let input = css`
-      @tailwind utilities;
-    `
-
-    let result = await run(input, config)
-
-    expect(result.css).toMatchFormattedCss(css`
-      .\*\:italic > *,
-      .\*\:hover\:italic:hover > *,
-      .hover\:\*\:italic > :hover,
-      .data-\[slot\=label\]\:\*\:hover\:italic:hover > [data-slot='label'],
-      .\[\&_p\]\:\*\:hover\:italic:hover > * p {
-        font-style: italic;
-      }
-    `)
-  })
 })