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

diff --git a/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts b/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts
index 74e26f94fc326773188c26e959750033cd895519..307c1f4766b9bddb95ef989e12fc43c6691c6a01 100644
--- a/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts
+++ b/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts
@@ -8,6 +8,7 @@ import * as semver from '../util/semver'
 import { closest } from '../util/closest'
 import { absoluteRange } from '../util/absoluteRange'
 import { getTextWithoutComments } from '../util/doc'
+import { isSemicolonlessCssLanguage } from '../util/languages'
 
 export function getInvalidTailwindDirectiveDiagnostics(
   state: State,
@@ -28,13 +29,8 @@     if (!boundaries) return []
     ranges.push(...boundaries.filter((b) => b.type === 'css').map(({ range }) => range))
   }
 
-  let notSemicolonLanguages = ['sass', 'sugarss', 'stylus']
   let regex: RegExp
-  if (
-    notSemicolonLanguages.includes(document.languageId) ||
-    (state.editor &&
-      notSemicolonLanguages.includes(state.editor.userLanguages[document.languageId]))
-  ) {
+  if (isSemicolonlessCssLanguage(document.languageId, state.editor?.userLanguages)) {
     regex = /(?:\s|^)@tailwind\s+(?<value>[^\r\n]+)/g
   } else {
     regex = /(?:\s|^)@tailwind\s+(?<value>[^;]+)/g

 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

diff --git a/packages/tailwindcss-language-service/src/util/find.ts b/packages/tailwindcss-language-service/src/util/find.ts
index 50a7d8f7a93d6a150559c77bf00025ad6948b1ce..7d67cb850b24bf10ab0057c543fc3b129b305f38 100644
--- a/packages/tailwindcss-language-service/src/util/find.ts
+++ b/packages/tailwindcss-language-service/src/util/find.ts
@@ -11,6 +11,7 @@ import { getLanguageBoundaries } from './getLanguageBoundaries'
 import { resolveRange } from './resolveRange'
 import Regex from 'becke-ch--regex--s0-0-v1--base--pl--lib'
 import { getTextWithoutComments } from './doc'
+import { isSemicolonlessCssLanguage } from './languages'
 
 export function findAll(re: RegExp, str: string): RegExpMatchArray[] {
   let match: RegExpMatchArray
@@ -91,12 +92,16 @@     classLists.map((classList) => getClassNamesInClassList(classList, state.blocklist))
   )
 }
 
-export function findClassListsInCssRange(doc: TextDocument, range?: Range): DocumentClassList[] {
+export function findClassListsInCssRange(
+  state: State,
+  doc: TextDocument,
+  range?: Range
+): DocumentClassList[] {
   const text = getTextWithoutComments(doc, 'css', range)
-  const matches = findAll(
-    /(@apply\s+)(?<classList>[^;}]+?)(?<important>\s*!important)?\s*[;}]/g,
-    text
-  )
+  let regex = isSemicolonlessCssLanguage(doc.languageId, state.editor?.userLanguages)
+    ? /(@apply\s+)(?<classList>[^}\r\n]+?)(?<important>\s*!important)?(?:\r|\n|}|$)/g
+    : /(@apply\s+)(?<classList>[^;}]+?)(?<important>\s*!important)?\s*[;}]/g
+  const matches = findAll(regex, text)
   const globalStart: Position = range ? range.start : { line: 0, character: 0 }
 
   return matches.map((match) => {
@@ -292,7 +297,7 @@   includeCustom: boolean = true
 ): Promise<DocumentClassList[]> {
   let classLists: DocumentClassList[]
   if (mode === 'css') {
-    classLists = findClassListsInCssRange(doc, range)
+    classLists = findClassListsInCssRange(state, doc, range)
   } else {
     classLists = await findClassListsInHtmlRange(state, doc, mode, range)
   }
@@ -307,7 +312,7 @@   state: State,
   doc: TextDocument
 ): Promise<DocumentClassList[]> {
   if (isCssDoc(state, doc)) {
-    return findClassListsInCssRange(doc)
+    return findClassListsInCssRange(state, doc)
   }
 
   let boundaries = getLanguageBoundaries(state, doc)
@@ -324,7 +329,7 @@           )
       )),
       ...boundaries
         .filter((b) => b.type === 'css')
-        .map(({ range }) => findClassListsInCssRange(doc, range)),
+        .map(({ range }) => findClassListsInCssRange(state, doc, range)),
       await findCustomClassLists(state, doc),
     ])
   )

 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/packages/tailwindcss-language-service/src/util/languages.ts b/packages/tailwindcss-language-service/src/util/languages.ts
index 7548cf0b9de127902cac7b7f7f1091731722cc8c..565f7e1a63eefc242b18f3db35b41e7f67a24a89 100644
--- a/packages/tailwindcss-language-service/src/util/languages.ts
+++ b/packages/tailwindcss-language-service/src/util/languages.ts
@@ -1,3 +1,5 @@
+import type { EditorState } from './state'
+
 export const htmlLanguages = [
   'aspnetcorerazor',
   'astro',
@@ -57,3 +59,15 @@
 export const specialLanguages = ['vue', 'svelte']
 
 export const languages = [...cssLanguages, ...htmlLanguages, ...jsLanguages, ...specialLanguages]
+
+const semicolonlessLanguages = ['sass', 'sugarss', 'stylus']
+
+export function isSemicolonlessCssLanguage(
+  languageId: string,
+  userLanguages: EditorState['userLanguages'] = {}
+) {
+  return (
+    semicolonlessLanguages.includes(languageId) ||
+    semicolonlessLanguages.includes(userLanguages[languageId])
+  )
+}