Skip to content

Support container scroll-state queries#488

Open
abdelfattahradwan wants to merge 1 commit into
microsoft:mainfrom
abdelfattahradwan:support-container-scroll-state-queries
Open

Support container scroll-state queries#488
abdelfattahradwan wants to merge 1 commit into
microsoft:mainfrom
abdelfattahradwan:support-container-scroll-state-queries

Conversation

@abdelfattahradwan
Copy link
Copy Markdown

@abdelfattahradwan abdelfattahradwan commented May 16, 2026

Closes #454

Summary

CSS container scroll-state queries such as @container my-container scroll-state(scrollable: y) are valid syntax, but the parser currently treats scroll-state as invalid unless the query starts with a parenthesised size query or style(...).

This PR adds parser support for scroll-state(...) container queries while keeping the change focused to the existing @container query parsing path.

This is my first pull request here, so I followed the format of #485.

Changes

File Change
src/parser/cssParser.ts Recognise scroll-state(...) as a valid container query form
src/parser/cssParser.ts Avoid consuming function-style query names like scroll-state(...) as container names
src/test/css/parser.test.ts Add coverage for named, unnamed, nested, compound, and comma-list scroll-state queries
src/test/scss/parser.test.ts Add SCSS parser coverage
src/test/less/parser.test.ts Add LESS parser coverage

Test plan

  • Full test suite passes with npm run test
  • New test: reported @media + named @container ... scroll-state(scrollable: y) syntax parses without diagnostics
  • New test: unnamed @container scroll-state(scrollable: y) parses without treating scroll-state as a container name
  • Existing style(...), size-query, nested container, SCSS, and LESS parser behaviour continues to pass

@abdelfattahradwan
Copy link
Copy Markdown
Author

@abdelfattahradwan please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

  • (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.
@microsoft-github-policy-service agree
  • (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.
@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

@microsoft-github-policy-service agree

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Error When Using CSS Container Scroll-state Queries

1 participant