feat: add @container at-rule
#853
Conversation
Netail
force-pushed
the
feat/container-at-rule
branch
from
de560b9 to
e924dd1
Compare
css/at-rules.json
Outdated
| @@ -120,6 +120,20 @@ | |||
| "status": "standard", | |||
| "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/@counter-style" | |||
| }, | |||
| "@container": { | |||
| "syntax": "@container <container-condition># {\n <block-contents>\n}", | |||
There was a problem hiding this comment.
| "syntax": "@container <container-condition># {\n <block-contents>\n}", | |
| "syntax": "@container <container-condition># {\n <block-contents>\n}", |
the syntax need to add to syntaxes.json if it is not existed in that file
e.g. #835
There was a problem hiding this comment.
I think this is still outstanding, right? I don't get any matches on this branch for @container aside from ./css/at-rules.json:
grep -r "@container" ./
./css/at-rules.json: "@container": {
./css/at-rules.json: "syntax": "@container <container-condition># {\n <group-rule-body>\n}",
./css/at-rules.json: "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/@container"There was a problem hiding this comment.
Added, but unsure about the following 3; https://github.com/mdn/data/pull/853/files#diff-bf23b9edf4e332a630c103de7fc52e4eecc7d5262a21ac5feb2cc04a76cf2f40R230-R238, couldn't find any documentation
There was a problem hiding this comment.
@skyclouds2001, do you happen to know the answer to these 3?
|
Applied your feedback, thanks :) |
Netail
force-pushed
the
feat/container-at-rule
branch
from
2d890b5 to
067b698
Compare
|
Thanks @Netail - there's a comment from Skyclouds above about adding to syntaxes.json, too: #853 (comment) Do you want to take a look? Thank you! |
Netail
force-pushed
the
feat/container-at-rule
branch
from
74c384c to
1b3c5d7
Compare
There was a problem hiding this comment.
it is better to make those syntaxes by alphabet order
| "scroll-state-feature": { | ||
| "syntax": "<media-feature>" | ||
| }, | ||
| "size-feature": { | ||
| "syntax": "<media-feature>" | ||
| }, |
There was a problem hiding this comment.
| "scroll-state-feature": { | |
| "syntax": "<media-feature>" | |
| }, | |
| "size-feature": { | |
| "syntax": "<media-feature>" | |
| }, | |
| "scroll-state-feature": { | |
| "syntax": "<media-query-list>" | |
| }, | |
| "size-feature": { | |
| "syntax": "<media-query-list>" | |
| }, |
@media use <media-query-list>, so I think we should use this, too
| "style-feature": { | ||
| "syntax": "<declaration>: <declaration-value> | <custom-property-name>: <declaration-value>" | ||
| }, |
There was a problem hiding this comment.
| "style-feature": { | |
| "syntax": "<declaration>: <declaration-value> | <custom-property-name>: <declaration-value>" | |
| }, | |
| "style-feature": { | |
| "syntax": "<declaration>" | |
| }, |
@import and @support also use <declaration> to represent a single css declaration, so I think <declaration> has covered <declaration-value> yet
Description
Add
@containerat ruleMotivation
VSCode not correctly syntax hightlighting
Additional details
https://developer.mozilla.org/en-US/docs/Web/CSS/@container
https://drafts.csswg.org/css-conditional-5/#container-rule
Related issues and pull requests