Skip to content

feat(css_formatter): add support for formatting SCSS keyframes selectors#10362

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

feat(css_formatter): add support for formatting SCSS keyframes selectors#10362
denbezrukov merged 3 commits into
mainfrom
db/scss-parser-3

Conversation

@denbezrukov

@denbezrukov denbezrukov commented May 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

This PR was implemented with assistance from OpenAI Codex.

Summary

Adds parser and formatter support for SCSS interpolation in @keyframes selectors.

  @keyframes loader {
    #{50% - $loader-icon-duration} {
      opacity: 1;
    }

    #{$i}% {
      opacity: 0.75;
    }

    50%, #{75% - $loader-icon-duration}, to {
      opacity: 0.5;
    }
  }

Test Plan

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

@changeset-bot

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

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: c4da03a

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

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: df5e5c67-2a26-4d91-b78b-463ffa6bc457

📥 Commits

Reviewing files that changed from the base of the PR and between 80f0610 and bc70ca7.

⛔ 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/scss/at-rule/keyframes-interpolation.scss.snap is excluded by !**/*.snap and included by **
  • crates/biome_css_parser/tests/css_test_suite/error/scss/at-rule/keyframes-interpolation.scss.snap is excluded by !**/*.snap and included by **
  • crates/biome_css_parser/tests/css_test_suite/ok/scss/at-rule/keyframes-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 (14)
  • crates/biome_css_formatter/src/css/any/keyframes_selector.rs
  • crates/biome_css_formatter/src/generated.rs
  • crates/biome_css_formatter/src/scss/selectors/keyframes_selector.rs
  • crates/biome_css_formatter/src/scss/selectors/mod.rs
  • crates/biome_css_formatter/tests/specs/scss/at-rule/keyframes-interpolation.scss
  • crates/biome_css_parser/src/syntax/at_rule/keyframes.rs
  • crates/biome_css_parser/src/syntax/scss/at_rule/keyframes.rs
  • crates/biome_css_parser/src/syntax/scss/at_rule/mod.rs
  • crates/biome_css_parser/src/syntax/scss/mod.rs
  • crates/biome_css_parser/tests/css_test_suite/error/scss/at-rule/keyframes-interpolation.scss
  • crates/biome_css_parser/tests/css_test_suite/ok/scss/at-rule/keyframes-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

Walkthrough

This PR extends Biome's CSS infrastructure to support SCSS interpolated keyframes selectors like #{50% - $duration}%. The change flows from grammar definition through parser implementation to formatter wiring, with corresponding test fixtures across both error and valid SCSS cases. The parser detects SCSS selector features, parses the interpolation with optional trailing percent binding, and the formatter outputs the fields in order. Generated code in generated.rs and Grit pattern mapping complete the integration.

Possibly related PRs

  • biomejs/biome#9788: Adds CssKeyframesRangeSelector variant to the same AnyCssKeyframesSelector dispatch mechanism, establishing the pattern for multiple selector type support.

Suggested labels

A-Parser, A-Formatter, A-Tooling, L-CSS, L-Grit

Suggested reviewers

  • dyc3
  • ematipico
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main change: adding support for formatting SCSS keyframes selectors.
Description check ✅ Passed The description accurately relates to the changeset, explaining SCSS interpolation support in @keyframes selectors with a concrete example and test plan.
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-3

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-3 (c4da03a) with main (80f0610)

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

@denbezrukov denbezrukov merged commit 7fdc054 into main May 14, 2026
29 checks passed
@denbezrukov denbezrukov deleted the db/scss-parser-3 branch May 14, 2026 07:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ematipico ematipico ematipico 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 @ematipico