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

diff --git a/src/extension.ts b/src/extension.ts
index 2601445166499b800b0a3b452dfcd5b63d73cde5..99d162933ee803a16a26301169a5628508dd54a0 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -674,6 +674,14 @@         }
       )
     )
 
+    // @screen
+    this._providers.push(
+      createScreenCompletionItemProvider({
+        config: tailwind.config,
+        languages: [...CSS_TYPES, 'postcss', 'vue']
+      })
+    )
+
     this._disposable = vscode.Disposable.from(...this._providers)
   }
 
@@ -732,3 +740,51 @@   } catch (err) {
     return
   }
 }
+
+function createScreenCompletionItemProvider({
+  languages,
+  config
+}): vscode.Disposable {
+  return vscode.languages.registerCompletionItemProvider(
+    languages,
+    {
+      provideCompletionItems: (
+        document: vscode.TextDocument,
+        position: vscode.Position
+      ): vscode.CompletionItem[] => {
+        let range: vscode.Range = new vscode.Range(
+          new vscode.Position(0, 0),
+          position
+        )
+        let text: string = document.getText(range)
+
+        if (
+          document.languageId === 'vue' &&
+          !(text.indexOf('<style') !== -1 && text.indexOf('</style>') === -1)
+        )
+          return []
+
+        let line = text.split(/[\n\r]/).pop()
+
+        if (/@screen $/.test(line)) {
+          return Object.keys(dlv(config, 'screens', {})).map((screen, i) => {
+            let item = new vscode.CompletionItem(
+              screen,
+              vscode.CompletionItemKind.Constant
+            )
+            item.insertText = new vscode.SnippetString(`${screen} {\n\t$0\n}`)
+            item.detail =
+              typeof config.screens[screen] === 'string'
+                ? config.screens[screen]
+                : ''
+            item.sortText = naturalExpand(i.toString())
+            return item
+          })
+        }
+
+        return []
+      }
+    },
+    ' '
+  )
+}