fix #4395 close #4405 close #4406: parens for or

Author: evanw

CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## Unreleased
+
+* Fix a regression with CSS media queries ([#4395](https://github.com/evanw/esbuild/issues/4395), [#4405](https://github.com/evanw/esbuild/issues/4405), [#4406](https://github.com/evanw/esbuild/issues/4406))
+
+    Version 0.25.11 of esbuild introduced support for parsing media queries. This unintentionally introduced a regression with printing media queries that use the `<media-type> and <media-condition-without-or>` grammar. Specifically, esbuild was failing to wrap an `or` clause with parentheses when inside `<media-condition-without-or>`. This release fixes the regression.
+
+    Here is an example:
+
+    ```css
+    /* Original code */
+    @media only screen and ((min-width: 10px) or (min-height: 10px)) {
+      a { color: red }
+    }
+
+    /* Old output (incorrect) */
+    @media only screen and (min-width: 10px) or (min-height: 10px) {
+      a {
+        color: red;
+      }
+    }
+
+    /* New output (correct) */
+    @media only screen and ((min-width: 10px) or (min-height: 10px)) {
+      a {
+        color: red;
+      }
+    }
+    ```
+
 ## 0.27.3
 
 * Preserve URL fragments in data URLs ([#4370](https://github.com/evanw/esbuild/issues/4370))

internal/css_parser/css_parser_test.go

@@ -2639,6 +2639,16 @@ func TestMangleAtMedia(t *testing.T) {
 	expectPrintedMangle(t, "@media (a) and ((b) or (c)) { a { color: red } }", "@media (a) and ((b) or (c)) {\n  a {\n    color: red;\n  }\n}\n", "")
 	expectPrintedMangle(t, "@media (a) or ((b) and (c)) { a { color: red } }", "@media (a) or ((b) and (c)) {\n  a {\n    color: red;\n  }\n}\n", "")
 
+	expectPrintedMangle(t, "@media screen and (((a) and (b)) and (c)) { a { color: red } }", "@media screen and (a) and (b) and (c) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedMangle(t, "@media screen and (((a) or (b)) or (c)) { a { color: red } }", "@media screen and ((a) or (b) or (c)) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedMangle(t, "@media screen and ((a) and ((b) and (c))) { a { color: red } }", "@media screen and (a) and (b) and (c) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedMangle(t, "@media screen and ((a) or ((b) or (c))) { a { color: red } }", "@media screen and ((a) or (b) or (c)) {\n  a {\n    color: red;\n  }\n}\n", "")
+
+	expectPrintedMangle(t, "@media screen and (((a) and (b)) or (c)) { a { color: red } }", "@media screen and (((a) and (b)) or (c)) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedMangle(t, "@media screen and (((a) or (b)) and (c)) { a { color: red } }", "@media screen and ((a) or (b)) and (c) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedMangle(t, "@media screen and ((a) and ((b) or (c))) { a { color: red } }", "@media screen and (a) and ((b) or (c)) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedMangle(t, "@media screen and ((a) or ((b) and (c))) { a { color: red } }", "@media screen and ((a) or ((b) and (c))) {\n  a {\n    color: red;\n  }\n}\n", "")
+
 	expectPrintedMangle(t, "@media not (not (color)) { a { color: red } }", "@media (color) {\n  a {\n    color: red;\n  }\n}\n", "")
 	expectPrintedMangle(t, "@media not (not (not (color))) { a { color: red } }", "@media not (color) {\n  a {\n    color: red;\n  }\n}\n", "")
 	expectPrintedMangle(t, "@media not (not (not (not (color)))) { a { color: red } }", "@media (color) {\n  a {\n    color: red;\n  }\n}\n", "")

internal/css_printer/css_printer.go

@@ -444,7 +444,11 @@ func (p *printer) printMediaQuery(query css_ast.MediaQuery, flags mqFlags) {
 		p.printIdent(q.Type, identNormal, 0)
 		if q.AndOrNull.Data != nil {
 			p.print(" and ")
-			p.printMediaQuery(q.AndOrNull, 0)
+			var flags mqFlags
+			if binary, ok := q.AndOrNull.Data.(*css_ast.MQBinary); ok && binary.Op == css_ast.MQBinaryOpOr {
+				flags = mqNeedsParens
+			}
+			p.printMediaQuery(q.AndOrNull, flags)
 		}
 
 	case *css_ast.MQNot: