fix(css): Allow empty @media at-rule (#3404)

swc-project · Jan 30, 2022 · 75a14f9 · 75a14f9 · github-actions · Jan 30, 2022
1 parent a143e96
commit 75a14f9
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 11 deletions.
diff --git a/crates/swc_css_ast/src/at_rule/media.rs b/crates/swc_css_ast/src/at_rule/media.rs
@@ -5,7 +5,7 @@ use swc_common::{ast_node, EqIgnoreSpan, Span};
 #[ast_node("MediaRule")]
 pub struct MediaRule {
     pub span: Span,
-    pub media: MediaQueryList,
+    pub media: Option<MediaQueryList>,
     pub rules: Vec<Rule>,
 }
 

diff --git a/crates/swc_css_codegen/src/lib.rs b/crates/swc_css_codegen/src/lib.rs
@@ -288,11 +288,14 @@ where
     fn emit_media_rule(&mut self, n: &MediaRule) -> Result {
         punct!(self, "@");
         keyword!(self, "media");
-        space!(self);
-
-        emit!(self, n.media);
 
-        formatting_space!(self);
+        if n.media.is_some() {
+            space!(self);
+            emit!(self, n.media);
+            formatting_space!(self);
+        } else {
+            formatting_space!(self);
+        }
 
         punct!(self, "{");
         self.emit_list(&n.rules, ListFormat::NotDelimited | ListFormat::MultiLine)?;

diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/media/3/input.css b/crates/swc_css_codegen/tests/fixture/at-rules/media/3/input.css
@@ -0,0 +1,5 @@
+@media {
+    div {
+        color: red
+    }
+}
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/media/3/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/media/3/output.css
@@ -0,0 +1 @@
+@media {div {color: red}}
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/media/3/output.min.css b/crates/swc_css_codegen/tests/fixture/at-rules/media/3/output.min.css
@@ -0,0 +1 @@
+@media{div{color:red}}
diff --git a/crates/swc_css_parser/src/parser/at_rule.rs b/crates/swc_css_parser/src/parser/at_rule.rs
@@ -811,7 +811,14 @@ where
 {
     fn parse(&mut self) -> PResult<MediaRule> {
         let span = self.input.cur_span()?;
-        let media = self.parse()?;
+
+        let media = if !is!(self, "{") {
+            let media_query_list = self.parse()?;
+
+            Some(media_query_list)
+        } else {
+            None
+        };
 
         expect!(self, "{");
 

diff --git a/crates/swc_css_parser/tests/fixture/at-rule/media/input.css b/crates/swc_css_parser/tests/fixture/at-rule/media/input.css
@@ -108,3 +108,6 @@
 @media ONLY screen AND (color) {}
 @media ((min-width: 800px) AND (min-width: 800px)) OR (min-width: 800px) {}
 @media (min-width: 800px) AND ((min-width: 800px) OR (min-width: 800px)) {}
+
+@media {}
+@media    {}
diff --git a/crates/swc_css_parser/tests/fixture/at-rule/media/output.json b/crates/swc_css_parser/tests/fixture/at-rule/media/output.json
@@ -2,7 +2,7 @@
   "type": "Stylesheet",
   "span": {
     "start": 0,
-    "end": 3935,
+    "end": 3959,
     "ctxt": 0
   },
   "rules": [
@@ -9801,6 +9801,26 @@
         ]
       },
       "rules": []
+    },
+    {
+      "type": "MediaRule",
+      "span": {
+        "start": 3936,
+        "end": 3945,
+        "ctxt": 0
+      },
+      "media": null,
+      "rules": []
+    },
+    {
+      "type": "MediaRule",
+      "span": {
+        "start": 3946,
+        "end": 3958,
+        "ctxt": 0
+      },
+      "media": null,
+      "rules": []
     }
   ]
 }
diff --git a/crates/swc_css_parser/tests/fixture/at-rule/media/span.rust-debug b/crates/swc_css_parser/tests/fixture/at-rule/media/span.rust-debug
@@ -6,9 +6,9 @@ error: Stylesheet
 3   | |
 4   | | @media all {}
 ...   |
-109 | | @media ((min-width: 800px) AND (min-width: 800px)) OR (min-width: 800px) {}
-110 | | @media (min-width: 800px) AND ((min-width: 800px) OR (min-width: 800px)) {}
-    | |____________________________________________________________________________^
+112 | | @media {}
+113 | | @media    {}
+    | |_____________^
 
 error: Rule
  --> $DIR/tests/fixture/at-rule/media/input.css:1:1
@@ -11098,3 +11098,39 @@ error: Ident
 110 | @media (min-width: 800px) AND ((min-width: 800px) OR (min-width: 800px)) {}
     |                                                                     ^^
 
+error: Rule
+   --> $DIR/tests/fixture/at-rule/media/input.css:112:1
+    |
+112 | @media {}
+    | ^^^^^^^^^
+
+error: AtRule
+   --> $DIR/tests/fixture/at-rule/media/input.css:112:1
+    |
+112 | @media {}
+    | ^^^^^^^^^
+
+error: MediaRule
+   --> $DIR/tests/fixture/at-rule/media/input.css:112:1
+    |
+112 | @media {}
+    | ^^^^^^^^^
+
+error: Rule
+   --> $DIR/tests/fixture/at-rule/media/input.css:113:1
+    |
+113 | @media    {}
+    | ^^^^^^^^^^^^
+
+error: AtRule
+   --> $DIR/tests/fixture/at-rule/media/input.css:113:1
+    |
+113 | @media    {}
+    | ^^^^^^^^^^^^
+
+error: MediaRule
+   --> $DIR/tests/fixture/at-rule/media/input.css:113:1
+    |
+113 | @media    {}
+    | ^^^^^^^^^^^^
+
diff --git a/crates/swc_css_visit/src/lib.rs b/crates/swc_css_visit/src/lib.rs
@@ -465,7 +465,7 @@ define!({
 
     pub struct MediaRule {
         pub span: Span,
-        pub media: MediaQueryList,
+        pub media: Option<MediaQueryList>,
         pub rules: Vec<Rule>,
     }
Benchmark suite	Current: `75a14f9`	Previous: `a143e96`	Ratio
`full_es2015`	`198488022` ns/iter (`± 16221027`)	`216145441` ns/iter (`± 11593247`)	`0.92`
`full_es2016`	`207563248` ns/iter (`± 26300078`)	`232522387` ns/iter (`± 12494375`)	`0.89`
`full_es2017`	`223464138` ns/iter (`± 23902020`)	`232377488` ns/iter (`± 13594701`)	`0.96`
`full_es2018`	`215882513` ns/iter (`± 26337035`)	`231304684` ns/iter (`± 14348681`)	`0.93`
`full_es2019`	`213246685` ns/iter (`± 19842885`)	`229908377` ns/iter (`± 11795294`)	`0.93`
`full_es2020`	`185418499` ns/iter (`± 16434662`)	`198903844` ns/iter (`± 11178999`)	`0.93`
`full_es3`	`258847015` ns/iter (`± 32928689`)	`279973758` ns/iter (`± 16191672`)	`0.92`
`full_es5`	`263781241` ns/iter (`± 42510880`)	`288946924` ns/iter (`± 17263110`)	`0.91`
`parser`	`860119` ns/iter (`± 96221`)	`906178` ns/iter (`± 113355`)	`0.95`