1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

diff --git a/packages/tailwindcss-class-names/src/getVariants.js b/packages/tailwindcss-class-names/src/getVariants.js
index 21cd1f331252668c66c9d6aecd9faa1332f3fce1..0e3517b3c880f107cb70650027fb7f4fb4c28104 100644
--- a/packages/tailwindcss-class-names/src/getVariants.js
+++ b/packages/tailwindcss-class-names/src/getVariants.js
@@ -6,6 +6,7 @@   let variants = ['responsive', 'hover']
   semver.gte(version, '0.3.0') && variants.push('focus', 'group-hover')
   semver.gte(version, '0.5.0') && variants.push('active')
   semver.gte(version, '0.7.0') && variants.push('focus-within')
+  semver.gte(version, '1.0.0-beta.1') && variants.push('default')
   semver.gte(version, '1.1.0') &&
     variants.push('first', 'last', 'odd', 'even', 'disabled', 'visited')
 
@@ -13,22 +14,22 @@   let plugins = config.plugins
   if (!Array.isArray(plugins)) {
     plugins = []
   }
-  plugins.forEach(plugin => {
+  plugins.forEach((plugin) => {
     try {
       ;(plugin.handler || plugin)({
         addUtilities: () => {},
         addComponents: () => {},
         addBase: () => {},
-        addVariant: name => {
+        addVariant: (name) => {
           variants.push(name)
         },
-        e: x => x,
-        prefix: x => x,
+        e: (x) => x,
+        prefix: (x) => x,
         theme: (path, defaultValue) =>
           dlv(config, `theme.${path}`, defaultValue),
         variants: () => [],
         config: (path, defaultValue) => dlv(config, path, defaultValue),
-        postcss
+        postcss,
       })
     } catch (_) {
       console.error(_)

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107

diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index f8815da0d320b56ab9fea3f76623e06b243ffe09..84c54c72463959fc711571a6c0c08b6845058f4f 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
@@ -286,6 +286,79 @@     }),
   }
 }
 
+function provideVariantsDirectiveCompletions(
+  state: State,
+  { position, textDocument }: CompletionParams
+): CompletionList {
+  let doc = state.editor.documents.get(textDocument.uri)
+
+  if (!isCssContext(doc, position)) {
+    return null
+  }
+
+  let text = doc.getText({
+    start: { line: position.line, character: 0 },
+    end: position,
+  })
+
+  const match = text.match(/^\s*@variants\s+(?<partial>[^}]*)$/i)
+
+  if (match === null) return null
+
+  const parts = match.groups.partial.split(/\s*,\s*/)
+
+  if (/\s+/.test(parts[parts.length - 1])) return null
+
+  // TODO: move this to tailwindcss-class-names?
+  let variants = dlv(
+    state.config,
+    ['variants'],
+    dlv(state.config, ['modules'], {})
+  )
+  if (!isObject(variants) && !Array.isArray(variants)) {
+    variants = []
+  }
+  let enabledVariants: string[]
+  if (Array.isArray(variants)) {
+    enabledVariants = variants
+  } else {
+    const uniqueVariants: Set<string> = new Set()
+    for (const mod in variants) {
+      if (!Array.isArray(variants[mod])) continue
+      variants[mod].forEach((v: string) => uniqueVariants.add(v))
+    }
+    enabledVariants = [...uniqueVariants]
+  }
+
+  enabledVariants = state.variants.filter(
+    (x) => enabledVariants.indexOf(x) !== -1 || x === 'default'
+  )
+
+  const existingVariants = parts.slice(0, parts.length - 1)
+
+  return {
+    isIncomplete: false,
+    items: enabledVariants
+      .filter((v) => existingVariants.indexOf(v) === -1)
+      .map((variant) => ({
+        // TODO: detail
+        label: variant,
+        kind: CompletionItemKind.Constant,
+        data: 'variant',
+        textEdit: {
+          newText: variant,
+          range: {
+            start: {
+              line: position.line,
+              character: position.character - parts[parts.length - 1].length,
+            },
+            end: position,
+          },
+        },
+      })),
+  }
+}
+
 function provideScreenDirectiveCompletions(
   state: State,
   { position, textDocument }: CompletionParams
@@ -424,7 +497,8 @@   return (
     provideClassNameCompletions(state, params) ||
     provideCssHelperCompletions(state, params) ||
     provideCssDirectiveCompletions(state, params) ||
-    provideScreenDirectiveCompletions(state, params)
+    provideScreenDirectiveCompletions(state, params) ||
+    provideVariantsDirectiveCompletions(state, params)
   )
 }
 
@@ -432,7 +506,11 @@ export function resolveCompletionItem(
   state: State,
   item: CompletionItem
 ): CompletionItem {
-  if (item.data === 'helper' || item.data === 'directive') {
+  if (
+    item.data === 'helper' ||
+    item.data === 'directive' ||
+    item.data === 'variant'
+  ) {
     return item
   }