feat: add @container at-rule

css/at-rules.json

@@ -120,6 +120,17 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/@counter-style"
   },
+  "@container": {
+    "syntax": "@container <container-condition># {\n  <group-rule-body>\n}",
+    "interfaces": [
+      "CSSContainerRule"
+    ],
+    "groups": [
+      "CSS Conditional Rules"
+    ],
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/@container"
+  },
   "@document": {
     "syntax": "@document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# {\n  <group-rule-body>\n}",
     "interfaces": [

css/syntaxes.json

@@ -206,6 +206,39 @@
   "conic-gradient()": {
     "syntax": "conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )"
   },
+  "container-name": {
+    "syntax": "<custom-ident>"
+  },
+  "container-query": {
+    "syntax": "not <query-in-parens> | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]"
+  },
+  "query-in-parens": {
+    "syntax": "( <container-query> ) | ( <size-feature> ) | style( <style-query> ) | scroll-state( <scroll-state-query> ) | <general-enclosed>"
+  },
+  "style-query": {
+    "syntax": "not <style-in-parens> | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ] | <style-feature> "
+  },
+  "style-in-parens": {
+    "syntax": "( <style-query> ) | ( <style-feature> ) | <general-enclosed>"
+  },
+  "scroll-state-query": {
+    "syntax": "not <scroll-state-in-parens> | <scroll-state-in-parens> [ [ and <scroll-state-in-parens> ]* | [ or <scroll-state-in-parens> ]* ] | <scroll-state-feature>  "
+  },
+  "scroll-state-in-parens": {
+    "syntax": "( <scroll-state-query> ) | ( <scroll-state-feature> ) | <general-enclosed>"
+  },
+  "scroll-state-feature": {
+    "syntax": "<media-feature>"
+  },
+  "size-feature": {
+    "syntax": "<media-feature>"
+  },
+  "style-feature": {
+    "syntax": "<declaration>: <declaration-value> | <custom-property-name>: <declaration-value>"
+  },
+  "container-condition": {
+    "syntax": "[ <container-name>? <container-query>? ]!"
+  },
   "content-distribution": {
     "syntax": "space-between | space-around | space-evenly | stretch"
   },