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

diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index 3c77de0404ea2a9d22ccb8a3f9b237779ba6ce59..066ae6a2d2405d18f0bc7681c93cd19325890cf7 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
@@ -14,6 +14,7 @@ import { isHtmlContext } from '../util/html'
 import { isCssContext } from '../util/css'
 import { findLast, findJsxStrings, arrFindLast } from '../util/find'
 import { stringifyConfigValue, stringifyCss } from '../util/stringify'
+import { stringifyScreen, Screen } from '../util/screens'
 import isObject from '../util/isObject'
 import * as emmetHelper from 'emmet-helper'
 import { isValidLocationForEmmetAbbreviation } from '../util/isValidLocationForEmmetAbbreviation'
@@ -380,6 +381,7 @@     isIncomplete: false,
     items: Object.keys(screens).map((screen) => ({
       label: screen,
       kind: CompletionItemKind.Constant,
+      data: 'screen',
       textEdit: {
         newText: screen,
         range: {
@@ -564,11 +566,18 @@ export function resolveCompletionItem(
   state: State,
   item: CompletionItem
 ): CompletionItem {
-  if (
-    item.data === 'helper' ||
-    item.data === 'directive' ||
-    item.data === 'variant'
-  ) {
+  if (['helper', 'directive', 'variant'].includes(item.data)) {
+    return item
+  }
+
+  if (item.data === 'screen') {
+    let screens = dlv(
+      state.config,
+      ['theme', 'screens'],
+      dlv(state.config, ['screens'], {})
+    )
+    if (!isObject(screens)) screens = {}
+    item.detail = stringifyScreen(screens[item.label] as Screen)
     return item
   }
 

 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

diff --git a/packages/tailwindcss-language-server/src/util/screens.ts b/packages/tailwindcss-language-server/src/util/screens.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2b029b25a522f3fb6b587e7301a51355dfe0d6e5
--- /dev/null
+++ b/packages/tailwindcss-language-server/src/util/screens.ts
@@ -0,0 +1,35 @@
+import isObject from './isObject'
+
+export type MinMaxScreen = {
+  min?: string
+  max?: string
+}
+
+export type RawScreen = {
+  raw: string
+}
+
+export type Screen = string | RawScreen | MinMaxScreen | MinMaxScreen[]
+
+function isRawScreen(screen: unknown): screen is RawScreen {
+  return isObject(screen) && (screen as RawScreen).raw !== undefined
+}
+
+export function stringifyScreen(screen: Screen): string {
+  if (!screen) return
+  if (typeof screen === 'string') return `@media (min-width: ${screen})`
+  if (isRawScreen(screen)) {
+    return `@media ${(screen as RawScreen).raw}`
+  }
+  let str = (Array.isArray(screen) ? screen : [screen])
+    .map((range) => {
+      return [
+        typeof range.min === 'string' ? `(min-width: ${range.min})` : null,
+        typeof range.max === 'string' ? `(max-width: ${range.max})` : null,
+      ]
+        .filter(Boolean)
+        .join(' and ')
+    })
+    .join(', ')
+  return str ? `@media ${str}` : undefined
+}