Create a datastrucutre that groups equal entries so the bitmap can ra…

…nk equal entries the same way

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

@@ -1404,13 +1404,13 @@ describe('matchVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        .potato-yellow .potato-\\[yellow\\]\\:underline {
-          text-decoration-line: underline;
-        }
-
         .potato-baked .potato-\\[baked\\]\\:flex {
           display: flex;
         }
+
+        .potato-yellow .potato-\\[yellow\\]\\:underline {
+          text-decoration-line: underline;
+        }
       }"
     `)
   })
@@ -1435,17 +1435,17 @@ describe('matchVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media (potato: yellow) {
-          .potato-\\[yellow\\]\\:underline {
-            text-decoration-line: underline;
-          }
-        }
-
         @media (potato: baked) {
           .potato-\\[baked\\]\\:flex {
             display: flex;
           }
         }
+
+        @media (potato: yellow) {
+          .potato-\\[yellow\\]\\:underline {
+            text-decoration-line: underline;
+          }
+        }
       }"
     `)
   })
@@ -1473,18 +1473,18 @@ describe('matchVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        @media (potato: yellow) {
+        @media (potato: baked) {
           @supports (font: bold) {
-            .potato-\\[yellow\\]\\:underline:large-potato {
-              text-decoration-line: underline;
+            .potato-\\[baked\\]\\:flex:large-potato {
+              display: flex;
             }
           }
         }
 
-        @media (potato: baked) {
+        @media (potato: yellow) {
           @supports (font: bold) {
-            .potato-\\[baked\\]\\:flex:large-potato {
-              display: flex;
+            .potato-\\[yellow\\]\\:underline:large-potato {
+              text-decoration-line: underline;
             }
           }
         }

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

@@ -150,10 +150,10 @@ export function buildPluginApi(
             return 0
           }
 
-          if (options && typeof options.sort === 'function') {
-            let aValue = options.values?.[a.value.value] ?? a.value.value
-            let zValue = options.values?.[z.value.value] ?? z.value.value
+          let aValue = options?.values?.[a.value.value] ?? a.value.value
+          let zValue = options?.values?.[z.value.value] ?? z.value.value
 
+          if (options && typeof options.sort === 'function') {
             return options.sort(
               { value: aValue, modifier: a.modifier?.value ?? null },
               { value: zValue, modifier: z.modifier?.value ?? null },
@@ -163,6 +163,7 @@ export function buildPluginApi(
           let aOrder = defaultOptionKeys.indexOf(a.value.value)
           let zOrder = defaultOptionKeys.indexOf(z.value.value)
 
+          if (aOrder - zOrder === 0) return aValue < zValue ? -1 : 1
           return aOrder - zOrder
         },
       )

packages/tailwindcss/src/compile.ts

@@ -31,9 +31,9 @@ export function compileCandidates(
   }
 
   // Sort the variants
-  let variants = designSystem.getUsedVariants().sort((a, z) => {
-    return designSystem.variants.compare(a, z)
-  })
+  let variants = sortAndGroup(designSystem.getUsedVariants(), (a, z) =>
+    designSystem.variants.compare(a, z),
+  )
 
   // Create the AST
   for (let [rawCandidate, candidates] of matches) {
@@ -51,7 +51,8 @@ export function compileCandidates(
         // variants used.
         let variantOrder = 0n
         for (let variant of candidate.variants) {
-          variantOrder |= 1n << BigInt(variants.indexOf(variant))
+          let index = variants.findIndex((g) => g.findIndex((v) => v === variant) !== -1)
+          variantOrder |= 1n << BigInt(index)
         }
 
         nodeSorting.set(node, {
@@ -321,3 +322,37 @@ function getPropertySort(nodes: AstNode[]) {
 
   return Array.from(propertySort).sort((a, z) => a - z)
 }
+
+/**
+ * Sort an array of entries into arrays-of-arrays. Similar entries (where the
+ * sort function returns 0) are grouped together. The sort function is stable.
+ *
+ * Example:
+ *
+ *   [1, 4, 3, 1]
+ *
+ * Becomes:
+ *
+ *  [
+ *   [1, 1],
+ *   [3],
+ *   [4],
+ *  ]
+ *
+ * TODO: Make this faster.
+ */
+function sortAndGroup<T>(entries: T[], comparator: (a: T, z: T) => number): T[][] {
+  let groups: T[][] = []
+  let sorted = entries.slice().sort(comparator)
+
+  for (let entry of sorted) {
+    let prevGroup = groups[groups.length - 1]
+    if (prevGroup && comparator(prevGroup[0], entry) === 0) {
+      prevGroup.push(entry)
+    } else {
+      groups.push([entry])
+    }
+  }
+
+  return groups
+}