feat(css): enhance SCSS qualified name detection

[denbezrukov]

Summary

Improved SCSS parsing consistency by reusing qualified-name lookahead logic.

  - allow module.function(...)
  - allow module.$variable
  - reject module.$function(...)

Support:

  .button {
    $self: &;
    #{$self}--primary { color: red; } // .button--primary
  }

Test Plan

• cargo test -p biome_css_parser
• cargo test -p biome_css_formatter

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9386363

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

Parser conformance results on

js/262

Test result	main count	This PR count	Difference
Total	52911	52911	0
Passed	51691	51691	0
Failed	1178	1178	0
Panics	42	42	0
Coverage	97.69%	97.69%	0.00%

jsx/babel

Test result	main count	This PR count	Difference
Total	38	38	0
Passed	37	37	0
Failed	1	1	0
Panics	0	0	0
Coverage	97.37%	97.37%	0.00%

markdown/commonmark

Test result	main count	This PR count	Difference
Total	652	652	0
Passed	652	652	0
Failed	0	0	0
Panics	0	0	0
Coverage	100.00%	100.00%	0.00%

symbols/microsoft

Test result	main count	This PR count	Difference
Total	5464	5464	0
Passed	1915	1915	0
Failed	3549	3549	0
Panics	0	0	0
Coverage	35.05%	35.05%	0.00%

ts/babel

Test result	main count	This PR count	Difference
Total	629	629	0
Passed	563	563	0
Failed	66	66	0
Panics	0	0	0
Coverage	89.51%	89.51%	0.00%

ts/microsoft

Test result	main count	This PR count	Difference
Total	18871	18871	0
Passed	13012	13012	0
Failed	5858	5858	0
Panics	1	1	0
Coverage	68.95%	68.95%	0.00%

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

Walkthrough

Adds parsing and formatting support for a new SCSS parent selector value (ScssParentSelectorValue, the & token). Parser: introduces detection and parsing functions and integrates the token into SCSS syntax kinds and value parsing flows. Formatter: wires the new node into formatting dispatch, adds a formatter module that writes the ampersand token, and exposes AsFormat/IntoFormat/FormatRule impls. Tests and codegen/kind mappings updated to cover the new token.

Possibly related PRs

• feat(scss): add basic SCSS declaration support and comments #8721: Similar changes adding SCSS-specific value variants and extending formatter/parser dispatch to handle them.

Suggested labels

L-SCSS

Suggested reviewers

• ematipico
• siketyan

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: enhanced SCSS qualified name detection is the core objective across parser, formatter, and grammar updates.
Description check	✅ Passed	The description is directly relevant, explaining the qualified-name lookahead improvements, pattern changes, and parent-selector support with clear examples and test instructions.

_{✏️ 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 db/scss-alias-values

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

crates/biome_css_parser/src/syntax/value/function.rs (1)

79-82: SCSS qualified function detection — n + 3 offset is intentional but worth a comment.

Per the PR objectives, module.function(...) should be allowed but module.$function(...) should be rejected. The n + 3 offset correctly matches only the ident.ident( form (3 tokens before the paren), intentionally excluding ident.$ident( (which would need n + 4). A brief inline comment would make this intent clearer to future readers.

📝 Suggested comment

     (is_nth_at_identifier(p, n) && p.nth_at(n + 1, T!['(']))
+        // Only match `module.function(`, not `module.$function(` — the latter is rejected.
         || (is_nth_at_scss_qualified_name(p, n) && p.nth_at(n + 3, T!['(']))

🤖 Prompt for AI Agents

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

In `@crates/biome_css_parser/src/syntax/value/function.rs` around lines 79 - 82,
In is_nth_at_function, add a concise inline comment explaining that the
(is_nth_at_scss_qualified_name(p, n) && p.nth_at(n + 3, T!['('])) branch
intentionally uses n + 3 to match the three-token form ident.ident( (i.e.,
module.function(...)) and thereby exclude forms like ident.$ident( which would
require n + 4); place the comment immediately before or on the same line as the
n + 3 check so future readers understand the choice.

🤖 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_formatter/tests/specs/css/scss/declaration/parent-and-colon-values.scss`:
- Around line 2-5: The test currently uses a literal parent selector with
"&--primary" but doesn't exercise the interpolation case; update the input to
use interpolated selector "#{$self}--primary" (keeping the same $self: &; and
the nested rule body) so the formatter test mirrors the parser test and covers
the "#{...}" interpolation path for $self and the selector "#{$self}--primary".

In
`@crates/biome_css_parser/tests/css_test_suite/ok/scss/value/parent-and-colon-values.scss`:
- Around line 2-5: Add a test case exercising the interpolation of the saved
parent selector by including the selector form using #{$self}, e.g.
`#{$self}--primary`, alongside the existing `$self: &;` and `&--primary` entries
in the SCSS test file so the ScssParentSelectorValue/selector interpolation path
is exercised; update the test in
css_test_suite/ok/scss/value/parent-and-colon-values.scss to include the
interpolation variant and ensure the expected output covers the interpolated
selector.

In `@xtask/codegen/css.ungram`:
- Around line 2514-2522: parse_any_value() never constructs ScssColonValue
because there is no branch for is_at_scss_colon_value(); add a branch in
parse_any_value() to check is_at_scss_colon_value() and call a new
parse_scss_colon_value() that consumes the ':' token and returns the
ScssColonValue node (implement both is_at_scss_colon_value() and
parse_scss_colon_value() following the patterns used for ScssParentSelectorValue
and other simple value nodes), update any factory/formatter hookups if needed,
and run `just gen-grammar css` to regenerate artifacts after modifying the
.ungram file.

---

Nitpick comments:
In `@crates/biome_css_parser/src/syntax/value/function.rs`:
- Around line 79-82: In is_nth_at_function, add a concise inline comment
explaining that the (is_nth_at_scss_qualified_name(p, n) && p.nth_at(n + 3,
T!['('])) branch intentionally uses n + 3 to match the three-token form
ident.ident( (i.e., module.function(...)) and thereby exclude forms like
ident.$ident( which would require n + 4); place the comment immediately before
or on the same line as the n + 3 check so future readers understand the choice.

[codspeed-hq]

Merging this PR will not alter performance

✅ 29 untouched benchmarks
⏩ 127 skipped benchmarks¹

---

_{Comparing db/scss-alias-values (9386363) with main (f440103)}

Footnotes

1. 127 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]

🤖 Prompt for all review comments with AI agents

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

Duplicate comments:
In
`@crates/biome_css_parser/tests/css_test_suite/ok/scss/value/parent-and-colon-values.scss`:
- Around line 1-6: Test coverage is missing the interpolation path that uses the
captured parent selector value; add a test that exercises interpolation like
using the $self variable assigned from & (e.g., $self: &;) inside the selector
and interpolating it with appended text (the #{ $self }--primary pattern) so the
parser's ScssParentSelectorValue handling is validated — update the existing
test file that defines $self and the nested selector (the code with $self: &;
and &--primary) to include a case where the selector is referenced via
interpolation (#{...}) to ensure the interpolation branch is parsed and
serialized correctly.