fix(parse/html/vue): reject whitespace before vue directive arguments #8178

dyc3 · 2025-11-20T14:38:04Z

Summary

This makes the parser reject trivia between v-foo and : in vue directives.

It does this by inspecting p.source().trivia_list to check for trivia.

It was suggested to use relexing for this use case, but I chose not to for a couple reasons.

I don't want to actually change what these tokens are lexed as.
The token source skips over whitespace tokens, so I would probably end up just having to do something like this anyway.

fixes #8174

Test Plan

added tests

Docs

changeset-bot · 2025-11-20T14:38:08Z

🦋 Changeset detected

Latest commit: e57fdd9

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

This PR includes changesets to release 13 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

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

coderabbitai · 2025-11-20T14:44:22Z

Walkthrough

This PR fixes Vue directive parsing in the HTML formatter and parser. When a Vue directive like v-else is followed by whitespace and then a property binding (e.g. :property="123"), the parser now correctly recognises them as two separate directives rather than attempting to parse them as a single combined directive. The fix detects trivia between the directive name and colon, completing the directive early and returning control. Includes a changeset entry, test specs, and parser logic modifications.

Possibly related PRs

biomejs/biome\fix(parse/html/vue): fix modifier list parser aggressively parsing tokens it shouldn't #8084: Also modifies Vue directive parsing logic in crates/biome_html_parser/src/syntax/vue.rs to prevent incorrect consumption of adjacent attributes, using a complementary approach for dot modifiers.

Suggested reviewers

ematipico

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change: preventing whitespace before Vue directive arguments by rejecting trivia between directive names and colons.
Description check	✅ Passed	The description clearly explains the motivation, implementation approach, reasoning for design decisions, and references the fixed issue #8174.
Linked Issues check	✅ Passed	The PR addresses issue #8174 by implementing parser changes to reject whitespace between Vue directive names and arguments, preventing incorrect merging of separate directives.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing Vue directive parsing: parser logic, test specs for both parser and formatter, and a changeset entry—all directly addressing the issue.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch dyc3/vue-directive-whitespace

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0c8349e and e57fdd9.

⛔ Files ignored due to path filters (2)

crates/biome_html_formatter/tests/specs/html/vue/issue-8174.vue.snap is excluded by !**/*.snap and included by **
crates/biome_html_parser/tests/html_specs/ok/vue/issue-8174.vue.snap is excluded by !**/*.snap and included by **

📒 Files selected for processing (4)

.changeset/dry-cooks-start.md (1 hunks)
crates/biome_html_formatter/tests/specs/html/vue/issue-8174.vue (1 hunks)
crates/biome_html_parser/src/syntax/vue.rs (1 hunks)
crates/biome_html_parser/tests/html_specs/ok/vue/issue-8174.vue (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

GitHub Check: Test (depot-windows-2022-16)
GitHub Check: Check Dependencies
GitHub Check: Test (depot-ubuntu-24.04-arm-16)
GitHub Check: Lint project (depot-windows-2022)
GitHub Check: Test Node.js API
GitHub Check: autofix

🔇 Additional comments (4)

crates/biome_html_formatter/tests/specs/html/vue/issue-8174.vue (1)

1-2: Perfect test case!

Concise and directly validates the fix for the whitespace handling between v-else and :property.

crates/biome_html_parser/tests/html_specs/ok/vue/issue-8174.vue (1)

1-2: LGTM!

Mirrors the formatter test appropriately to validate parser behaviour.

.changeset/dry-cooks-start.md (1)

1-10: Clear documentation!

The changeset effectively explains the fix with a helpful before/after example.

crates/biome_html_parser/src/syntax/vue.rs (1)

22-33: The trivia detection logic is sound.

Based on the codebase, trivia_list is a Vec<Trivia> that accumulates trivia incrementally during lexing, not a monolithic collection containing the entire source. When you call .last(), you get the most recently lexed trivia entry. Since the parser has just moved from pos (directive name start) to the colon, that last trivia is guaranteed to be within that range. The checkpoint/rewind mechanism further ensures stale entries are truncated. The condition pos < last_trivia.text_range().start() correctly identifies trivia between the directive name and colon—no risk of false positives from distant trivia.

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

Provide your own instructions using the high_level_summary_instructions setting.
Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

📝 Description — Summarize the main change in 50–60 words, explaining what was done.

📓 References — List relevant issues, discussions, documentation, or related PRs.

📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.

📊 Contributor Summary — Include a Markdown table showing contributions:
| Contributor | Lines Added | Lines Removed | Files Changed |

✔️ Additional Notes — Add any extra reviewer context.
Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

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

…biomejs#8178)

fix(parse/html/vue): reject whitespace before vue directive arguments

e57fdd9

github-actions bot added A-Parser Area: parser A-Formatter Area: formatter L-HTML Language: HTML and super languages labels Nov 20, 2025

dyc3 marked this pull request as ready for review November 20, 2025 14:41

ematipico approved these changes Nov 20, 2025

View reviewed changes

dyc3 added this pull request to the merge queue Nov 20, 2025

Merged via the queue into main with commit 6ba4157 Nov 20, 2025
13 checks passed

dyc3 deleted the dyc3/vue-directive-whitespace branch November 20, 2025 14:53

github-actions bot mentioned this pull request Nov 20, 2025

ci: release #8161

Merged

ryan-m-walker pushed a commit to ryan-m-walker/biome that referenced this pull request Nov 23, 2025

fix(parse/html/vue): reject whitespace before vue directive arguments (…

ab065ed

…biomejs#8178)

This was referenced Nov 24, 2025

fix(parse/html/vue): fix lexing of event handlers with : in them #8219

Merged

feat(parse/html/vue): parse v-slot shorthand syntax #8226

Merged

fix(parse/html/vue): emit diagnostics for invalid vue shorthand syntaxes #8242

Merged

l0ngvh pushed a commit to l0ngvh/biome that referenced this pull request Dec 21, 2025

fix(parse/html/vue): reject whitespace before vue directive arguments (…

32fc557

…biomejs#8178)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(parse/html/vue): reject whitespace before vue directive arguments #8178

fix(parse/html/vue): reject whitespace before vue directive arguments #8178

Uh oh!

dyc3 commented Nov 20, 2025

Uh oh!

changeset-bot bot commented Nov 20, 2025

Uh oh!

coderabbitai bot commented Nov 20, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

fix(parse/html/vue): reject whitespace before vue directive arguments #8178

fix(parse/html/vue): reject whitespace before vue directive arguments #8178

Uh oh!

Conversation

dyc3 commented Nov 20, 2025

Summary

Test Plan

Docs

Uh oh!

changeset-bot bot commented Nov 20, 2025

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Nov 20, 2025

Walkthrough

Possibly related PRs

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants