From 1393e92257907479ad5ddf3dcc4c186844821c18 Mon Sep 17 00:00:00 2001
From: Carlos Hernandez <113306650+wileycoyote78@users.noreply.github.com>
Date: Sat, 12 Aug 2023 21:07:15 -0400
Subject: [PATCH 1/3] Added container at-rule support

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.
---
 grammars/css.cson | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/grammars/css.cson b/grammars/css.cson
index 0a243e3..f938186 100644
--- a/grammars/css.cson
+++ b/grammars/css.cson
@@ -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\'"{;]|/\\*|$))'

From 5f3653a5a445dfbfc35c4f8e4ea0c891a6923668 Mon Sep 17 00:00:00 2001
From: Carlos Hernandez <113306650+wileycoyote78@users.noreply.github.com>
Date: Sat, 12 Aug 2023 21:28:57 -0400
Subject: [PATCH 2/3] Update README.md

Added comments on what I changed.
---
 README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/README.md b/README.md
index 4193154..cb0eaa0 100644
--- a/README.md
+++ b/README.md
@@ -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.

From 7c950c6290346c6c78fd6e3e1dc9f5b4bcf38486 Mon Sep 17 00:00:00 2001
From: Carlos Hernandez <113306650+wileycoyote78@users.noreply.github.com>
Date: Sat, 12 Aug 2023 21:48:13 -0400
Subject: [PATCH 3/3] Added aspect-ratio

Added 'aspect-ratio' to the Standard CSS list
---
 grammars/css.cson | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grammars/css.cson b/grammars/css.cson
index f938186..d492914 100644
--- a/grammars/css.cson
+++ b/grammars/css.cson
@@ -1536,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