Exclude classes in blocklist from IntelliSense (#746)

Author: bradlc

packages/tailwindcss-language-server/src/server.ts

@@ -1016,6 +1016,8 @@ async function createProjectService(
     try {
       state.config = resolveConfig.module(originalConfig)
       state.separator = state.config.separator
+      state.blocklist = Array.isArray(state.config.blocklist) ? state.config.blocklist : []
+      delete state.config.blocklist
 
       if (state.jit) {
         state.jitContext = state.modules.jit.createContext.module(state)

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

@@ -242,21 +242,29 @@ export function completionsFromClassList(
         {
           isIncomplete: false,
           items: items.concat(
-            state.classList.map(([className, { color }], index) => {
+            state.classList.reduce<CompletionItem[]>((items, [className, { color }], index) => {
+              if (
+                state.blocklist?.includes([...existingVariants, className].join(state.separator))
+              ) {
+                return items
+              }
+
               let kind: CompletionItemKind = color ? 16 : 21
               let documentation: string | undefined
 
               if (color && typeof color !== 'string') {
                 documentation = culori.formatRgb(color)
               }
 
-              return {
+              items.push({
                 label: className,
                 kind,
                 ...(documentation ? { documentation } : {}),
                 sortText: naturalExpand(index, state.classList.length),
-              } as CompletionItem
-            })
+              })
+
+              return items
+            }, [] as CompletionItem[])
           ),
         },
         {

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

@@ -20,7 +20,7 @@ export async function getCssConflictDiagnostics(
   const classLists = await findClassListsInDocument(state, document)
 
   classLists.forEach((classList) => {
-    const classNames = getClassNamesInClassList(classList)
+    const classNames = getClassNamesInClassList(classList, state.blocklist)
 
     classNames.forEach((className, index) => {
       if (state.jit) {

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

@@ -23,7 +23,7 @@ export async function getRecommendedVariantOrderDiagnostics(
   const classLists = await findClassListsInDocument(state, document)
 
   classLists.forEach((classList) => {
-    const classNames = getClassNamesInClassList(classList)
+    const classNames = getClassNamesInClassList(classList, state.blocklist)
     classNames.forEach((className) => {
       let { rules } = jit.generateRules(state, [className.className])
       if (rules.length === 0) {

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

@@ -22,7 +22,7 @@ export async function getDocumentColors(
 
   let classLists = await findClassListsInDocument(state, document)
   classLists.forEach((classList) => {
-    let classNames = getClassNamesInClassList(classList)
+    let classNames = getClassNamesInClassList(classList, state.blocklist)
     classNames.forEach((className) => {
       let color = getColor(state, className.className)
       if (color === null || typeof color === 'string' || (color.alpha ?? 1) === 0) {

packages/tailwindcss-language-service/src/util/find.ts

@@ -29,16 +29,15 @@ export function findLast(re: RegExp, str: string): RegExpMatchArray {
   return matches[matches.length - 1]
 }
 
-export function getClassNamesInClassList({
-  classList,
-  range,
-  important,
-}: DocumentClassList): DocumentClassName[] {
+export function getClassNamesInClassList(
+  { classList, range, important }: DocumentClassList,
+  blocklist: State['blocklist']
+): DocumentClassName[] {
   const parts = classList.split(/(\s+)/)
   const names: DocumentClassName[] = []
   let index = 0
   for (let i = 0; i < parts.length; i++) {
-    if (i % 2 === 0) {
+    if (i % 2 === 0 && !blocklist.includes(parts[i])) {
       const start = indexToPosition(classList, index)
       const end = indexToPosition(classList, index + parts[i].length)
       names.push({
@@ -77,15 +76,19 @@ export async function findClassNamesInRange(
   includeCustom: boolean = true
 ): Promise<DocumentClassName[]> {
   const classLists = await findClassListsInRange(state, doc, range, mode, includeCustom)
-  return flatten(classLists.map(getClassNamesInClassList))
+  return flatten(
+    classLists.map((classList) => getClassNamesInClassList(classList, state.blocklist))
+  )
 }
 
 export async function findClassNamesInDocument(
   state: State,
   doc: TextDocument
 ): Promise<DocumentClassName[]> {
   const classLists = await findClassListsInDocument(state, doc)
-  return flatten(classLists.map(getClassNamesInClassList))
+  return flatten(
+    classLists.map((classList) => getClassNamesInClassList(classList, state.blocklist))
+  )
 }
 
 export function findClassListsInCssRange(doc: TextDocument, range?: Range): DocumentClassList[] {

packages/tailwindcss-language-service/src/util/state.ts

@@ -99,6 +99,7 @@ export interface State {
   screens?: string[]
   variants?: Variant[]
   corePlugins?: string[]
+  blocklist?: unknown[]
   modules?: {
     tailwindcss?: { version: string; module: any }
     postcss?: { version: string; module: Postcss }