filter @apply completions

src/class-names/extractClassNames.js

@@ -46,11 +46,12 @@ function getClassNamesFromSelector(selector) {
   return classNames
 }
 
-async function process(ast) {
+async function process(groups) {
   const tree = {}
   const commonContext = {}
 
-  ast.root.walkRules((rule) => {
+  groups.forEach((group) => {
+    group.root.walkRules((rule) => {
       const classNames = getClassNamesFromSelector(rule.selector)
 
       const decls = {}
@@ -110,6 +111,7 @@ async function process(ast) {
         }
         if (classNames[i].__rule) {
           dset(tree, [...baseKeys, ...index, '__rule'], true)
+          dset(tree, [...baseKeys, ...index, '__source'], group.source)
 
           dsetEach(tree, [...baseKeys, ...index], decls)
         }
@@ -140,6 +142,7 @@ async function process(ast) {
         }
       }
     })
+  })
 
   return { classNames: tree, context: commonContext }
 }

src/class-names/index.js

@@ -83,12 +83,12 @@ export default async function getClassNames(
     }
     hook.unwatch()
 
-    const ast = await postcss([tailwindcss(configPath)]).process(
+    const [components, utilities] = await Promise.all(
-      `
+      ['components', 'utilities'].map((group) =>
-        @tailwind components;
+        postcss([tailwindcss(configPath)]).process(`@tailwind ${group};`, {
-        @tailwind utilities;
+          from: undefined,
-      `,
+        })
-      { from: undefined }
+      )
     )
 
     hook.unhook()
@@ -111,7 +111,10 @@ export default async function getClassNames(
       configPath,
       config: resolvedConfig,
       separator: typeof userSeperator === 'undefined' ? ':' : userSeperator,
-      classNames: await extractClassNames(ast),
+      classNames: await extractClassNames([
+        { root: components.root, source: 'components' },
+        { root: utilities.root, source: 'utilities' },
+      ]),
       dependencies: hook.deps,
       plugins: getPlugins(config),
       variants: getVariants({ config, version, postcss, browserslist }),

src/lsp/providers/completionProvider.ts

@@ -28,7 +28,8 @@ import { ensureArray } from '../../util/array'
 function completionsFromClassList(
   state: State,
   classList: string,
-  classListRange: Range
+  classListRange: Range,
+  filter?: (item: CompletionItem) => boolean
 ): CompletionList {
   let classNames = classList.split(/[\s+]/)
   const partialClassName = classNames[classNames.length - 1]
@@ -68,8 +69,8 @@ function completionsFromClassList(
 
   return {
     isIncomplete: false,
-    items: Object.keys(isSubset ? subset : state.classNames.classNames).map(
+    items: Object.keys(isSubset ? subset : state.classNames.classNames)
-      (className, index) => {
+      .map((className, index) => {
         let label = className
         let kind: CompletionItemKind = CompletionItemKind.Constant
         let documentation: string = null
@@ -88,7 +89,7 @@ function completionsFromClassList(
           }
         }
 
-        return {
+        const item = {
           label,
           kind,
           documentation,
@@ -100,8 +101,14 @@ function completionsFromClassList(
             range: replacementRange,
           },
         }
+
+        if (filter && !filter(item)) {
+          return null
         }
-    ),
+
+        return item
+      })
+      .filter((item) => item !== null),
   }
 }
 
@@ -175,13 +182,29 @@ function provideAtApplyCompletions(
 
   const classList = match.groups.classList
 
-  return completionsFromClassList(state, classList, {
+  return completionsFromClassList(
+    state,
+    classList,
+    {
       start: {
         line: position.line,
         character: position.character - classList.length,
       },
       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
+      )
+    }
+  )
 }
 
 function provideClassNameCompletions(