Skip to content

Commit fb89e8f

Browse files
bradlcbradlc
committed
Update variant completions for new modifier syntax
1 parent 2b4ea36 commit fb89e8f

File tree

2 files changed

+73
-111
lines changed

2 files changed

+73
-111
lines changed

‎packages/tailwindcss-language-service/src/completionProvider.ts

+67-108
Original file line numberDiff line numberDiff line change
@@ -122,18 +122,6 @@ export function completionsFromClassList(
122122
let items: CompletionItem[] = []
123123

124124
if (!important) {
125-
let prefix = partialClassName.slice(offset)
126-
let parentVariant: Variant
127-
let variantLabel: string = ''
128-
for (let variant of state.variants) {
129-
let match = prefix.match(new RegExp(`^${variant.name}(?<label><[^>]+>)-$`))
130-
if (match) {
131-
parentVariant = variant
132-
variantLabel = match.groups.label
133-
break
134-
}
135-
}
136-
137125
let variantOrder = 0
138126

139127
function variantItem(
@@ -161,112 +149,83 @@ export function completionsFromClassList(
161149
}
162150
}
163151

164-
if (parentVariant) {
165-
if (parentVariant.isArbitrary) {
166-
items.push(
167-
variantItem({
168-
label: `${parentVariant.name}${variantLabel}-[]${sep}`,
169-
insertTextFormat: 2,
170-
textEdit: {
171-
newText: `${parentVariant.name}${variantLabel}-[\${1:&}]${sep}\${0}`,
172-
},
173-
})
174-
)
175-
}
152+
items.push(
153+
...state.variants.flatMap((variant) => {
154+
let items: CompletionItem[] = []
176155

177-
items.push(
178-
...parentVariant.values
179-
.filter(
180-
(value) => !existingVariants.includes(`${parentVariant.name}${variantLabel}-${value}`)
181-
)
182-
.map((value) =>
156+
if (variant.isArbitrary) {
157+
items.push(
183158
variantItem({
184-
label: `${parentVariant.name}${variantLabel}-${value}${sep}`,
185-
detail: parentVariant
186-
.selectors({ value, label: variantLabel.slice(1, -1) })
187-
.join(', '),
159+
label: `${variant.name}-[]${sep}`,
160+
insertTextFormat: 2,
161+
textEdit: {
162+
newText: `${variant.name}-[\${1:&}]${sep}\${0}`,
163+
},
164+
command: {
165+
title: '',
166+
command: 'tailwindCSS.onInsertArbitraryVariantSnippet',
167+
arguments: [variant.name, replacementRange],
168+
},
188169
})
189170
)
190-
)
191-
} else {
192-
items.push(
193-
...state.variants.flatMap((variant) => {
194-
let items: CompletionItem[] = []
195-
196-
if (variant.isArbitrary) {
197-
items.push(
198-
variantItem({
199-
label: `${variant.name}-[]${sep}`,
200-
insertTextFormat: 2,
201-
textEdit: {
202-
newText: `${variant.name}-[\${1:&}]${sep}\${0}`,
203-
},
204-
command: {
205-
title: '',
206-
command: 'tailwindCSS.onInsertArbitraryVariantSnippet',
207-
arguments: [variant.name, replacementRange],
208-
},
209-
})
171+
} else if (!existingVariants.includes(variant.name)) {
172+
let shouldSortVariants = !semver.gte(state.version, '2.99.0')
173+
let resultingVariants = [...existingVariants, variant.name]
174+
175+
if (shouldSortVariants) {
176+
let allVariants = state.variants.map(({ name }) => name)
177+
resultingVariants = resultingVariants.sort(
178+
(a, b) => allVariants.indexOf(b) - allVariants.indexOf(a)
210179
)
211-
} else if (!existingVariants.includes(variant.name)) {
212-
let shouldSortVariants = !semver.gte(state.version, '2.99.0')
213-
let resultingVariants = [...existingVariants, variant.name]
214-
215-
if (shouldSortVariants) {
216-
let allVariants = state.variants.map(({ name }) => name)
217-
resultingVariants = resultingVariants.sort(
218-
(a, b) => allVariants.indexOf(b) - allVariants.indexOf(a)
219-
)
220-
}
180+
}
221181

222-
items.push(
223-
variantItem({
224-
label: `${variant.name}${sep}`,
225-
detail: variant.selectors().join(', '),
226-
textEdit: {
227-
newText: resultingVariants[resultingVariants.length - 1] + sep,
228-
},
229-
additionalTextEdits:
230-
shouldSortVariants && resultingVariants.length > 1
231-
? [
232-
{
233-
newText:
234-
resultingVariants.slice(0, resultingVariants.length - 1).join(sep) +
235-
sep,
236-
range: {
237-
start: {
238-
...classListRange.start,
239-
character: classListRange.end.character - partialClassName.length,
240-
},
241-
end: {
242-
...replacementRange.start,
243-
character: replacementRange.start.character,
244-
},
182+
items.push(
183+
variantItem({
184+
label: `${variant.name}${sep}`,
185+
detail: variant.selectors().join(', '),
186+
textEdit: {
187+
newText: resultingVariants[resultingVariants.length - 1] + sep,
188+
},
189+
additionalTextEdits:
190+
shouldSortVariants && resultingVariants.length > 1
191+
? [
192+
{
193+
newText:
194+
resultingVariants.slice(0, resultingVariants.length - 1).join(sep) +
195+
sep,
196+
range: {
197+
start: {
198+
...classListRange.start,
199+
character: classListRange.end.character - partialClassName.length,
200+
},
201+
end: {
202+
...replacementRange.start,
203+
character: replacementRange.start.character,
245204
},
246205
},
247-
]
248-
: [],
249-
})
250-
)
251-
}
206+
},
207+
]
208+
: [],
209+
})
210+
)
211+
}
252212

253-
if (variant.values.length) {
254-
items.push(
255-
...variant.values
256-
.filter((value) => !existingVariants.includes(`${variant.name}-${value}`))
257-
.map((value) =>
258-
variantItem({
259-
label: `${variant.name}-${value}${sep}`,
260-
detail: variant.selectors({ value }).join(', '),
261-
})
262-
)
263-
)
264-
}
213+
if (variant.values.length) {
214+
items.push(
215+
...variant.values
216+
.filter((value) => !existingVariants.includes(`${variant.name}-${value}`))
217+
.map((value) =>
218+
variantItem({
219+
label: `${variant.name}-${value}${sep}`,
220+
detail: variant.selectors({ value }).join(', '),
221+
})
222+
)
223+
)
224+
}
265225

266-
return items
267-
})
268-
)
269-
}
226+
return items
227+
})
228+
)
270229
}
271230

272231
if (state.classList) {

‎packages/tailwindcss-language-service/src/util/getVariantsFromClassName.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,19 @@ export function getVariantsFromClassName(
1111
}
1212
return [variant.name]
1313
})
14-
let parts = splitAtTopLevelOnly(className, state.separator).filter(Boolean)
1514
let variants = new Set<string>()
1615
let offset = 0
16+
let parts = splitAtTopLevelOnly(className, state.separator)
17+
if (parts.length < 2) {
18+
return { variants: Array.from(variants), offset }
19+
}
20+
parts = parts.filter(Boolean)
1721

1822
for (let part of parts) {
1923
if (
2024
allVariants.includes(part) ||
2125
(state.jit &&
22-
((part.includes('[') && part.endsWith(']')) ||
23-
(part.includes('<') && part.includes('>'))) &&
26+
((part.includes('[') && part.endsWith(']')) || part.includes('/')) &&
2427
jit.generateRules(state, [`${part}${state.separator}[color:red]`]).rules.length > 0)
2528
) {
2629
variants.add(part)

0 commit comments

Comments
 (0)