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

diff --git a/src/class-names/index.js b/src/class-names/index.js
index 88dd419bf79cdbfdac24dab052d4386b4b173f2a..83a15b11a214b931a6e04f569b3d5da5295eda55 100644
--- a/src/class-names/index.js
+++ b/src/class-names/index.js
@@ -47,6 +47,7 @@     let postcss
     let tailwindcss
     let browserslistModule
     let version
+    let featureFlags = { future: [], experimental: [] }
 
     const configPaths = (
       await glob(CONFIG_GLOB, {
@@ -73,6 +74,10 @@
     try {
       // this is not required
       browserslistModule = importFrom(tailwindBase, 'browserslist')
+    } catch (_) {}
+
+    try {
+      featureFlags = importFrom(tailwindBase, './lib/featureFlags.js').default
     } catch (_) {}
 
     const sepLocation = semver.gte(version, '0.99.0')
@@ -152,6 +157,7 @@       modules: {
         tailwindcss,
         postcss,
       },
+      featureFlags,
     }
   }
 

 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

diff --git a/src/lsp/providers/completionProvider.ts b/src/lsp/providers/completionProvider.ts
index ec93d4449fe796128d72d2e9397e2cbd82ee828b..795127cc7c02bfbf8c198e44378cbd6f7cc9bedb 100644
--- a/src/lsp/providers/completionProvider.ts
+++ b/src/lsp/providers/completionProvider.ts
@@ -28,6 +28,8 @@ import {
   getClassAttributeLexer,
   getComputedClassAttributeLexer,
 } from '../util/lexers'
+import { validateApply } from '../util/validateApply'
+import { flagEnabled } from '../util/flagEnabled'
 
 function completionsFromClassList(
   state: State,
@@ -193,16 +195,11 @@       },
       end: position,
     },
     (item) => {
-      // TODO: first line excludes all subtrees but there could _technically_ be
-      // valid apply-able class names in there. Will be correct in 99% of cases
-      if (item.kind === CompletionItemKind.Module) return false
-      let info = dlv(state.classNames.classNames, item.data)
-      return (
-        !Array.isArray(info) &&
-        info.__source === 'utilities' &&
-        info.__context.length === 0 &&
-        info.__pseudo.length === 0
-      )
+      if (item.kind === CompletionItemKind.Module) {
+        return flagEnabled(state, 'applyComplexClasses')
+      }
+      let validated = validateApply(state, item.data)
+      return validated !== null && validated.isApplyable === true
     }
   )
 }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

diff --git a/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts b/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts
index e829b5735e74900f08d5d7161c5d561eebd7b89f..0f11ca465a3e204ec89c2a504a42517ba938e28c 100644
--- a/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts
+++ b/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts
@@ -3,6 +3,7 @@ import { InvalidApplyDiagnostic, DiagnosticKind } from './types'
 import { Settings, State } from '../../util/state'
 import { TextDocument, DiagnosticSeverity } from 'vscode-languageserver'
 import { validateApply } from '../../util/validateApply'
+import { flagEnabled } from '../../util/flagEnabled'
 
 export function getInvalidApplyDiagnostics(
   state: State,
@@ -11,6 +12,7 @@   settings: Settings
 ): InvalidApplyDiagnostic[] {
   let severity = settings.lint.invalidApply
   if (severity === 'ignore') return []
+  if (flagEnabled(state, 'applyComplexClasses')) return []
 
   const classNames = findClassNamesInRange(document, undefined, 'css')
 

 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

diff --git a/src/lsp/util/flagEnabled.ts b/src/lsp/util/flagEnabled.ts
new file mode 100644
index 0000000000000000000000000000000000000000..51332c1a45f6a3ed54c7b43cf30dd264c40e4f41
--- /dev/null
+++ b/src/lsp/util/flagEnabled.ts
@@ -0,0 +1,20 @@
+import { State } from './state'
+const dlv = require('dlv')
+
+export function flagEnabled(state: State, flag: string) {
+  if (state.featureFlags.future.includes(flag)) {
+    return (
+      state.config.future === 'all' ||
+      dlv(state.config, ['future', flag], false)
+    )
+  }
+
+  if (state.featureFlags.experimental.includes(flag)) {
+    return (
+      state.config.experimental === 'all' ||
+      dlv(state.config, ['experimental', flag], false)
+    )
+  }
+
+  return false
+}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

diff --git a/src/lsp/util/state.ts b/src/lsp/util/state.ts
index 09a02006721913e72c3a576ee1c30f997476c6b5..47b976d397b70e7ac0e0d26a42ee76cb54f40374 100644
--- a/src/lsp/util/state.ts
+++ b/src/lsp/util/state.ts
@@ -57,6 +57,7 @@   plugins?: any[]
   variants?: string[]
   classNames?: ClassNames
   dependencies?: string[]
+  featureFlags?: { future: string[]; experimental: string[] }
   editor?: EditorState
   error?: Error
 }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

diff --git a/src/lsp/util/validateApply.ts b/src/lsp/util/validateApply.ts
index 52f2b2c432fc5d85f448a1e9560683dc75a5bfed..5a17956593549d6cf08c281ad4a43afd1faf3fdc 100644
--- a/src/lsp/util/validateApply.ts
+++ b/src/lsp/util/validateApply.ts
@@ -1,5 +1,6 @@
 import { State } from './state'
 import { getClassNameMeta } from './getClassNameMeta'
+import { flagEnabled } from './flagEnabled'
 
 export function validateApply(
   state: State,
@@ -7,6 +8,10 @@   classNameOrParts: string | string[]
 ): { isApplyable: true } | { isApplyable: false; reason: string } | null {
   const meta = getClassNameMeta(state, classNameOrParts)
   if (!meta) return null
+
+  if (flagEnabled(state, 'applyComplexClasses')) {
+    return { isApplyable: true }
+  }
 
   const className = Array.isArray(classNameOrParts)
     ? classNameOrParts.join(state.separator)