Skip to content

Commit b1c5a7a

Browse files
jacobcassidyjacobcassidy
committed
Add TM token rules for @container styles
1 parent 9d9b08b commit b1c5a7a

File tree

1 file changed

+205
-0
lines changed

1 file changed

+205
-0
lines changed

‎syntaxes/css.tmLanguage.json‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,53 @@
3737
},
3838
"at-rules": {
3939
"patterns": [
40+
{
41+
"begin": "(?i)(?=@container(\\s|\\(|/\\*|$))",
42+
"end": "(?<=})(?!\\G)",
43+
"patterns": [
44+
{
45+
"begin": "(?i)\\G(@)container",
46+
"beginCaptures": {
47+
"0": {
48+
"name": "keyword.control.at-rule.container.css"
49+
},
50+
"1": {
51+
"name": "punctuation.definition.keyword.css"
52+
}
53+
},
54+
"end": "(?=\\s*[{;])",
55+
"name": "meta.at-rule.container.header.css",
56+
"patterns": [
57+
{
58+
"include": "#container-condition"
59+
}
60+
]
61+
},
62+
{
63+
"begin": "{",
64+
"beginCaptures": {
65+
"0": {
66+
"name": "punctuation.section.container.begin.bracket.curly.css"
67+
}
68+
},
69+
"end": "}",
70+
"endCaptures": {
71+
"0": {
72+
"name": "punctuation.section.container.end.bracket.curly.css"
73+
}
74+
},
75+
"name": "meta.at-rule.container.body.css",
76+
"patterns": [
77+
{
78+
"include": "#nesting-at-rules"
79+
},
80+
{
81+
"include": "$self"
82+
}
83+
]
84+
}
85+
]
86+
},
4087
{
4188
"begin": "\\A(?:\\xEF\\xBB\\xBF)?(?i:(?=\\s*@charset\\b))",
4289
"end": ";|(?=$)",
@@ -734,6 +781,164 @@
734781
},
735782
"name": "comment.block.css"
736783
},
784+
"container-condition": {
785+
"begin": "\\G",
786+
"end": "(?=\\s*[{;])",
787+
"patterns": [
788+
{
789+
"include": "#comment-block"
790+
},
791+
{
792+
"include": "#escapes"
793+
},
794+
{
795+
"match": "(?xi)\n (?<=not.*)not\n # Only one `not` in allowed",
796+
"name": "invalid.illegal.multiple-not.container.css"
797+
},
798+
{
799+
"match": "(?i)(?<=\\s|^|,|\\*/)(and|or|not)(?=\\s|{|/\\*|$)",
800+
"name": "keyword.operator.logical.$1.container.css"
801+
},
802+
{
803+
"include": "#container-name"
804+
},
805+
{
806+
"include": "#container-query"
807+
}
808+
]
809+
},
810+
"container-name": {
811+
"begin": "\\G",
812+
"end": "(?xi)\n (?=(?:\\(|not)|style\\()\n # Ends when `(`, `not`, or `style(` is reached",
813+
"patterns": [
814+
{
815+
"include": "#comment-block"
816+
},
817+
{
818+
"captures": {
819+
"1": {
820+
"name": "invalid.illegal.constant.container-name.container.css"
821+
},
822+
"2": {
823+
"name": "support.constant.container-name.container.css"
824+
}
825+
},
826+
"match": "(?xi)\n (?<=^|\\s|\\*/)\n(?:\n # Invalid name\n (default|none)\n |\n # Valid names\n ([a-zA-Z0-9\\-_\\\\]+)\n )\n(?=$|[({\\s;]|/\\*)"
827+
}
828+
]
829+
},
830+
"container-query": {
831+
"begin": "((?<=\\s)\\()|(style)(\\()",
832+
"beginCaptures": {
833+
"1": {
834+
"name": "punctuation.definition.parameters.begin.bracket.round.css"
835+
},
836+
"2": {
837+
"name": "support.style-query.container.css"
838+
},
839+
"3": {
840+
"name": "punctuation.definition.parameters.begin.bracket.round.css"
841+
}
842+
},
843+
"end": "\\)",
844+
"endCaptures": {
845+
"0": {
846+
"name": "punctuation.definition.parameters.end.bracket.round.css"
847+
}
848+
},
849+
"patterns": [
850+
{
851+
"begin": "(?xi)\n (?<=\\s\\()\n # Rules for size <container-query>",
852+
"end": "(?=\\))",
853+
"patterns": [
854+
{
855+
"include": "#container-query-features"
856+
},
857+
{
858+
"include": "#container-size-features"
859+
},
860+
{
861+
"include": "#container-size-feature-keywords"
862+
}
863+
]
864+
},
865+
{
866+
"begin": "(?xi)\n (?<=style\\()\n # Rules for container-query <style-query>",
867+
"end": "(?=\\))",
868+
"name": "style-query.container.css",
869+
"patterns": [
870+
{
871+
"include": "#container-query-features"
872+
},
873+
{
874+
"include": "#container-style-features"
875+
},
876+
{
877+
"include": "#container-style-feature-keywords"
878+
}
879+
]
880+
}
881+
]
882+
},
883+
"container-query-features": {
884+
"patterns": [
885+
{
886+
"match": ":",
887+
"name": "punctuation.separator.key-value.css"
888+
},
889+
{
890+
"match": ">=|<=|=|<|>",
891+
"name": "keyword.operator.comparison.css"
892+
},
893+
{
894+
"include": "#numeric-values"
895+
},
896+
{
897+
"include": "#comment-block"
898+
}
899+
]
900+
},
901+
"container-size-features": {
902+
"match": "(?xi)\n (?<=^|\\s|\\(|\\*/) # Preceded by whitespace, bracket or comment\n (?:\n # Standardised features\n (\n (?:min-|max-)? # Range features\n (?: aspect-ratio\n | block-size\n | height\n | inline-size\n | width\n )\n | orientation\n )\n )\n (?=\\s|$|[><:=]|\\)|/\\*) # Terminates cleanly",
903+
"name": "support.size.property-name.container.css"
904+
},
905+
"container-size-feature-keywords": {
906+
"patterns": [
907+
{
908+
"match": "(?xi)\n (?<=^|\\s|:|\\*/)\n # Preceded by whitespace, colon, or comment\n (?: portrait\n | landscape\n # Orientation\n )\n (?=\\s|\\)|$)",
909+
"name": "support.constant.property-value.container.css"
910+
},
911+
{
912+
"include": "#functions"
913+
}
914+
]
915+
},
916+
"container-style-features": {
917+
"match": "(?x)\n # Custom Property Name\n (?<=^|\\s|\\(|\\*/) # Preceded by whitespace, bracket or comment\n (?<![\\w-])\n --\n (?:[-a-zA-Z_] | [^\\x00-\\x7F]) # First letter\n (?:[-a-zA-Z0-9_] | [^\\x00-\\x7F] # Remainder of identifier\n |\\\\(?:[0-9a-fA-F]{1,6}|.)\n)*",
918+
"name": "variable.style-query.container.css"
919+
},
920+
"container-style-feature-keywords": {
921+
"begin": "(?xi)\n (?<=[\\:\\s*|\\*/])\n # Preceded by colon and zero or more whitespaces, or a comment \n (?:(?!\\s)) # Ignore trailing whitespace",
922+
"end": "(?=[\\s|\\)|$])",
923+
"patterns": [
924+
{
925+
"match": "(true|false)",
926+
"name": "support.constant.boolean.container.css"
927+
},
928+
{
929+
"include": "#functions"
930+
},
931+
{
932+
"include": "#property-keywords"
933+
},
934+
{
935+
"include": "#unicode-range"
936+
},
937+
{
938+
"include": "#color-keywords"
939+
}
940+
]
941+
},
737942
"escapes": {
738943
"patterns": [
739944
{

0 commit comments

Comments
 (0)