🐛 CSS parser with tailwindDirectives does not parse @plugin w/ parameters, biome 1.3.0 #7860
Description
Environment information
> [email protected] biome /home/user/project/packages/react
> biome rage
CLI:
Version: 2.3.0
Color support: true
Platform:
CPU Architecture: x86_64
OS: linux
Environment:
BIOME_LOG_PATH: unset
BIOME_LOG_PREFIX_NAME: unset
BIOME_CONFIG_PATH: unset
BIOME_THREADS: unset
NO_COLOR: unset
TERM: xterm-256color
JS_RUNTIME_VERSION: v24.10.0
JS_RUNTIME_NAME: node
NODE_PACKAGE_MANAGER: pnpm/10.19.0
Biome Configuration:
Status: Loaded successfully
Path: /home/user/project/biome.jsonc
Formatter enabled: true
Linter enabled: true
Assist enabled: true
VCS enabled: false
Workspace:
Open Documents: 0
What happened?
After upgrading from 1.2.7 -> 1.3.0 and adding css.parser.tailwindDirectives, existing Tailwind CSS v4 @plugin code isn't parsed by biome.
Support for @plugin w/ params existing in Tailwind CSS v4
It's practically undocumented. No consensus.
- https://tailwindcss.com/docs/functions-and-directives#plugin-directive
- How can I pass parameters to a TailwindCSS plugin in a CSS-first configuration? tailwindlabs/tailwindcss#15997
It's tested in the codebase itself:
-
@plugin '@tailwindcss/forms' { strategy: base; }
-
@plugin '../custom-plugin' { is-null: null; is-true: true; is-false: false; is-int: 1234567; is-float: 1.35; is-sci: 0.0000135; is-str-null: 'null'; is-str-true: 'true'; is-str-false: 'false'; is-str-int: '1234567'; is-str-float: '1.35'; is-str-sci: '1.35e-5'; is-arr: 'foo', 'bar'; is-arr-mixed: null, true, false, 1234567, 1.35, 'foo', 'bar', 'true'; }
Example on Biome Playground
Example
@plugin "my-tailwind-plugin" {
--my-variable: "Favorite variable";
}Console output
/main.css:2:30 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ expected `;` but instead found `{`
1 │ /* Example 3: Only JavaScript with minimal shades for performance */
> 2 │ @plugin "my-tailwind-plugin" {
│ ^
3 │ --my-variable: "Favorite variable";
4 │ }
ℹ Remove {
/main.css:3:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Unexpected value or character.
1 │ /* Example 3: Only JavaScript with minimal shades for performance */
2 │ @plugin "my-tailwind-plugin" {
> 3 │ --my-variable: "Favorite variable";
│ ^^^^^^^^^^^^^^^^^^^
4 │ }
ℹ Expected one of:
- hover
- focus
- active
- first-child
- last-child
- nth-child
- nth-last-child
- first-of-type
- last-of-type
- nth-of-type
- nth-last-of-type
- only-child
- only-of-type
- checked
- disabled
- enabled
- required
- optional
- valid
- invalid
- in-range
- out-of-range
- read-only
- read-write
- placeholder-shown
- default
- checked
- indeterminate
- blank
- empty
- root
- target
- lang
- not
- is
- where
- fullscreen
- link
- visited
- any-link
- local-link
- scope
- state
- current
- past
- future
/main.css:3:37 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ expected `,` but instead found `;`
1 │ /* Example 3: Only JavaScript with minimal shades for performance */
2 │ @plugin "my-tailwind-plugin" {
> 3 │ --my-variable: "Favorite variable";
│ ^
4 │ }
ℹ Remove ;
Similar TailwindCSS v4 CSS configuration errors introduced in 1.3.0
- 🐛 CSS parser with
tailwindDirectivesdoes not parse@source inline();#7854 - 🐛 Tailwind path ignore syntax causes a parsing error #7848
Expected result
TailwindCSS v4 @plugin directives should parameters the same as it did in 1.2.7.
Code of Conduct
- I agree to follow Biome's Code of Conduct