feat(css): parse scss interpolation expressions

[denbezrukov]

This PR was created with AI assistance (Codex).

Summary

Adds the first iteration of SCSS interpolation support to the CSS parser and formatter.

Test Plan

cargo test -p biome_css_parser/formatter

[changeset-bot]

⚠️ No Changeset found

Latest commit: 836dbe0

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	53139	53139	0
Passed	51919	51919	0
Failed	1178	1178	0
Panics	42	42	0
Coverage	97.70%	97.70%	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	5466	5466	0
Passed	1915	1915	0
Failed	3551	3551	0
Panics	0	0	0
Coverage	35.03%	35.03%	0.00%

ts/babel

Test result	main count	This PR count	Difference
Total	636	636	0
Passed	568	568	0
Failed	68	68	0
Panics	0	0	0
Coverage	89.31%	89.31%	0.00%

ts/microsoft

Test result	main count	This PR count	Difference
Total	18875	18875	0
Passed	13014	13014	0
Failed	5860	5860	0
Panics	1	1	0
Coverage	68.95%	68.95%	0.00%

[codspeed-hq]

Merging this PR will not alter performance

✅ 29 untouched benchmarks
⏩ 187 skipped benchmarks¹

---

_{Comparing db/interpolation (836dbe0) with main (058f7b5)}

Footnotes

1. 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. ↩

[coderabbitai]

Walkthrough

This PR introduces comprehensive SCSS interpolation support to the Biome CSS toolchain. It adds a new ScssInterpolation grammar node (matching #{ value }), implements parser functions to detect and parse these constructs, and creates corresponding formatting rules. The changes integrate interpolation handling throughout the formatter's SCSS expression modules, whilst extending test coverage with both valid interpolation scenarios and error cases.

Possibly related PRs

• fix(core): scss handling #9091: Directly addresses SCSS interpolation functionality—fixes and test harnesses that complement this PR's feature implementation.
• refactor(css): align scss expression node variants #9340: Updates the same AnyScssExpression formatter match logic that this PR extends with the new interpolation variant.
• feat(css): add SCSS unary and binary expression #9222: Adds related SCSS expression node support (binary and unary operators) using the same parser and formatter integration patterns.

Suggested labels

A-Parser, A-Formatter, L-CSS, L-SCSS

Suggested reviewers

• ematipico
• siketyan

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding SCSS interpolation expression parsing support to the CSS parser.
Description check	✅ Passed	The description is directly relevant to the changeset, explaining that SCSS interpolation support is being added to both parser and formatter, with test plan details provided.

_{✏️ 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/interpolation

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

Tip

CodeRabbit can suggest fixes for GitHub Check annotations.

Configure the reviews.tools.github-checks setting to adjust the time to wait for GitHub Checks to complete.

[coderabbitai]

🧹 Nitpick comments (1)

crates/biome_css_parser/src/syntax/scss/expression/interpolation.rs (1)

11-11: Please document why comma is intentionally excluded here.

Line 11 is a bit of a trapdoor: adding , later would silently break #{1, 2, 3} list parsing inside interpolation.

♻️ Tiny clarity patch

-const SCSS_INTERPOLATION_END_TOKEN_SET: TokenSet<CssSyntaxKind> = token_set![T!['}'], T![;]];
+// Keep `,` out of this set so `#{1, 2, 3}` parses as a SCSS list expression.
+const SCSS_INTERPOLATION_END_TOKEN_SET: TokenSet<CssSyntaxKind> = token_set![T!['}'], 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/scss/expression/interpolation.rs` at line
11, The constant SCSS_INTERPOLATION_END_TOKEN_SET currently omits the comma on
purpose; add an inline comment above SCSS_INTERPOLATION_END_TOKEN_SET explaining
that ',' is intentionally excluded because including it would break parsing of
comma-separated lists inside interpolation (e.g. "#{1, 2, 3}") and thus must not
be treated as an interpolation terminator; reference the constant name
SCSS_INTERPOLATION_END_TOKEN_SET and the interpolation example "#{1, 2, 3}" in
the comment so future maintainers understand the trapdoor.

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In `@crates/biome_css_parser/src/syntax/scss/expression/interpolation.rs`:
- Line 11: The constant SCSS_INTERPOLATION_END_TOKEN_SET currently omits the
comma on purpose; add an inline comment above SCSS_INTERPOLATION_END_TOKEN_SET
explaining that ',' is intentionally excluded because including it would break
parsing of comma-separated lists inside interpolation (e.g. "#{1, 2, 3}") and
thus must not be treated as an interpolation terminator; reference the constant
name SCSS_INTERPOLATION_END_TOKEN_SET and the interpolation example "#{1, 2, 3}"
in the comment so future maintainers understand the trapdoor.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: dd469dd0-57ed-4a10-9451-b4f9b3237494

📥 Commits

Reviewing files that changed from the base of the PR and between 058f7b5 and 836dbe0.

⛔ Files ignored due to path filters (9)

• crates/biome_css_factory/src/generated/node_factory.rs is excluded by !**/generated/**, !**/generated/** and included by **
• crates/biome_css_factory/src/generated/syntax_factory.rs is excluded by !**/generated/**, !**/generated/** and included by **
• crates/biome_css_formatter/tests/specs/css/scss/expression/interpolation.scss.snap is excluded by !**/*.snap and included by **
• crates/biome_css_parser/tests/css_test_suite/error/scss/expression/interpolation.scss.snap is excluded by !**/*.snap and included by **
• crates/biome_css_parser/tests/css_test_suite/ok/scss/expression/interpolation.scss.snap is excluded by !**/*.snap and included by **
• crates/biome_css_syntax/src/generated/kind.rs is excluded by !**/generated/**, !**/generated/** and included by **
• crates/biome_css_syntax/src/generated/macros.rs is excluded by !**/generated/**, !**/generated/** and included by **
• crates/biome_css_syntax/src/generated/nodes.rs is excluded by !**/generated/**, !**/generated/** and included by **
• crates/biome_css_syntax/src/generated/nodes_mut.rs is excluded by !**/generated/**, !**/generated/** and included by **

📒 Files selected for processing (15)

• crates/biome_css_formatter/src/generated.rs
• crates/biome_css_formatter/src/scss/any/expression.rs
• crates/biome_css_formatter/src/scss/any/expression_item.rs
• crates/biome_css_formatter/src/scss/auxiliary/interpolation.rs
• crates/biome_css_formatter/src/scss/auxiliary/mod.rs
• crates/biome_css_formatter/tests/specs/css/scss/expression/interpolation.scss
• crates/biome_css_parser/src/lexer/tests.rs
• crates/biome_css_parser/src/syntax/scss/expression/interpolation.rs
• crates/biome_css_parser/src/syntax/scss/expression/mod.rs
• crates/biome_css_parser/src/syntax/scss/expression/primary.rs
• crates/biome_css_parser/tests/css_test_suite/error/scss/expression/interpolation.scss
• crates/biome_css_parser/tests/css_test_suite/ok/scss/expression/interpolation.scss
• crates/biome_grit_patterns/src/grit_target_language/css_target_language/generated_mappings.rs
• xtask/codegen/css.ungram
• xtask/codegen/src/css_kinds_src.rs