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

* Sort arbitrary properties alphabetically across multiple files

* Update test

Author: thecrypticace

src/lib/generateRules.js

@@ -512,7 +512,7 @@ function extractArbitraryProperty(classCandidate, context) {
     return null
   }
 
-  let sort = context.offsets.arbitraryProperty()
+  let sort = context.offsets.arbitraryProperty(classCandidate)
 
   return [
     [

src/lib/offsets.js

@@ -23,7 +23,9 @@ import { remapBitfield } from './remap-bitfield.js'
  * @property {bigint} arbitrary 0n if false, 1n if true
  * @property {bigint} variants Dynamic size. 1 bit per registered variant. 0n means no variants
  * @property {bigint} parallelIndex Rule index for the parallel variant. 0 if not applicable.
- * @property {bigint} index Index of the rule / utility in it's given *parent* layer. Monotonically increasing.
+ * @property {bigint} index Index of the rule / utility in its given *parent* layer. Monotonically increasing.
+ * @property {bigint} propertyOffset Offset for the arbitrary property. Only valid after sorting.
+ * @property {string} property Name/Value of the arbitrary property.
  * @property {VariantOption[]} options Some information on how we can sort arbitrary variants
  */
 
@@ -88,17 +90,21 @@ export class Offsets {
       variants: 0n,
       parallelIndex: 0n,
       index: this.offsets[layer]++,
+      propertyOffset: 0n,
+      property: '',
       options: [],
     }
   }
 
   /**
+   * @param {string} name
    * @returns {RuleOffset}
    */
-  arbitraryProperty() {
+  arbitraryProperty(name) {
     return {
       ...this.create('utilities'),
       arbitrary: 1n,
+      property: name,
     }
   }
 
@@ -262,6 +268,11 @@ export class Offsets {
       return a.arbitrary - b.arbitrary
     }
 
+    // Always sort arbitrary properties alphabetically
+    if (a.propertyOffset !== b.propertyOffset) {
+      return a.propertyOffset - b.propertyOffset
+    }
+
     // Sort utilities, components, etc… in the order they were registered
     return a.index - b.index
   }
@@ -320,14 +331,62 @@ export class Offsets {
     })
   }
 
+  /**
+   * @template T
+   * @param {[RuleOffset, T][]} list
+   * @returns {[RuleOffset, T][]}
+   */
+  sortArbitraryProperties(list) {
+    // Collect all known arbitrary properties
+    let known = new Set()
+
+    for (let [offset] of list) {
+      if (offset.arbitrary === 1n) {
+        known.add(offset.property)
+      }
+    }
+
+    // No arbitrary properties? Nothing to do.
+    if (known.size === 0) {
+      return list
+    }
+
+    // Sort the properties alphabetically
+    let properties = Array.from(known).sort()
+
+    // Create a map from the property name to its offset
+    let offsets = new Map()
+
+    let offset = 1n
+    for (let property of properties) {
+      offsets.set(property, offset++)
+    }
+
+    // Apply the sorted offsets to the list
+    return list.map((item) => {
+      let [offset, rule] = item
+
+      offset = {
+        ...offset,
+        propertyOffset: offsets.get(offset.property) ?? 0n,
+      }
+
+      return [offset, rule]
+    })
+  }
+
   /**
    * @template T
    * @param {[RuleOffset, T][]} list
    * @returns {[RuleOffset, T][]}
    */
   sort(list) {
+    // Sort arbitrary variants so they're in alphabetical order
     list = this.remapArbitraryVariantOffsets(list)
 
+    // Sort arbitrary properties so they're in alphabetical order
+    list = this.sortArbitraryProperties(list)
+
     return list.sort(([a], [b]) => bigSign(this.compare(a, b)))
   }
 }

tests/getSortOrder.test.js

@@ -220,3 +220,26 @@ it('Sorting is unchanged when multiple candidates share the same rule / object',
     expect(defaultSort(context.getClassOrder(input.split(' ')))).toEqual(output)
   }
 })
+
+it('sorts arbitrary values across one or more class lists consistently', () => {
+  let classes = [
+    ['[--fg:#fff]', '[--fg:#fff]'],
+    ['[--bg:#111] [--bg_hover:#000] [--fg:#fff]', '[--bg:#111] [--bg_hover:#000] [--fg:#fff]'],
+  ]
+
+  let config = {
+    theme: {},
+  }
+
+  // Same context, different class lists
+  let context = createContext(resolveConfig(config))
+  for (const [input, output] of classes) {
+    expect(defaultSort(context.getClassOrder(input.split(' ')))).toEqual(output)
+  }
+
+  // Different context, different class lists
+  for (const [input, output] of classes) {
+    context = createContext(resolveConfig(config))
+    expect(defaultSort(context.getClassOrder(input.split(' ')))).toEqual(output)
+  }
+})

tests/variants.test.js

@@ -36,30 +36,40 @@ crosscheck(({ stable, oxide }) => {
       content: [
         {
           raw: html`
-            <div class="hover:file:bg-pink-600"></div>
-            <div class="file:hover:bg-pink-600"></div>
+            <div class="hover:file:[--value:1]"></div>
+            <div class="file:hover:[--value:2]"></div>
           `,
         },
       ],
     }
 
     return run('@tailwind utilities', config).then((result) => {
       stable.expect(result.css).toMatchFormattedCss(css`
-        .file\:hover\:bg-pink-600:hover::file-selector-button {
-          --tw-bg-opacity: 1;
-          background-color: rgb(219 39 119 / var(--tw-bg-opacity));
+        .hover\:file\:\[--value\:1\]::-webkit-file-upload-button:hover {
+          --value: 1;
         }
-        .hover\:file\:bg-pink-600::file-selector-button:hover {
-          --tw-bg-opacity: 1;
-          background-color: rgb(219 39 119 / var(--tw-bg-opacity));
+        .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;
         }
       `)
       oxide.expect(result.css).toMatchFormattedCss(css`
-        .file\:hover\:bg-pink-600:hover::file-selector-button {
-          background-color: #db2777;
+        .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;
         }
-        .hover\:file\:bg-pink-600::file-selector-button:hover {
-          background-color: #db2777;
+        .file\:hover\:\[--value\:2\]:hover::file-selector-button {
+          --value: 2;
         }
       `)
     })