Add @container CSS at-rule to the relaxed config

rgrove · rgrove · commit 45dbeac42618 · 2024-12-29T20:52:04.000-08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@ Sanitize itself has no breaking API changes in this release, but the major versi
 
 - Added over 100 new CSS properties to the relaxed config, representing all properties that are listed with a status of "Working Draft" or better in the latest [W3C "All Properties" list](https://www.w3.org/Style/CSS/all-properties.en.html).
 
+- Added the `@container` CSS at-rule to the relaxed config.
+
 - Added the `-webkit-text-fill-color` CSS property to the relaxed config. [@radar - #244](https://github.com/rgrove/sanitize/pull/244)
 
 ### Changed
diff --git a/lib/sanitize/config/relaxed.rb b/lib/sanitize/config/relaxed.rb
@@ -63,6 +63,7 @@ module Config
           -moz-keyframes
           -o-keyframes
           -webkit-keyframes
+          container
           document
           keyframes
           media
diff --git a/test/test_sanitize_css.rb b/test/test_sanitize_css.rb
@@ -329,6 +329,41 @@
         ).strip
       end
 
+      it "preserves allowlisted @container at-rules" do
+        # Sample code courtesy of MDN:
+        # https://developer.mozilla.org/en-US/docs/Web/CSS/@container
+        css = %(
+          @container (width > 400px) {
+            h2 {
+              font-size: 1.5em;
+            }
+          }
+
+          /* with an optional <container-name> */
+          @container tall (height > 30rem) {
+            h2 {
+              line-height: 1.6;
+            }
+          }
+
+          /* multiple queries in a single condition */
+          @container (width > 400px) and style(--responsive: true) {
+            h2 {
+              font-size: 1.5em;
+            }
+          }
+
+          /* condition list */
+          @container card (width > 400px), style(--responsive: true) {
+            h2 {
+              font-size: 1.5em;
+            }
+          }
+        ).strip
+
+        _(@relaxed.stylesheet(css).strip).must_equal css
+      end
+
       describe "when blockless at-rules are allowlisted" do
         before do
           @scss = Sanitize::CSS.new(Sanitize::Config.merge(Sanitize::Config::RELAXED[:css], {
