Skip to content

Added container at-rule support #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wileycoyote78 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added container at-rule support #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1393e92
Added container at-rule support
wileycoyote78 Aug 13, 2023
5f3653a
Update README.md
wileycoyote78 Aug 13, 2023
7c950c6
Added aspect-ratio
wileycoyote78 Aug 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,8 @@ from the [CSS TextMate bundle](https://github.com/textmate/css.tmbundle).

Contributions are greatly appreciated. Please fork this repository and open a
pull request to add snippets, make grammar tweaks, etc.

[CONTRIBUTOR NOTES]
A while back, I created a [custom-css](https://github.com/wileycoyote78/custom-css) json file to add support for the new *container* properties (@container, container, container-type, container-name) in order to remove the squiggly line. However, the color syntax was not applying to the properties.
Saw that someone had created a pull request to add color syntax to the properties, but not the at-rule (see PR#14). After studying the cson file, I realized that the existing @media rule is basically identical to the new @container rule. Just copied and pasted the @media rule lines, and changed the regex lines to look for 'container' instead of 'media'.
This, however, still does not correct the problem that any properties (i.e. padding, margin, etc.) inside an @container block do not display a description thumbnail thingy when hovering over them.
Comment on lines +14 to +15
Copy link
Contributor

@romainmenke romainmenke Aug 13, 2023

Choose a reason for hiding this comment

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

@container preludes are completely different from @media preludes.

Does this change account for this difference?

Copy link
Contributor

@andreamah andreamah Sep 8, 2023

Choose a reason for hiding this comment

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

I also agree with @romainmenke above. Media queries and container queries are different, and should be treated differently.

As an aside, this text excerpt should not be put in the repo's README. Rather, it should be in the PR's description.

40 changes: 39 additions & 1 deletion grammars/css.cson
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,44 @@
}
]
}
{
# @container
'begin': '(?i)(?=@container(\\s|\\(|/\\*|$))'
'end': '(?<=})(?!\\G)'
'patterns': [
{
'begin': '(?i)\\G(@)container'
'beginCaptures':
'0':
'name': 'keyword.control.at-rule.media.css'
'1':
'name': 'punctuation.definition.keyword.css'
'end': '(?=\\s*[{;])'
'name': 'meta.at-rule.media.header.css'
'patterns': [
{
'include': '#media-query-list'
}
]
}
{
'begin': '{'
'beginCaptures':
'0':
'name': 'punctuation.section.media.begin.bracket.curly.css'
'end': '}'
'endCaptures':
'0':
'name': 'punctuation.section.media.end.bracket.curly.css'
'name': 'meta.at-rule.media.body.css'
'patterns': [
{
'include': '$self'
}
]
}
]
}
{
# @counter-style
'begin': '(?i)(?=@counter-style([\\s\'"{;]|/\\*|$))'
Expand Down Expand Up @@ -1498,7 +1536,7 @@
(?:
# Standard CSS
accent-color|additive-symbols|align-content|align-items|align-self|all|animation|animation-delay|animation-direction|animation-duration
| animation-fill-mode|animation-iteration-count|animation-name|animation-play-state|animation-timing-function|backdrop-filter
| animation-fill-mode|animation-iteration-count|animation-name|animation-play-state|animation-timing-function|aspect-ratio|backdrop-filter
| backface-visibility|background|background-attachment|background-blend-mode|background-clip|background-color|background-image
| background-origin|background-position|background-position-[xy]|background-repeat|background-size|bleed|block-size|border
| border-block-end|border-block-end-color|border-block-end-style|border-block-end-width|border-block-start|border-block-start-color
Expand Down