Added container at-rule support - #15
Open
Carlos Hernandez (wileycoyote78) wants to merge 3 commits into
Open
Conversation
The @container rule is similar enough (if not down right identical) to the @media rule. Copied and pasted the @media lines, replaced the regex to look for @container instead of @media. All other patterns should work the same, so no need to create new ones.
Author
|
@microsoft-github-policy-service agree |
Added comments on what I changed.
Added 'aspect-ratio' to the Standard CSS list
Comment on lines
+14
to
+15
| 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. |
Contributor
There was a problem hiding this comment.
@container preludes are completely different from @media preludes.
Does this change account for this difference?
Contributor
There was a problem hiding this comment.
I also agree with Romain Menke (@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.
Contributor
|
Also try to keep in mind that any at-rule that you reference here on GitHub is a ping to some person/account :) You can wrap them in backticks to prevent that. |
Hassan (hassanasad)
approved these changes
Sep 6, 2023
Zain Qureshi (ZainnQureshii)
approved these changes
Sep 6, 2023
Author
|
Thanks for approving the PR. I should have clarified that:
A: The Readme should not be added to the main project, it was just there to
describe what I did.
2: When I said ***@***.***` and ***@***.***` were the same, I meant in behavior
when it comes to the REGEX in the CSON file, which looks for text after the
@, then looks for stuff in (), then looks for stuff in {}, etc. I
understand programmatically, these two queries do two different things in
CSS.
😅😁
…On Fri, Sep 8, 2023, 14:41 Andrea Mah ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In README.md
<#15 (comment)>:
> +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.
I also agree with @romainmenke <https://github.com/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.
—
Reply to this email directly, view it on GitHub
<#15 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/A3AOYGXY6EA4OQFZYFQQHPDXZNYGLANCNFSM6AAAAAA3OJAC4U>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Contributor
|
If it should not be in the Readme, please remove it from the PR. Is there any way that you can add a more concise way of incorporating syntax highlighting for |
Author
|
I'll remove the stuff from the Readme later today.
The syntax rules are the same in my view, so it is, and is not, a quick
fix. The syntax rules in the CSON file are based on a regular expression
search, no? Both rules look for a word after the `@` symbol, both require
stuff after that; media looks for screen, print, etc, container looks for a
container name. Then it looks for stuff wrapped in () like `(width <
30em)`, then it looks for stuff wrapped in {}. Does it really have to be
more complicated than that?
…On Fri, Sep 8, 2023, 15:16 Andrea Mah ***@***.***> wrote:
If it should not be in the Readme, please remove it from the PR.
Is there any way that you can add a more concise way of incorporating
syntax highlighting for @container? Although adopting the rules for @media
would be a quick fix, I'd prefer something more accurate so that it works
long-term.
—
Reply to this email directly, view it on GitHub
<#15 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/A3AOYGSEQ4CXTWYW4ZFDIO3XZN4JXANCNFSM6AAAAAA3OJAC4U>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Contributor
|
If you look at the differences between media queries and container queries in their docs, you can see that they use different keywords (ie: media features vs. the specific container descriptors). The CSON file specifically addresses media features for Line 1195 in 3bd0020 |
Author
I get what you are saying, however, this solution would only be "strange" if people start writing up something like Line 1198 in 3bd0020 I am assuming from line 1198 that there would be another file involved to help support a specific section for "container-features," though that would be beyond my expertise if so. So it is a patch for now until full support for the rule is added. |
Author
|
By the way, I seem to be unable to remove the README from the PR..? |
Contributor
We don't want to highlight invalid syntax as if it were valid. Even if we were to introduce a patch, I would prefer something incomplete (ie: not covering all container queries and cases) rather than something that is incorrect. This way, we can try to keep the grammar better in the long-term. |
Kristofer Baxter (kristofer-baxter)
added a commit
to kristofer-baxter/vscode-css
that referenced
this pull request
Aug 27, 2026
Add grammar and regression coverage for modern at-rules, functions, properties, selectors, and media queries. Include `@container` coverage for the gap first identified in microsoft#15, and accept digit-prefixed `@property` names consistently with microsoft#43. Bound the scope leak from unclosed `@container` and `@scope` preludes with `(?=\{[^)]*$)`. Recover at `{` only when no `)` follows on the same line, preserving legal balanced blocks in declaration values. Do not use `;` as a bail-out: `<general-enclosed>` permits top-level semicolons through `<any-value>`, and legal preludes may span lines. Leave `animation-timeline`, `animation-range`, `animation-range-start`, and `animation-range-end` entirely to microsoft#32. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Kristofer Baxter (kristofer-baxter)
added a commit
to kristofer-baxter/vscode-css
that referenced
this pull request
Aug 27, 2026
Add grammar and regression coverage for modern at-rules, functions, properties, selectors, and media queries. Include `@container` coverage for the gap first identified in microsoft#15, and accept digit-prefixed `@property` names consistently with microsoft#43. Dedicated prelude regions end only at `)`, so an unclosed parenthesis would run to end of file where the generic at-rule header on main recovers at the first `{`. Guard every parenthesised region reachable inside a prelude with `(?=\{[^)]*$)`: recover at `{` only when no `)` follows on the same line, preserving legal balanced blocks in declaration values. Guarding only the outermost regions is not enough, because an outer `end` cannot be evaluated while an inner rule is active. Do not use `;` as a bail-out: `<general-enclosed>` permits top-level semicolons through `<any-value>`, and legal preludes may span lines. Leave `animation-timeline`, `animation-range`, `animation-range-start`, and `animation-range-end` entirely to microsoft#32. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Kristofer Baxter (kristofer-baxter)
added a commit
to kristofer-baxter/vscode-css
that referenced
this pull request
Aug 27, 2026
Add grammar and regression coverage for modern at-rules, functions, properties, selectors, and media queries. Include `@container` coverage for the gap first identified in microsoft#15, and accept digit-prefixed `@property` names consistently with microsoft#43. Dedicated prelude regions end only at `)`, so an unclosed parenthesis would run to end of file where the generic at-rule header on main recovers at the first `{`. Guard the parenthesised regions reachable inside a prelude with `(?=\{[^)]*$)`: recover at `{` only when no `)` follows on the same line, preserving legal balanced blocks in declaration values. Guarding only the outermost regions is not enough, because an outer `end` cannot be evaluated while an inner rule is active. Do not use `;` as a bail-out: `<general-enclosed>` permits top-level semicolons through `<any-value>`, and legal preludes may span lines. Leave `var()` unguarded. A `var()` fallback may legally contain a balanced curly block spanning lines, and guarding it truncated that value; main does not recover an unclosed `var(` either, so the exception gives up nothing main provided. Give the `:lang()` and `:dir()` string rules the end-of-line fallback the shared `#string` rule already uses, so an unterminated language range no longer runs past its line. Leave `animation-timeline`, `animation-range`, `animation-range-start`, and `animation-range-end` entirely to microsoft#32. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Kristofer Baxter (kristofer-baxter)
added a commit
to kristofer-baxter/vscode-css
that referenced
this pull request
Aug 27, 2026
Add grammar and regression coverage for modern at-rules, functions, properties, selectors, and media queries. Include `@container` coverage for the gap first identified in microsoft#15, and accept digit-prefixed `@property` names consistently with microsoft#43. Dedicated prelude regions end only at `)`, so an unclosed parenthesis would run to end of file where the generic at-rule header on main recovers at the first `{`. Guard the parenthesised regions reachable inside a prelude with `(?=\{[^)]*$)`: recover at `{` only when no `)` follows on the same line, preserving legal balanced blocks in declaration values. Guarding only the outermost regions is not enough, because an outer `end` cannot be evaluated while an inner rule is active. Do not use `;` as a bail-out: `<general-enclosed>` permits top-level semicolons through `<any-value>`, and legal preludes may span lines. Leave `var()` unguarded. A `var()` fallback may legally contain a balanced curly block spanning lines, and guarding it truncated that value; main does not recover an unclosed `var(` either, so the exception gives up nothing main provided. Give the `:lang()` and `:dir()` string rules the end-of-line fallback the shared `#string` rule already uses, so an unterminated language range no longer runs past its line. Leave `animation-timeline`, `animation-range`, `animation-range-start`, and `animation-range-end` entirely to microsoft#32. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Kristofer Baxter (kristofer-baxter)
added a commit
to kristofer-baxter/vscode-css
that referenced
this pull request
Aug 27, 2026
Add grammar and regression coverage for modern at-rules, functions, properties, selectors, and media queries. Include `@container` coverage for the gap first identified in microsoft#15, and accept digit-prefixed `@property` names consistently with microsoft#43. Dedicated prelude regions end only at `)`, so an unclosed parenthesis would run to end of file where the generic at-rule header on main recovers at the first `{`. Guard the parenthesised regions reachable inside a prelude with `(?=\{[^)]*$)`: recover at `{` only when no `)` follows on the same line, preserving legal balanced blocks in declaration values. Guarding only the outermost regions is not enough, because an outer `end` cannot be evaluated while an inner rule is active. Do not use `;` as a bail-out: `<general-enclosed>` permits top-level semicolons through `<any-value>`, and legal preludes may span lines. Leave `var()` unguarded. A `var()` fallback may legally contain a balanced curly block spanning lines, and guarding it truncated that value; main does not recover an unclosed `var(` either, so the exception gives up nothing main provided. Give the `:lang()` and `:dir()` string rules the end-of-line fallback the shared `#string` rule already uses, so an unterminated language range no longer runs past its line. Leave `animation-timeline`, `animation-range`, `animation-range-start`, and `animation-range-end` entirely to microsoft#32. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Kristofer Baxter (kristofer-baxter)
added a commit
to kristofer-baxter/vscode-css
that referenced
this pull request
Aug 28, 2026
Add grammar and regression coverage for modern at-rules, functions, properties, selectors, and media queries. Include `@container` coverage for the gap first identified in microsoft#15, and accept digit-prefixed `@property` names consistently with microsoft#43. Dedicated prelude regions end only at `)`, so an unclosed parenthesis would run to end of file where the generic at-rule header on main recovers at the first `{`. Guard the parenthesised regions reachable inside a prelude so they recover at `{` only when the rest of the line does not close the parenthesis, preserving legal balanced blocks in declaration values. The test is lexical rather than a plain `[^)]*`, because a `)` inside a comment, string or escape does not close anything: without that, `@container (width > 1px{ /* ) */` stayed open where main recovered. Guarding only the outermost regions is not enough, because an outer `end` cannot be evaluated while an inner rule is active. Do not use `;` as a bail-out: `<general-enclosed>` permits top-level semicolons through `<any-value>`, and legal preludes may span lines. Leave `var()` and custom function calls unguarded. Both are declaration values, and `<declaration-value>` admits a balanced curly block that legally spans lines, as in `--x: --foo({ ... });`. The legal `--foo({` and the malformed `--foo(a{` are indistinguishable within a single line, so recovering there would cost legal CSS that main scopes correctly. Main does not recover an unclosed `var(` either. Give the `:lang()` string rules the end-of-line fallback the shared `#string` rule already uses, so an unterminated language range no longer runs past its line. Leave `animation-timeline`, `animation-range`, `animation-range-start`, and `animation-range-end` entirely to microsoft#32. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Kristofer Baxter (kristofer-baxter)
added a commit
to kristofer-baxter/vscode-css
that referenced
this pull request
Aug 28, 2026
Add grammar and regression coverage for modern at-rules, functions, properties, selectors, and media queries. Include `@container` coverage for the gap first identified in microsoft#15, and accept digit-prefixed `@property` names consistently with microsoft#43. Dedicated prelude regions end only at `)`, so an unclosed parenthesis would run to end of file where the generic at-rule header on main recovers at the first `{`. Guard the parenthesised regions reachable inside a prelude so they recover at `{` only when the rest of the line does not close the parenthesis, preserving legal balanced blocks in declaration values. The test is lexical rather than a plain `[^)]*`, because a `)` inside a comment, string or escape does not close anything: without that, `@container (width > 1px{ /* ) */` stayed open where main recovered. Guarding only the outermost regions is not enough, because an outer `end` cannot be evaluated while an inner rule is active. Do not use `;` as a bail-out: `<general-enclosed>` permits top-level semicolons through `<any-value>`, and legal preludes may span lines. Leave `var()` and custom function calls unguarded. Both are declaration values, and `<declaration-value>` admits a balanced curly block that legally spans lines, as in `--x: --foo({ ... });`. The legal `--foo({` and the malformed `--foo(a{` are indistinguishable within a single line, so recovering there would cost legal CSS that main scopes correctly. Main does not recover an unclosed `var(` either. Give the `:lang()` string rules the end-of-line fallback the shared `#string` rule already uses, so an unterminated language range no longer runs past its line. Leave `animation-timeline`, `animation-range`, `animation-range-start`, and `animation-range-end` entirely to microsoft#32. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Kristofer Baxter (kristofer-baxter)
added a commit
to kristofer-baxter/vscode-css
that referenced
this pull request
Aug 28, 2026
Add grammar and regression coverage for modern at-rules, functions, properties, selectors, and media queries. Include `@container` coverage for the gap first identified in microsoft#15, and accept digit-prefixed `@property` names consistently with microsoft#43. Dedicated prelude regions end only at `)`, so an unclosed parenthesis would run to end of file where the generic at-rule header on main recovers at the first `{`. Guard the parenthesised regions reachable inside a prelude so they recover at `{` only when the rest of the line does not close the parenthesis, preserving legal balanced blocks in declaration values. The test is lexical rather than a plain `[^)]*`, because a `)` inside a comment, string or escape does not close anything: without that, `@container (width > 1px{ /* ) */` stayed open where main recovered. Guarding only the outermost regions is not enough, because an outer `end` cannot be evaluated while an inner rule is active. Do not use `;` as a bail-out: `<general-enclosed>` permits top-level semicolons through `<any-value>`, and legal preludes may span lines. Leave `var()` and custom function calls unguarded. Both are declaration values, and `<declaration-value>` admits a balanced curly block that legally spans lines, as in `--x: --foo({ ... });`. The legal `--foo({` and the malformed `--foo(a{` are indistinguishable within a single line, so recovering there would cost legal CSS that main scopes correctly. Main does not recover an unclosed `var(` either. Give the `:lang()` string rules the end-of-line fallback the shared `#string` rule already uses, so an unterminated language range no longer runs past its line. Leave `animation-timeline`, `animation-range`, `animation-range-start`, and `animation-range-end` entirely to microsoft#32. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Kristofer Baxter (kristofer-baxter)
added a commit
to kristofer-baxter/vscode-css
that referenced
this pull request
Aug 31, 2026
Add grammar and regression coverage for modern at-rules, functions, properties, selectors, and media queries. Include `@container` coverage for the gap first identified in PR microsoft#15, and accept digit-prefixed `@property` names consistently with PR microsoft#43. Dedicated prelude regions end only at `)`, so an unclosed parenthesis would run to end of file where the generic at-rule header on main recovers at the first `{`. Guard the parenthesised regions reachable inside a prelude so they recover at `{` only when the rest of the line does not close the parenthesis, preserving legal balanced blocks in declaration values. The test is lexical rather than a plain `[^)]*`, because a `)` inside a comment, string or escape does not close anything: without that, `@container (width > 1px{ /* ) */` stayed open where main recovered. The test also accepts an incomplete trailing escape, both bare and inside an unterminated string, because a line ending in an odd number of backslashes otherwise matches no alternative and the newline-escape rule holds the prelude open. Guarding only the outermost regions is not enough, because an outer `end` cannot be evaluated while an inner rule is active. Do not use `;` as a bail-out: `<general-enclosed>` permits top-level semicolons through `<any-value>`, and legal preludes may span lines. Leave `var()` and custom function calls unguarded. Both are declaration values, and `<declaration-value>` admits a balanced curly block that legally spans lines, as in `--x: --foo({ ... });`. The legal `--foo({` and the malformed `--foo(a{` are indistinguishable within a single line, so recovering there would cost legal CSS that main scopes correctly. Main does not recover an unclosed `var(` either. Add `#condition-string` to the `@media` and `@supports` condition regions. The bail-out only inspects text from the candidate `{` onwards, so with no string rule active it read the closing quote of `(future: "a{b")` as an opening one, took the real `)` for shielded, and opened the body at the brace inside the string. `@container` keeps no string rule, because there an unterminated string would instead shield a malformed `{` from the bail-out; that case tokenizes as it already does on main. `#condition-string` is a condition-local copy of `#string` rather than `#string` itself. It differs in one respect: its newline escape ends at `^` instead of the shared rule's `^(?<!\G)`, which cannot match while the condition is still open and so swallowed the rest of the stylesheet after a legal `@media (future: "a{\` continuation. Keeping the copy local leaves string tokenization everywhere else byte-for-byte as it is on main. Give the `:lang()` string rules the end-of-line fallback the shared `#string` rule already uses, so an unterminated language range no longer runs past its line. Leave `animation-timeline`, `animation-range`, `animation-range-start`, and `animation-range-end` entirely to PR microsoft#32.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The container rule is similar enough (if not down right identical) to the media rule. Copied and pasted the media lines, replaced the regex to look for container instead of media. All other patterns should work the same, so no need to create new ones.