fix(css/codegen): Improve output of @supports (#5529)

crates/swc_css_codegen/src/ctx.rs

@@ -19,7 +19,9 @@ where
 }
 
 #[derive(Debug, Default, Clone, Copy)]
-pub(crate) struct Ctx {}
+pub(crate) struct Ctx {
+    pub in_at_rule_prelude: bool,
+}
 
 pub(super) struct WithCtx<'w, I: 'w + CssWriter> {
     inner: &'w mut CodeGenerator<I>,

crates/swc_css_codegen/src/lib.rs

@@ -93,7 +93,13 @@ where
         emit!(self, n.name);
 
         if let Some(prelude) = &n.prelude {
-            emit!(self, prelude);
+            emit!(
+                &mut *self.with_ctx(Ctx {
+                    in_at_rule_prelude: true,
+                    ..self.ctx
+                }),
+                prelude
+            );
         }
 
         if n.block.is_some() {
@@ -212,7 +218,15 @@ where
             }
             AtRulePrelude::SupportsPrelude(n) => {
                 match n.conditions.get(0) {
-                    Some(SupportsConditionType::SupportsInParens(_)) => {
+                    Some(SupportsConditionType::SupportsInParens(
+                        SupportsInParens::SupportsCondition(_),
+                    ))
+                    | Some(SupportsConditionType::SupportsInParens(SupportsInParens::Feature(
+                        SupportsFeature::Declaration(_),
+                    )))
+                    | Some(SupportsConditionType::SupportsInParens(
+                        SupportsInParens::GeneralEnclosed(GeneralEnclosed::SimpleBlock(_)),
+                    )) => {
                         formatting_space!(self);
                     }
                     _ => {
@@ -525,7 +539,14 @@ where
 
     #[emitter]
     fn emit_supports_condition(&mut self, n: &SupportsCondition) -> Result {
-        self.emit_list(&n.conditions, ListFormat::NotDelimited)?;
+        self.emit_list(
+            &n.conditions,
+            if self.config.minify {
+                ListFormat::NotDelimited
+            } else {
+                ListFormat::SpaceDelimited
+            },
+        )?;
     }
 
     #[emitter]
@@ -540,7 +561,6 @@ where
 
     #[emitter]
     fn emit_supports_not(&mut self, n: &SupportsNot) -> Result {
-        formatting_space!(self);
         emit!(self, n.keyword);
         space!(self);
         emit!(self, n.condition);
@@ -548,7 +568,6 @@ where
 
     #[emitter]
     fn emit_supports_and(&mut self, n: &SupportsAnd) -> Result {
-        formatting_space!(self);
         emit!(self, n.keyword);
         space!(self);
         emit!(self, n.condition);
@@ -556,7 +575,6 @@ where
 
     #[emitter]
     fn emit_support_or(&mut self, n: &SupportsOr) -> Result {
-        formatting_space!(self);
         emit!(self, n.keyword);
         space!(self);
         emit!(self, n.condition);
@@ -1665,7 +1683,7 @@ where
     fn emit_selector_list(&mut self, n: &SelectorList) -> Result {
         self.emit_list(
             &n.children,
-            if self.config.minify {
+            if self.config.minify || self.ctx.in_at_rule_prelude {
                 ListFormat::CommaDelimited
             } else {
                 ListFormat::CommaDelimited | ListFormat::MultiLine
@@ -1728,8 +1746,8 @@ where
 
     #[emitter]
     fn emit_compound_selector(&mut self, n: &CompoundSelector) -> Result {
-        emit!(&mut *self.with_ctx(self.ctx), n.nesting_selector);
+        emit!(self, n.nesting_selector);
-        emit!(&mut *self.with_ctx(self.ctx), n.type_selector);
+        emit!(self, n.type_selector);
 
         self.emit_list(&n.subclass_selectors, ListFormat::NotDelimited)?;
     }

crates/swc_css_codegen/tests/fixture/at-rules/supports/1/input.css

@@ -12,3 +12,22 @@
 
 @supports not (not (transform-origin: 2px)) {}
 @supports (display: grid) and (not (display: inline-grid)) {}
+@supports not (not (display: flex)) {
+    body {
+        background: red;
+    }
+}
+@supports not (not (not (not (display: flex)))) {
+    body {
+        background: red;
+    }
+}
+@supports selector(A > B) {}
+@supports (display: grid) and (not (display: inline-grid)) {}
+@supports (display: table-cell) and (display: list-item) and (display:contents) {}
+@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {}
+@supports (--foo: green) {}
+@supports not selector(:is(a, b)) {}
+@supports selector(:nth-child(1n of a, b)) {}
+@supports (display: flex) and selector(:nth-child(1n of a, b)) {}
+@supports selector(:nth-child(1n of a, b)) and (display: flex) {}

crates/swc_css_codegen/tests/fixture/at-rules/supports/1/output.css

@@ -3,10 +3,29 @@
     color: hotpink;
   }
 }
-@supports  not (display: grid) {
+@supports not (display: grid) {
   div {
     float: right;
   }
 }
-@supports  not ( not (transform-origin: 2px)) {}
+@supports not (not (transform-origin: 2px)) {}
-@supports (display: grid) and ( not (display: inline-grid)) {}
+@supports (display: grid) and (not (display: inline-grid)) {}
+@supports not (not (display: flex)) {
+  body {
+    background: red;
+  }
+}
+@supports not (not (not (not (display: flex)))) {
+  body {
+    background: red;
+  }
+}
+@supports selector(A > B) {}
+@supports (display: grid) and (not (display: inline-grid)) {}
+@supports (display: table-cell) and (display: list-item) and (display: contents) {}
+@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {}
+@supports (--foo: green) {}
+@supports not selector(:is(a, b)) {}
+@supports selector(:nth-child(1n of a, b)) {}
+@supports (display: flex) and selector(:nth-child(1n of a, b)) {}
+@supports selector(:nth-child(1n of a, b)) and (display: flex) {}

crates/swc_css_codegen/tests/fixture/at-rules/supports/1/output.min.css

@@ -1 +1 @@
-@supports(display:flex){h1{color:hotpink}}@supports not (display:grid){div{float:right}}@supports not (not (transform-origin:2px)){}@supports(display:grid)and (not (display:inline-grid)){}
+@supports(display:flex){h1{color:hotpink}}@supports not (display:grid){div{float:right}}@supports not (not (transform-origin:2px)){}@supports(display:grid)and (not (display:inline-grid)){}@supports not (not (display:flex)){body{background:red}}@supports not (not (not (not (display:flex)))){body{background:red}}@supports selector(A>B){}@supports(display:grid)and (not (display:inline-grid)){}@supports(display:table-cell)and (display:list-item)and (display:contents){}@supports not ((text-align-last:justify)or (-moz-text-align-last:justify)){}@supports(--foo:green){}@supports not selector(:is(a,b)){}@supports selector(:nth-child(n of a,b)){}@supports(display:flex)and selector(:nth-child(n of a,b)){}@supports selector(:nth-child(n of a,b))and (display:flex){}

crates/swc_css_codegen/tests/fixture/style-blocks-contents/basic/output.css

@@ -31,7 +31,7 @@
   }
 }
 .class {
-  @supports  not (display: grid) {
+  @supports not (display: grid) {
     float: right;
     & .class {
       color: red;
@@ -40,7 +40,7 @@
 }
 .class {
   color: blue;
-  @supports  not (display: grid) {
+  @supports not (display: grid) {
     float: right;
     & .class {
       color: red;
@@ -52,7 +52,7 @@
   &.foo {
     color: green;
   }
-  @supports  not (display: grid) {
+  @supports not (display: grid) {
     float: right;
     & .class {
       color: red;

crates/swc_css_codegen/tests/fixture/style-blocks-contents/recovery/output.css

@@ -20,7 +20,7 @@ a {
   &.foo {
     ident
          color: green;}
-  @supports  not (display: grid) {
+  @supports not (display: grid) {
     float: right;
     & .class {
       ident
@@ -33,7 +33,7 @@ a {
   &.foo {
     ident;color: green;
   }
-  @supports  not (display: grid) {
+  @supports not (display: grid) {
     float: right;
     & .class {
       ident;color: red;

crates/swc_css_prefixer/tests/fixture/supports/output.css

@@ -7,12 +7,12 @@
     display: flex;
   }
 }
-@supports  not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) {
+@supports not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) {
   a {
     color: #000;
   }
 }
-@supports  not ( not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox))) {
+@supports not (not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox))) {
   a {
     color: #000;
   }
@@ -53,7 +53,7 @@
     display: flex;
   }
 }
-@supports (((perspective: 1px) or (-webkit-perspective: 1px) or (-moz-perspective: 1px)) and ( not (-webkit-overflow-scrolling: touch))) {
+@supports (((perspective: 1px) or (-webkit-perspective: 1px) or (-moz-perspective: 1px)) and (not (-webkit-overflow-scrolling: touch))) {
   a {
     color: #000;
   }

crates/swc_css_prefixer/tests/fixture/supports/output.defaults-not-ie-11.css

@@ -3,12 +3,12 @@
     display: flex;
   }
 }
-@supports  not (display: flex) {
+@supports not (display: flex) {
   a {
     color: #000;
   }
 }
-@supports  not ( not (display: flex)) {
+@supports not (not (display: flex)) {
   a {
     color: #000;
   }
@@ -33,7 +33,7 @@
     display: flex;
   }
 }
-@supports ((perspective: 1px) and ( not (-webkit-overflow-scrolling: touch))) {
+@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
   a {
     color: #000;
   }