From 9c60e0bfca40c0a92fc79ec999f7f7950f24d1e9 Mon Sep 17 00:00:00 2001 From: Brad Cornes Date: Fri, 27 Nov 2020 17:13:46 +0000 Subject: [PATCH] =?UTF-8?q?add=20@=E2=80=8Blayer=20completions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/completionProvider.ts | 58 ++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts index 5ebb40d..40f3dee 100644 --- a/packages/tailwindcss-language-service/src/completionProvider.ts +++ b/packages/tailwindcss-language-service/src/completionProvider.ts @@ -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+(?[^\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( state: State, 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 { @@ -779,6 +832,7 @@ export async function doComplete( provideScreenDirectiveCompletions(state, document, position) || provideVariantsDirectiveCompletions(state, document, position) || provideTailwindDirectiveCompletions(state, document, position) || + provideLayerDirectiveCompletions(state, document, position) || (await provideCustomClassNameCompletions(state, document, position)) if (result) return result @@ -790,7 +844,9 @@ export async function resolveCompletionItem( state: State, item: CompletionItem ): Promise { - if (['helper', 'directive', 'variant', '@tailwind'].includes(item.data)) { + if ( + ['helper', 'directive', 'variant', 'layer', '@tailwind'].includes(item.data) + ) { return item }