From 9c60e0bfca40c0a92fc79ec999f7f7950f24d1e9 Mon Sep 17 00:00:00 2001
From: Brad Cornes <bradlc41@gmail.com>
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+(?<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(
   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<CompletionItem> {
-  if (['helper', 'directive', 'variant', '@tailwind'].includes(item.data)) {
+  if (
+    ['helper', 'directive', 'variant', 'layer', '@tailwind'].includes(item.data)
+  ) {
     return item
   }