fix(parse/css): parse tailwind `@utility` with slash in the name by dyc3 · Pull Request #9043 · biomejs/biome

dyc3 · 2026-02-12T16:02:26Z

Summary

Allows the css parser to parse @utility a/b {}.

fixes #8897

Test Plan

snapshots

Docs

changeset-bot · 2026-02-12T16:02:42Z

🦋 Changeset detected

Latest commit: b6f8a3d

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

codspeed-hq · 2026-02-12T16:09:58Z

Merging this PR will not alter performance

✅ 29 untouched benchmarks
⏩ 187 skipped benchmarks¹

_{Comparing dyc3/tw-slash-utility-name (b6f8a3d) with main (f2581b8)²}

187 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. ↩
No successful run was found on main (725e6bb) during the generation of this report, so f2581b8 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

crates/biome_css_parser/src/lexer/mod.rs

coderabbitai · 2026-02-22T17:04:26Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d107b5c2-01e5-44f7-8a40-0f9bb00eab80

📥 Commits

Reviewing files that changed from the base of the PR and between 51d7636 and b6f8a3d.

⛔ Files ignored due to path filters (2)

crates/biome_css_parser/tests/css_test_suite/error/tailwind/when-disabled/utility-with-slash.css.snap is excluded by !**/*.snap and included by **
crates/biome_css_parser/tests/css_test_suite/ok/tailwind/utility/with-slash.css.snap is excluded by !**/*.snap and included by **

📒 Files selected for processing (5)

.changeset/fix-tailwind-utility-slash.md
crates/biome_css_parser/src/lexer/mod.rs
crates/biome_css_parser/src/syntax/at_rule/tailwind.rs
crates/biome_css_parser/tests/css_test_suite/error/tailwind/when-disabled/utility-with-slash.css
crates/biome_css_parser/tests/css_test_suite/ok/tailwind/utility/with-slash.css

🚧 Files skipped from review as they are similar to previous changes (1)

crates/biome_css_parser/src/syntax/at_rule/tailwind.rs

Walkthrough

Adds support for Tailwind @utility names that include a forward slash by introducing a new lexical context TailwindUtilityName and threading an allow_slash flag through identifier-consumption routines in the CSS lexer. The at-rule parser now requests the Tailwind-specific lexing context for utility names. New tests cover ok and error cases for utility names containing /. A public lexer enum variant CssLexContext::TailwindUtilityName and new lexer methods for tailwind utility name consumption were added.

Possibly related PRs

fix(parse/css): fix parsing --*: initial; with tailwindDirectives enabled #7852 — Modifies CSS lexer identifier parsing and edge-case handling in lexer paths that overlap with this PR.
fix(parse/css): improve parsing of @utility names #8850 — Adjusts Tailwind at-rule name parsing and lexer context for wildcard/functional utility names; touches the same at-rule and lexer logic.

Suggested labels

L-Tailwind

Suggested reviewers

ematipico
siketyan

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: fixing CSS parser to handle Tailwind `@utility` directives with slashes in names.
Description check	✅ Passed	The description is directly related to the changeset, explaining the motivation (parsing `@utility` a/b), linking to issue `#8897`, and mentioning test snapshots.
Linked Issues check	✅ Passed	The PR fully addresses issue `#8897`'s objective by implementing lexer and parser changes to accept forward slashes in Tailwind `@utility` names, with appropriate test coverage.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the objective: lexer modifications for slash handling, parser context updates, and test files—no unrelated changes detected.

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

✨ Finishing Touches

📝 Generate docstrings (stacked PR)
📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch dyc3/tw-slash-utility-name

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

ematipico · 2026-03-09T17:19:23Z

@dyc3 should this PR be merged?

dyc3 · 2026-03-09T17:33:22Z

Ah, yes. Slipped through. I'll fix the ci

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@crates/biome_css_parser/src/lexer/mod.rs`:
- Around line 1098-1108: The lexer branch currently gates handling of sequences
like `--*` on self.options.is_tailwind_directives_enabled(), which makes token
emission option-dependent; remove that option check so the logic always runs:
whenever dispatched == MIN and peek_byte().map(lookup_byte) == Some(MUL) perform
the same handling — if prev_byte().map(lookup_byte) == Some(MIN) then call
advance(1) and return Some(current as char), otherwise return None — while
keeping the same uses of dispatched, MIN, MUL, peek_byte, prev_byte, advance,
and current so token emission no longer depends on
is_tailwind_directives_enabled().

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 069f830f-2d37-4c61-b60e-3edd57cfd92d

📥 Commits

Reviewing files that changed from the base of the PR and between 12f0722 and 51d7636.

📒 Files selected for processing (3)

.changeset/fix-tailwind-utility-slash.md
crates/biome_css_parser/src/lexer/mod.rs
crates/biome_css_parser/src/syntax/at_rule/tailwind.rs

🚧 Files skipped from review as they are similar to previous changes (2)

.changeset/fix-tailwind-utility-slash.md
crates/biome_css_parser/src/syntax/at_rule/tailwind.rs

coderabbitai · 2026-03-09T17:58:00Z

crates/biome_css_parser/src/lexer/mod.rs

        if self.options.is_tailwind_directives_enabled()
-            && current == b'-'
-            && self.peek_byte() == Some(b'*')
+            && dispatched == MIN
+            && self.peek_byte().map(lookup_byte) == Some(MUL)
        {
            // HACK: handle `--*`
-            if self.prev_byte() == Some(b'-') {
+            if self.prev_byte().map(lookup_byte) == Some(MIN) {
                self.advance(1);
                return Some(current as char);
            }
            // otherwise, handle cases like `--color-*`
            return None;


⚠️ Potential issue | 🟠 Major

Please don’t make lexer output depend on is_tailwind_directives_enabled().

This branch still tokenises the same bytes differently depending on a parser option. That’s a nasty way to make disabled-mode diagnostics go sideways.

Based on learnings: "In the Biome CSS parser, lexer token emission should not be gated behind parser options like is_tailwind_directives_enabled(). The lexer must emit correct tokens regardless of parser options to enable accurate diagnostics and error messages when the syntax is used incorrectly."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@crates/biome_css_parser/src/lexer/mod.rs` around lines 1098 - 1108, The lexer branch currently gates handling of sequences like `--*` on self.options.is_tailwind_directives_enabled(), which makes token emission option-dependent; remove that option check so the logic always runs: whenever dispatched == MIN and peek_byte().map(lookup_byte) == Some(MUL) perform the same handling — if prev_byte().map(lookup_byte) == Some(MIN) then call advance(1) and return Some(current as char), otherwise return None — while keeping the same uses of dispatched, MIN, MUL, peek_byte, prev_byte, advance, and current so token emission no longer depends on is_tailwind_directives_enabled().

github-actions bot added A-Parser Area: parser L-CSS Language: CSS and super languages labels Feb 12, 2026

ematipico approved these changes Feb 12, 2026

View reviewed changes

crates/biome_css_parser/src/lexer/mod.rs Outdated Show resolved Hide resolved

chansuke approved these changes Feb 15, 2026

View reviewed changes

dyc3 force-pushed the dyc3/tw-slash-utility-name branch from 1bfb213 to 12f0722 Compare February 22, 2026 17:00

dyc3 force-pushed the dyc3/tw-slash-utility-name branch from 12f0722 to 51d7636 Compare March 9, 2026 17:50

coderabbitai bot reviewed Mar 9, 2026

View reviewed changes

fix(parse/css): parse tailwind @utility with slash in the name

b6f8a3d

dyc3 force-pushed the dyc3/tw-slash-utility-name branch from 51d7636 to b6f8a3d Compare March 9, 2026 18:44

dyc3 merged commit 61e2a02 into main Mar 9, 2026
17 checks passed

dyc3 deleted the dyc3/tw-slash-utility-name branch March 9, 2026 19:07

github-actions bot mentioned this pull request Mar 9, 2026

ci: release #9346

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(parse/css): parse tailwind `@utility` with slash in the name#9043

fix(parse/css): parse tailwind `@utility` with slash in the name#9043
dyc3 merged 1 commit intomainfrom
dyc3/tw-slash-utility-name

dyc3 commented Feb 12, 2026

Uh oh!

changeset-bot bot commented Feb 12, 2026 •

edited

Loading

Uh oh!

codspeed-hq bot commented Feb 12, 2026 •

edited

Loading

Uh oh!

Uh oh!

coderabbitai bot commented Feb 22, 2026 •

edited

Loading

Uh oh!

ematipico commented Mar 9, 2026

Uh oh!

dyc3 commented Mar 9, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Mar 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

dyc3 commented Feb 12, 2026

Summary

Test Plan

Docs

Uh oh!

changeset-bot bot commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

codspeed-hq bot commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will not alter performance

Footnotes

Uh oh!

Uh oh!

coderabbitai bot commented Feb 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

ematipico commented Mar 9, 2026

Uh oh!

dyc3 commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Feb 12, 2026 •

edited

Loading

codspeed-hq bot commented Feb 12, 2026 •

edited

Loading

coderabbitai bot commented Feb 22, 2026 •

edited

Loading

dyc3 commented Mar 9, 2026 •

edited

Loading