Scope root and scope limit in @scope not parsed correctly #22

New issue

Closed

opened 2025-06-11 11:12:46 +02:00 by SirPepe · 1 comment

SirPepe commented

2025-06-11 11:12:46 +02:00

(Migrated from github.com)

Plain @scope at-rules work fine, but there are parse errors when a scope root and/or scope limit are included.

With only a scope root:

@scope (.parent) {
  .foo {
    color: red;
  }
}

Result:

StyleSheet(AtRule(AtKeyword,ParenthesizedQuery("(",⚠,KeywordQuery,")"),Block("{",RuleSet(ClassSelector(".",ClassName),Block("{",Declaration(PropertyName,":",ValueName),";","}")),"}")))

With scope limit:

@scope (.parent) to (.child) {
  .foo {
    color: red;
  }
}

Result:

StyleSheet(AtRule(AtKeyword,ParenthesizedQuery("(",⚠,KeywordQuery,")"),⚠),RuleSet(ClassSelector(TagSelector(TagName),⚠("("),".",ClassName),⚠(")"),Block("{",RuleSet(ClassSelector(".",ClassName),Block("{",Declaration(PropertyName,":",ValueName),";","}")),"}")))

Plain [@scope at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope) work fine, but there are parse errors when a scope root and/or scope limit are included. With only a scope root: ```css @scope (.parent) { .foo { color: red; } } ``` Result: ``` StyleSheet(AtRule(AtKeyword,ParenthesizedQuery("(",⚠,KeywordQuery,")"),Block("{",RuleSet(ClassSelector(".",ClassName),Block("{",Declaration(PropertyName,":",ValueName),";","}")),"}"))) ``` With scope limit: ```css @scope (.parent) to (.child) { .foo { color: red; } } ``` Result: ``` StyleSheet(AtRule(AtKeyword,ParenthesizedQuery("(",⚠,KeywordQuery,")"),⚠),RuleSet(ClassSelector(TagSelector(TagName),⚠("("),".",ClassName),⚠(")"),Block("{",RuleSet(ClassSelector(".",ClassName),Block("{",Declaration(PropertyName,":",ValueName),";","}")),"}"))) ```

marijnh commented

2025-06-11 12:45:59 +02:00

(Migrated from github.com)

Attached patch adds this syntax.

👍 1

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

lezer/css#22

No description provided.

Rows
Columns