Skip to content
Prev Previous commit
Next Next commit
Sort arbitrary values in matchVariant after configured values
  • Loading branch information
adamwathan committed Oct 31, 2024
commit 60862a1998d628365a86003332b8ca1293b9852a
4 changes: 4 additions & 0 deletions packages/tailwindcss/src/compat/plugin-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,10 @@ export function buildPluginApi(
let aOrder = defaultOptionKeys.indexOf(aValueKey)
let zOrder = defaultOptionKeys.indexOf(zValueKey)

// Sort arbitrary values after configured values
aOrder = aOrder === -1 ? defaultOptionKeys.length : aOrder
zOrder = zOrder === -1 ? defaultOptionKeys.length : zOrder

if (aOrder !== zOrder) return aOrder - zOrder

// SAFETY: The values don't need to be checked for equality as they
Expand Down
16 changes: 15 additions & 1 deletion packages/tailwindcss/src/variants.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3358,7 +3358,13 @@ test('matchVariant sorts deterministically', async () => {
)
}

let classLists = permute(['is-data:flex', 'is-data-foo:flex', 'is-data-bar:flex'])
let classLists = permute([
'is-data:flex',
'is-data-foo:flex',
'is-data-bar:flex',
'is-data-[potato]:flex',
'is-data-[sandwich]:flex',
])

for (let classList of classLists) {
let output = await compileCss('@tailwind utilities; @plugin "./plugin.js";', classList, {
Expand Down Expand Up @@ -3391,6 +3397,14 @@ test('matchVariant sorts deterministically', async () => {
.is-data-bar\:flex[data-bar] {
display: flex;
}

.is-data-\[potato\]\:flex[data-potato] {
display: flex;
}

.is-data-\[sandwich\]\:flex[data-sandwich] {
display: flex;
}
`),
)
}
Expand Down