Incorrect syntax highlighting of `@plugin` directive with options

[EKliptus]

What version of VS Code are you using?

v1.98.2

What version of Tailwind CSS IntelliSense are you using?

v0.14.16

What version of Tailwind CSS are you using?

v4.1.2

What package manager are you using?

deno

What operating system are you using?

Windows

Tailwind config
No config file, just css as config

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
  prefix: "d-";
  themes: false;
};

VS Code settings

// ...
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classFunctions": ["tw", "clsx"],
// ...

I have my css file :

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
  prefix: "d-";
  themes: false;
}; /* <<<< this semi colon !!! ??? */ 

#container {
  font-family:
    Inter,
    Roboto,
    "Helvetica Neue",
    "Arial Nova",
    "Nimbus Sans",
    Arial,
    sans-serif;
  height: 100%;
}

....

Why this semicolon is required after a bracket bloc ?
All formatters delete it !? dprint, biome, prettier, ...
Because when this semicolon is not present after a @plugin "plugin-name" { <with bloc> } all code highlighting after the block is incoherent.
malva team used by dprint for css formatting say this semicolon isn't required ? Source : g-plane/malva#28 (comment)

What about ? For now I try many formatter with tailwindcss v4+ and all isn't support v4 !?? Which is the best formatter for tailwindcss files please ???

[LEstradioto]

I was about to open the exactly same issue, but found this!

I have the same dillema:
Adding a semicolon fixes syntax highlighting but triggers a compiler error Error: Unexpected semicolon
while removing it fixes the error but breaks highlighting.

some related discussions: tailwindlabs/tailwindcss#16964 and reddit discussion

[LEstradioto]

found an ugly workaround to maintain highlighting+compiling:

@import 'tailwindcss';

@plugin 'daisyui' {
  themes: all;
}

/*;*/

body {
  @apply bg-gray-100;
}

see the commented semicolon

[EKliptus]

I have the same dillema: Adding a semicolon fixes syntax highlighting but triggers a compiler error Error: Unexpected semicolon while removing it fixes the error but breaks highlighting.

Yess me too, astro build fail because : [@tailwindcss/vite:generate:build] Unexpected semicolon

[EKliptus]

found an ugly workaround to maintain highlighting+compiling:

@import 'tailwindcss';

@plugin 'daisyui' {
themes: all;
}

/;/

body {
@apply bg-gray-100;
}

see the commented semicolon

Ugly but works fine for now ! Thanks

[bin16]

Same issue, see screenshots:

With semicolon:

Highlight looks nice, but error:

[plugin:@tailwindcss/vite:generate:serve] Unexpected semicolon

Without semicolon:

No errors, but highlight is broken.

[bin16]

found an ugly workaround to maintain highlighting+compiling:
@import 'tailwindcss';
@plugin 'daisyui' {
themes: all;
}
/;/
body {
@apply bg-gray-100;
}
see the commented semicolon

Ugly but works fine for now ! Thanks

Well, markdown, guess you mean /* ; */, it works, thanks.

[thecrypticace]

The semicolon is not necessary. I'll have to adjust our syntax highlighting setup to handle this. I thought it would've already but apparently not.

We've got a number of issues related to syntax highlighting that I need to address.

[EKliptus]

In complement details about this highlighting issue :
The workaround /*;*/ work for all code outside the bloc of @plugin "xx" { /* this bloc */ }.
In all case the highlighting in the bloc of @plugindirective fail on mainy ligne.
To test with example, tou can Generate daisyUI theme with : https://daisyui.com/theme-generator/ and paste...

[thecrypticace]

I'll get a fix out for this tomorrow 👍