feat(parse/css): add support for vue's v-bind() function

[dyc3]

Summary

Adds support for Vue's v-bind() function in CSS.

Generated by gpt-5.2-codex

fixes #8692

Test Plan

added snapshots

Docs

[changeset-bot]

🦋 Changeset detected

Latest commit: badd49c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages

Name	Type
@biomejs/biome	Patch
@biomejs/cli-win32-x64	Patch
@biomejs/cli-win32-arm64	Patch
@biomejs/cli-darwin-x64	Patch
@biomejs/cli-darwin-arm64	Patch
@biomejs/cli-linux-x64	Patch
@biomejs/cli-linux-arm64	Patch
@biomejs/cli-linux-x64-musl	Patch
@biomejs/cli-linux-arm64-musl	Patch
@biomejs/wasm-web	Patch
@biomejs/wasm-bundler	Patch
@biomejs/wasm-nodejs	Patch
@biomejs/backend-jsonrpc	Patch
@biomejs/prettier-compare	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq]

CodSpeed Performance Report

Merging this PR will not alter performance

_{Comparing dyc3/css-vue-v-bind (badd49c) with next (fe81000)}

Summary

✅ 29 untouched benchmarks
⏩ 126 skipped benchmarks¹

Footnotes

1. 126 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[coderabbitai]

Walkthrough

Adds support for Vue's v-bind() CSS function when CSS Modules parsing for Vue SFCs is enabled. Implements a diagnostic helper for disallowed v-bind() usage, extends function detection and parsing to recognise v-bind(), updates the CssModules documentation comment, adds "v-bind" to recognised function keywords, and includes tests and a test config for enabled/disabled scenarios and CLI handling.

Possibly related PRs

• chore(core): add CSS variant information to the source file #8095 — Modifies wiring for CssVariant/CssFileSource → CssParserOptions to enable css_modules based on file source; directly related to enabling Vue-specific CSS Modules parsing paths.

Suggested labels

A-Tooling

Suggested reviewers

• ematipico
• chansuke
• arendjr

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and clearly summarises the main change: adding support for Vue's v-bind() function in CSS parsing.
Description check	✅ Passed	The description is directly related to the changeset, explaining the motivation and linking to the relevant issue #8692.
Linked Issues check	✅ Passed	The PR implements support for Vue's v-bind() CSS function as required by issue #8692, adding parsing logic, diagnostics, test cases, and keyword recognition.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing Vue v-bind() CSS support; no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[ematipico]

We might want to create a CLI test so we make sure it's correctly parsed and it doesn't raise diagnostics.

Also, update the branch, and the codspeed regressions should disappear

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@crates/biome_css_analyze/src/keywords.rs`:
- Around line 770-774: The FUNCTION_KEYWORDS array is intended to be sorted but
currently places "v-bind" after "var", which fails the sorted-order test because
the hyphen sorts before "a"; move "v-bind" so it appears before "var" in the
FUNCTION_KEYWORDS list (i.e., ensure "v-bind" comes immediately before "var") to
restore correct lexical ordering.

In `@crates/biome_css_parser/src/syntax/value/function.rs`:
- Around line 27-31: The Vue v-bind function check is currently case-sensitive
and should accept any ASCII-case variation; update the matcher used in
is_at_vue_v_bind_function (the function that detects the "v-bind" functional
token) to compare names with eq_ignore_ascii_case() instead of a plain equality
check so that tokens like "V-BIND()" are treated the same as "v-bind()" and
routed to the Vue-only diagnostic path (leave other checks like
is_at_url_function, is_at_if_function, is_at_attr_function, is_at_function
unchanged).

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

CSS specification function names case-insensitive CSS Syntax Values

💡 Result:

In the CSS specs, function names are (by default) ASCII case-insensitive for parsing/grammar matching.

• In CSS Syntax, the name of a <function-token> is the ident sequence before the (, and when matching tokens against the grammar, “Unless otherwise specified, all matches are ASCII case-insensitive.” This applies to function tokens as well as ident tokens generally. [1]
• The tokenizer also treats "url" in an ASCII case-insensitive way when determining whether url( starts a url-token vs a function-token. [2]

Exception rule: if a particular feature/spec explicitly says otherwise, it can be case-sensitive (e.g., CSS Syntax notes that custom property names are case-sensitive). [1]

Sources:
[1] CSS Syntax Module Level 3 (Token/grammar matching rule; custom property note) (w3.org)
[2] CSS Syntax Module Level 3 (ident-like token / url case-insensitive check) (w3.org)

Citations:

• 1: https://www.w3.org/TR/css-syntax-3/
• 2: https://www.w3.org/TR/css-syntax-3/

---

🏁 Script executed:

# First, let's examine the file and the specific lines mentioned
cat -n crates/biome_css_parser/src/syntax/value/function.rs | head -100

Repository: biomejs/biome

Length of output: 4490

---

Match v-bind case-insensitively.

CSS function names are case-insensitive per the CSS Syntax specification, so V-BIND() would currently bypass the Vue-only diagnostic path. The code uses a case-sensitive equality check where it should use eq_ignore_ascii_case().

🔧 Proposed fix

-    let is_v_bind = p.cur_text() == "v-bind";
+    let is_v_bind = p.cur_text().eq_ignore_ascii_case("v-bind");

🤖 Prompt for AI Agents

In `@crates/biome_css_parser/src/syntax/value/function.rs` around lines 27 - 31,
The Vue v-bind function check is currently case-sensitive and should accept any
ASCII-case variation; update the matcher used in is_at_vue_v_bind_function (the
function that detects the "v-bind" functional token) to compare names with
eq_ignore_ascii_case() instead of a plain equality check so that tokens like
"V-BIND()" are treated the same as "v-bind()" and routed to the Vue-only
diagnostic path (leave other checks like is_at_url_function, is_at_if_function,
is_at_attr_function, is_at_function unchanged).