Skip to content

Commit

Permalink
[CSS] Add support for at-scope rule
Browse files Browse the repository at this point in the history 
Resolves sublimehq#3867

This commit implements support for @scope rules.

see: https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
  • Loading branch information
@deathaxe
deathaxe committed Nov 14, 2023
1 parent 40d269d commit 047402e
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 0 deletions.
28 changes: 28 additions & 0 deletions CSS/CSS.sublime-syntax
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,7 @@ contexts:
- include: at-page
- include: at-page-margin
- include: at-property
- include: at-scope
- include: at-scroll-timeline
- include: at-other

Expand All @@ -406,6 +407,7 @@ contexts:
- include: at-page
- include: at-page-margin
- include: at-property
- include: at-scope
- include: at-scroll-timeline
- include: at-other

Expand Down Expand Up @@ -892,6 +894,32 @@ contexts:
- include: comments
- include: else-pop

###[ SCROPE AT-RULE ]##########################################################

at-scope:
- match: (@)(?i:scope){{break}}
scope: keyword.control.directive.css
captures:
1: punctuation.definition.keyword.css
push: at-scope-selector

at-scope-selector:
- meta_scope: meta.at-rule.scope.css
- match: \(
scope: punctuation.section.group.begin.css
push: at-scope-selector-group-body
- match: to{{break}}
scope: keyword.other.css
- include: else-pop

at-scope-selector-group-body:
- meta_scope: meta.group.css
- meta_content_scope: meta.selector.css
- match: \)
scope: punctuation.section.group.end.css
pop: 1
- include: selector-body

###[ SCROLL-TIMELINE AT-RULE ]#################################################

# @scroll-timeline
Expand Down
47 changes: 47 additions & 0 deletions CSS/syntax_test_css.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1554,6 +1554,53 @@
/* ^ punctuation.terminator.rule.css */
}

@scope
/* ^^^^^^ meta.at-rule.scope.css keyword.control.directive.css */

@scope to ;
/* ^^^^^^^^^^ meta.at-rule.scope.css */
/* ^^^^^^ keyword.control.directive.css */
/* ^^ keyword.other.css */
/* ^ punctuation.terminator.rule.css */

@scope () to () {}
/* ^^^^^^^^^^^^^^^^ meta.at-rule.scope.css */
/* ^^ meta.group.css */
/* ^^ meta.group.css */
/* ^^ meta.property-list.css meta.block.css */
/* ^ punctuation.definition.keyword.css */
/* ^^^^^^ keyword.control.directive.css */
/* ^ punctuation.section.group.begin.css */
/* ^ punctuation.section.group.end.css */
/* ^^ keyword.other.css */
/* ^ punctuation.section.group.begin.css */
/* ^ punctuation.section.group.end.css */
/* ^ punctuation.section.block.begin.css */
/* ^ punctuation.section.block.end.css */

@scope (.class) to (.limit > *) {}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.scope.css */
/* ^ meta.group.css - meta.selector */
/* ^^^^^^ meta.at-rule.scope.css meta.group.css meta.selector.css */
/* ^ meta.group.css - meta.selector */
/* ^ meta.group.css - meta.selector */
/* ^^^^^^^^^^ meta.at-rule.scope.css meta.group.css meta.selector.css */
/* ^ meta.group.css - meta.selector */
/* ^^ meta.property-list.css meta.block.css */
/* ^ punctuation.definition.keyword.css */
/* ^^^^^^ keyword.control.directive.css */
/* ^ punctuation.section.group.begin.css */
/* ^^^^^^ entity.other.attribute-name.class.css */
/* ^ punctuation.section.group.end.css */
/* ^^ keyword.other.css */
/* ^ punctuation.section.group.begin.css */
/* ^^^^^^ entity.other.attribute-name.class.css */
/* ^ keyword.operator.combinator.css */
/* ^ constant.other.wildcard.asterisk.css */
/* ^ punctuation.section.group.end.css */
/* ^ punctuation.section.block.begin.css */
/* ^ punctuation.section.block.end.css */

@scroll-timeline
/* ^^^^^^^^^^^^^^^^^ meta.at-rule.scroll-timeline.css */
/* ^ keyword.control.directive.css punctuation.definition.keyword.css */
Expand Down

2 comments on commit 047402e

@thecodechef
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you for getting to this issue this quickly but i noticed that it kinda seems broken after the to keyword are working on a fix for that or is this just the first iteration the fix

@deathaxe
Copy link
Owner Author

@deathaxe deathaxe commented on 047402e Nov 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In which kind is it "somewhat" broken? Any examples? The implementation lazily follows official specs which require scopes to be enclosed in parentheses.

@scope [(<scope-start>)]? [to (<scope-end>)]? {
  <rule-list>
}

Please answer in sublimehq#3869 as it is better trackable.

Please sign in to comment.