Update diagnostics and completions

Author: bradlc

packages/tailwindcss-language-service/src/completionProvider.ts

@@ -711,6 +711,10 @@ function provideVariantsDirectiveCompletions(
     return null
   }
 
+  if (semver.gte(state.version, '2.99.0')) {
+    return null
+  }
+
   let text = document.getText({
     start: { line: position.line, character: 0 },
     end: position,
@@ -862,32 +866,14 @@ function provideCssDirectiveCompletions(
       label: '@tailwind',
       documentation: {
         kind: 'markdown' as typeof MarkupKind.Markdown,
-        value: `Use the \`@tailwind\` directive to insert Tailwind’s \`base\`, \`components\`, \`utilities\` and \`screens\` styles into your CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
+        value: `Use the \`@tailwind\` directive to insert Tailwind’s \`base\`, \`components\`, \`utilities\` and \`${
+          state.jit && semver.gte(state.version, '2.1.99') ? 'variants' : 'screens'
+        }\` styles into your CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
           state.version,
           'functions-and-directives/#tailwind'
         )})`,
       },
     },
-    {
-      label: '@variants',
-      documentation: {
-        kind: 'markdown' as typeof MarkupKind.Markdown,
-        value: `You can generate \`responsive\`, \`hover\`, \`focus\`, \`active\`, and \`group-hover\` versions of your own utilities by wrapping their definitions in the \`@variants\` directive.\n\n[Tailwind CSS Documentation](${docsUrl(
-          state.version,
-          'functions-and-directives/#variants'
-        )})`,
-      },
-    },
-    {
-      label: '@responsive',
-      documentation: {
-        kind: 'markdown' as typeof MarkupKind.Markdown,
-        value: `You can generate responsive variants of your own classes by wrapping their definitions in the \`@responsive\` directive.\n\n[Tailwind CSS Documentation](${docsUrl(
-          state.version,
-          'functions-and-directives/#responsive'
-        )})`,
-      },
-    },
     {
       label: '@screen',
       documentation: {
@@ -922,6 +908,30 @@ function provideCssDirectiveCompletions(
           },
         ]
       : []),
+    ...(semver.gte(state.version, '2.99.0')
+      ? []
+      : [
+          {
+            label: '@variants',
+            documentation: {
+              kind: 'markdown' as typeof MarkupKind.Markdown,
+              value: `You can generate \`responsive\`, \`hover\`, \`focus\`, \`active\`, and other variants of your own utilities by wrapping their definitions in the \`@variants\` directive.\n\n[Tailwind CSS Documentation](${docsUrl(
+                state.version,
+                'functions-and-directives/#variants'
+              )})`,
+            },
+          },
+          {
+            label: '@responsive',
+            documentation: {
+              kind: 'markdown' as typeof MarkupKind.Markdown,
+              value: `You can generate responsive variants of your own classes by wrapping their definitions in the \`@responsive\` directive.\n\n[Tailwind CSS Documentation](${docsUrl(
+                state.version,
+                'functions-and-directives/#responsive'
+              )})`,
+            },
+          },
+        ]),
   ]
 
   return {

packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts

@@ -27,16 +27,26 @@ export function getInvalidTailwindDirectiveDiagnostics(
     ranges.push(...boundaries.css)
   }
 
+  let hasVariantsDirective = state.jit && semver.gte(state.version, '2.1.99')
+
   ranges.forEach((range) => {
     let text = document.getText(range)
     let matches = findAll(/(?:\s|^)@tailwind\s+(?<value>[^;]+)/g, text)
 
     let valid = [
       'utilities',
       'components',
-      state.jit && semver.gte(state.version, '2.1.99') ? 'variants' : 'screens',
+      'screens',
       semver.gte(state.version, '1.0.0-beta.1') ? 'base' : 'preflight',
-    ]
+      hasVariantsDirective && 'variants',
+    ].filter(Boolean)
+
+    let suggestable = valid
+
+    if (hasVariantsDirective) {
+      // Don't suggest `screens`, because it's deprecated
+      suggestable = suggestable.filter((value) => value !== 'screens')
+    }
 
     matches.forEach((match) => {
       if (valid.includes(match.groups.value)) {
@@ -49,11 +59,8 @@ export function getInvalidTailwindDirectiveDiagnostics(
       if (match.groups.value === 'preflight') {
         suggestions.push('base')
         message += ` Did you mean 'base'?`
-      } else if (match.groups.value === 'screens') {
-        suggestions.push('variants')
-        message += ` Did you mean 'variants'?`
       } else {
-        let suggestion = closest(match.groups.value, valid)
+        let suggestion = closest(match.groups.value, suggestable)
         if (suggestion) {
           suggestions.push(suggestion)
           message += ` Did you mean '${suggestion}'?`

packages/tailwindcss-language-service/src/diagnostics/getInvalidVariantDiagnostics.ts

@@ -6,7 +6,7 @@ import { getLanguageBoundaries } from '../util/getLanguageBoundaries'
 import { findAll, indexToPosition } from '../util/find'
 import { closest } from '../util/closest'
 import { absoluteRange } from '../util/absoluteRange'
-import dlv from 'dlv'
+import semver from 'semver'
 
 export function getInvalidVariantDiagnostics(
   state: State,
@@ -16,6 +16,10 @@ export function getInvalidVariantDiagnostics(
   let severity = settings.tailwindCSS.lint.invalidVariant
   if (severity === 'ignore') return []
 
+  if (semver.gte(state.version, '2.99.0')) {
+    return []
+  }
+
   let diagnostics: InvalidVariantDiagnostic[] = []
   let ranges: Range[] = []