add @​layer completions

master
Brad Cornes 2020-11-27 17:13:46 +00:00
parent 4f0e415df7
commit 9c60e0bfca
1 changed files with 57 additions and 1 deletions

View File

@ -562,6 +562,45 @@ function provideVariantsDirectiveCompletions(
} }
} }
function provideLayerDirectiveCompletions(
state: State,
document: TextDocument,
position: Position
): CompletionList {
if (!isCssContext(state, document, position)) {
return null
}
let text = document.getText({
start: { line: position.line, character: 0 },
end: position,
})
const match = text.match(/^\s*@layer\s+(?<partial>[^\s]*)$/i)
if (match === null) return null
return {
isIncomplete: false,
items: ['base', 'components', 'utilities'].map((layer, index) => ({
label: layer,
kind: 21,
data: 'layer',
sortText: naturalExpand(index),
textEdit: {
newText: layer,
range: {
start: {
line: position.line,
character: position.character - match.groups.partial.length,
},
end: position,
},
},
})),
}
}
function provideScreenDirectiveCompletions( function provideScreenDirectiveCompletions(
state: State, state: State,
document: TextDocument, document: TextDocument,
@ -678,6 +717,20 @@ function provideCssDirectiveCompletions(
)})`, )})`,
}, },
}, },
...(semver.gte(state.version, '1.8.0')
? [
{
label: '@layer',
documentation: {
kind: 'markdown' as typeof MarkupKind.Markdown,
value: `Use the \`@layer\` directive to tell Tailwind which "bucket" a set of custom styles belong to. Valid layers are \`base\`, \`components\`, and \`utilities\`.\n\n[Tailwind CSS Documentation](${docsUrl(
state.version,
'functions-and-directives/#layer'
)})`,
},
},
]
: []),
] ]
return { return {
@ -779,6 +832,7 @@ export async function doComplete(
provideScreenDirectiveCompletions(state, document, position) || provideScreenDirectiveCompletions(state, document, position) ||
provideVariantsDirectiveCompletions(state, document, position) || provideVariantsDirectiveCompletions(state, document, position) ||
provideTailwindDirectiveCompletions(state, document, position) || provideTailwindDirectiveCompletions(state, document, position) ||
provideLayerDirectiveCompletions(state, document, position) ||
(await provideCustomClassNameCompletions(state, document, position)) (await provideCustomClassNameCompletions(state, document, position))
if (result) return result if (result) return result
@ -790,7 +844,9 @@ export async function resolveCompletionItem(
state: State, state: State,
item: CompletionItem item: CompletionItem
): Promise<CompletionItem> { ): Promise<CompletionItem> {
if (['helper', 'directive', 'variant', '@tailwind'].includes(item.data)) { if (
['helper', 'directive', 'variant', 'layer', '@tailwind'].includes(item.data)
) {
return item return item
} }