Skip to content

Commit c8889d5

Browse files
Allow variant registration with custom order
1 parent e9c913a commit c8889d5

File tree

1 file changed

+21
-9
lines changed

1 file changed

+21
-9
lines changed

packages/tailwindcss/src/variants.ts

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,12 @@ export class Variants {
3838
*/
3939
private lastOrder = 0
4040

41-
static(name: string, applyFn: VariantFn<'static'>, { compounds }: { compounds?: boolean } = {}) {
42-
this.set(name, { kind: 'static', applyFn, compounds: compounds ?? true })
41+
static(
42+
name: string,
43+
applyFn: VariantFn<'static'>,
44+
{ compounds, order }: { compounds?: boolean; order?: number } = {},
45+
) {
46+
this.set(name, { kind: 'static', applyFn, compounds: compounds ?? true, order })
4347
}
4448

4549
fromAst(name: string, ast: AstNode[]) {
@@ -53,17 +57,17 @@ export class Variants {
5357
functional(
5458
name: string,
5559
applyFn: VariantFn<'functional'>,
56-
{ compounds }: { compounds?: boolean } = {},
60+
{ compounds, order }: { compounds?: boolean; order?: number } = {},
5761
) {
58-
this.set(name, { kind: 'functional', applyFn, compounds: compounds ?? true })
62+
this.set(name, { kind: 'functional', applyFn, compounds: compounds ?? true, order })
5963
}
6064

6165
compound(
6266
name: string,
6367
applyFn: VariantFn<'compound'>,
64-
{ compounds }: { compounds?: boolean } = {},
68+
{ compounds, order }: { compounds?: boolean; order?: number } = {},
6569
) {
66-
this.set(name, { kind: 'compound', applyFn, compounds: compounds ?? true })
70+
this.set(name, { kind: 'compound', applyFn, compounds: compounds ?? true, order })
6771
}
6872

6973
group(fn: () => void, compareFn?: CompareFn) {
@@ -136,17 +140,25 @@ export class Variants {
136140

137141
private set<T extends Variant['kind']>(
138142
name: string,
139-
{ kind, applyFn, compounds }: { kind: T; applyFn: VariantFn<T>; compounds: boolean },
143+
{
144+
kind,
145+
applyFn,
146+
compounds,
147+
order,
148+
}: { kind: T; applyFn: VariantFn<T>; compounds: boolean; order?: number },
140149
) {
141150
let existing = this.variants.get(name)
142151
if (existing) {
143152
Object.assign(existing, { kind, applyFn, compounds })
144153
} else {
145-
this.lastOrder = this.nextOrder()
154+
if (order === undefined) {
155+
this.lastOrder = this.nextOrder()
156+
order = this.lastOrder
157+
}
146158
this.variants.set(name, {
147159
kind,
148160
applyFn,
149-
order: this.lastOrder,
161+
order,
150162
compounds,
151163
})
152164
}

0 commit comments

Comments
 (0)