Skip to content

feat(css): support SCSS interpolation in attribute selectors#10357

Merged
denbezrukov merged 3 commits into
mainfrom
db/scss-parser-2
May 13, 2026
Merged

feat(css): support SCSS interpolation in attribute selectors#10357
denbezrukov merged 3 commits into
mainfrom
db/scss-parser-2

Conversation

@denbezrukov

@denbezrukov denbezrukov commented May 13, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds SCSS interpolation support in attribute selector names and modifiers.

html[lang=#{$locale}] {}
[data-#{$name}=x] {}
[ns|data-#{$name}=x] {}
[#{$name}=x] {}
[title="x" #{$mod}] {}

This PR was implemented with assistance from OpenAI Codex.

Test Plan

  • cargo test -p biome_css_parser/formatter

@changeset-bot

changeset-bot Bot commented May 13, 2026 •
edited
Loading

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: f3fb94d

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.

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

💥 An error occurred when fetching the changed packages and changesets in this PR 
Some errors occurred when validating the changesets config:
The package or glob expression "@biomejs/benchmark" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

@github-actions github-actions Bot added A-Parser Area: parser A-Formatter Area: formatter A-Tooling Area: internal tools L-CSS Language: CSS and super languages L-Grit Language: GritQL labels May 13, 2026
@github-actions

github-actions Bot commented May 13, 2026

Copy link
Copy Markdown
Contributor

Parser conformance results on

js/262

Test result main count This PR count Difference
Total 53208 53208 0
Passed 51990 51990 0
Failed 1176 1176 0
Panics 42 42 0
Coverage 97.71% 97.71% 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 651 651 0
Failed 1 1 0
Panics 0 0 0
Coverage 99.85% 99.85% 0.00%

symbols/microsoft

Test result main count This PR count Difference
Total 5467 5467 0
Passed 1915 1915 0
Failed 3552 3552 0
Panics 0 0 0
Coverage 35.03% 35.03% 0.00%

ts/babel

Test result main count This PR count Difference
Total 658 658 0
Passed 574 574 0
Failed 84 84 0
Panics 0 0 0
Coverage 87.23% 87.23% 0.00%

ts/microsoft

Test result main count This PR count Difference
Total 18876 18876 0
Passed 13010 13010 0
Failed 5865 5865 0
Panics 1 1 0
Coverage 68.92% 68.92% 0.00%

@coderabbitai

coderabbitai Bot commented May 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

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: f67f5c5d-2065-4c67-a96d-0dfadb9bc3dc

📥 Commits

Reviewing files that changed from the base of the PR and between 3e39ecd and f3fb94d.

📒 Files selected for processing (2)
  • crates/biome_css_parser/src/syntax/scss/selector/attribute.rs
  • crates/biome_grit_patterns/src/grit_query.rs
🚧 Files skipped from review as they are similar to previous changes (1)
  • crates/biome_css_parser/src/syntax/scss/selector/attribute.rs

Walkthrough

This PR extends Biome's CSS/SCSS parser and formatter to support SCSS interpolation in attribute selectors. It introduces AnyCssAttributeName/AnyCssAttributeModifier and CssAttributeModifier in the grammar and kinds, adds parser predicates and helpers for interpolated names/modifiers, updates attribute selector parsing and recovery, implements formatter rules and registry wiring, refactors SCSS formatters to use the write! emission pattern, updates grit mappings and GritQuery caching, and adds tests for valid and invalid interpolation cases.

Suggested labels

L-SCSS

Suggested reviewers

  • dyc3
  • ematipico
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main feature addition—SCSS interpolation support in CSS attribute selectors—which aligns with the substantial changes across parser, formatter, and test files.
Description check ✅ Passed The description provides concrete SCSS syntax examples demonstrating interpolation in various attribute selector positions and mentions the test plan, clearly relating to the changeset.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch db/scss-parser-2

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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

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

@codspeed-hq

codspeed-hq Bot commented May 13, 2026 •
edited
Loading

Copy link
Copy Markdown

Merging this PR will not alter performance

✅ 38 untouched benchmarks
⏩ 218 skipped benchmarks1

Comparing db/scss-parser-2 (f3fb94d) with main (e71f584)2

Open in CodSpeed

Footnotes

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

  2. No successful run was found on main (8e4ada5) during the generation of this report, so e71f584 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

@denbezrukov denbezrukov merged commit 80f0610 into main May 13, 2026
29 checks passed
@denbezrukov denbezrukov deleted the db/scss-parser-2 branch May 13, 2026 20:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dyc3 dyc3 dyc3 approved these changes

Assignees

No one assigned

Labels

A-Formatter Area: formatter A-Parser Area: parser A-Tooling Area: internal tools L-CSS Language: CSS and super languages L-Grit Language: GritQL

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@denbezrukov @dyc3