fix #3748, fix #4293: lower css media range syntax

Author: evanw

CHANGELOG.md

@@ -14,6 +14,28 @@
     console.log('size:', width + '\xD7' + height)
     ```
 
+* Lower CSS media query range syntax ([#3748](https://github.com/evanw/esbuild/issues/3748), [#4293](https://github.com/evanw/esbuild/issues/4293))
+
+    With this release, esbuild will now transform CSS media query range syntax into equivalent syntax using `min-`/`max-` prefixes for older browsers. For example, the following CSS:
+
+    ```css
+    @media (640px <= width <= 960px) {
+      main {
+        display: flex;
+      }
+    }
+    ```
+
+    will be transformed like this with a target such as `--target=chrome100` (or more specifically with `--supported:media-range=false` if desired):
+
+    ```css
+    @media (min-width: 640px) and (max-width: 960px) {
+      main {
+        display: flex;
+      }
+    }
+    ```
+
 ## 0.25.10
 
 * Fix a panic in a minification edge case ([#4287](https://github.com/evanw/esbuild/issues/4287))

compat-table/src/caniuse.ts

@@ -29,6 +29,7 @@ const jsFeatures: Record<string, JSFeature> = {
 
 const cssFeatures: Record<string, CSSFeature> = {
   'css-matches-pseudo': 'IsPseudoClass',
+  'css-media-range-syntax': 'MediaRange',
 }
 
 const cssPrefixFeatures: Record<string, CSSProperty> = {

compat-table/src/index.ts

@@ -100,6 +100,7 @@ export const cssFeatures = {
   InlineStyle: true,
   InsetProperty: true,
   IsPseudoClass: true,
+  MediaRange: true,
   Modern_RGB_HSL: true,
   Nesting: true,
   RebeccaPurple: true,

internal/compat/css_table.go

@@ -18,6 +18,7 @@ const (
 	InlineStyle
 	InsetProperty
 	IsPseudoClass
+	MediaRange
 	Modern_RGB_HSL
 	Nesting
 	RebeccaPurple
@@ -33,6 +34,7 @@ var StringToCSSFeature = map[string]CSSFeature{
 	"inline-style":             InlineStyle,
 	"inset-property":           InsetProperty,
 	"is-pseudo-class":          IsPseudoClass,
+	"media-range":              MediaRange,
 	"modern-rgb-hsl":           Modern_RGB_HSL,
 	"nesting":                  Nesting,
 	"rebecca-purple":           RebeccaPurple,
@@ -111,6 +113,14 @@ var cssTable = map[CSSFeature]map[Engine][]versionRange{
 		Opera:   {{start: v{75, 0, 0}}},
 		Safari:  {{start: v{14, 0, 0}}},
 	},
+	MediaRange: {
+		Chrome:  {{start: v{104, 0, 0}}},
+		Edge:    {{start: v{104, 0, 0}}},
+		Firefox: {{start: v{63, 0, 0}}},
+		IOS:     {{start: v{16, 4, 0}}},
+		Opera:   {{start: v{91, 0, 0}}},
+		Safari:  {{start: v{16, 4, 0}}},
+	},
 	Modern_RGB_HSL: {
 		Chrome:  {{start: v{66, 0, 0}}},
 		Edge:    {{start: v{79, 0, 0}}},

internal/css_ast/css_ast.go

@@ -973,6 +973,20 @@ func (cmp MQCmp) Flip() MQCmp {
 	return cmp
 }
 
+func (cmp MQCmp) Reverse() MQCmp {
+	switch cmp {
+	case MQCmpLt:
+		return MQCmpGt
+	case MQCmpLe:
+		return MQCmpGe
+	case MQCmpGt:
+		return MQCmpLt
+	case MQCmpGe:
+		return MQCmpLe
+	}
+	return cmp
+}
+
 type ComplexSelector struct {
 	Selectors []CompoundSelector
 }

internal/css_parser/css_parser_media.go

@@ -3,6 +3,7 @@ package css_parser
 import (
 	"strings"
 
+	"github.com/evanw/esbuild/internal/compat"
 	"github.com/evanw/esbuild/internal/css_ast"
 	"github.com/evanw/esbuild/internal/css_lexer"
 	"github.com/evanw/esbuild/internal/logger"
@@ -191,73 +192,116 @@ func (p *parser) parseMediaInParens() (css_ast.MediaQuery, bool) {
 		return css_ast.MediaQuery{}, false
 	}
 	tokens := p.convertTokens(p.tokens[start:end])
+	loc := tokens[0].Loc
 
 	// Potentially pattern-match the tokens inside the parentheses
 	if !isFunction && len(tokens) == 1 {
 		if children := tokens[0].Children; children != nil {
-			if mfPlain, ok := parsePlainOrBooleanMediaFeature(*children); ok {
-				return mfPlain, true
+			if term, ok := parsePlainOrBooleanMediaFeature(*children); ok {
+				return css_ast.MediaQuery{Loc: loc, Data: term}, true
 			}
-			if mfRange, ok := parseRangeMediaFeature(*children); ok {
-				return mfRange, true
+			if term, ok := parseRangeMediaFeature(*children); ok {
+				if p.options.unsupportedCSSFeatures.Has(compat.MediaRange) {
+					var terms []css_ast.MediaQuery
+					if term.BeforeCmp != css_ast.MQCmpNone {
+						terms = append(terms, lowerMediaRange(term.NameLoc, term.Name, term.BeforeCmp.Reverse(), term.Before))
+					}
+					if term.AfterCmp != css_ast.MQCmpNone {
+						terms = append(terms, lowerMediaRange(term.NameLoc, term.Name, term.AfterCmp, term.After))
+					}
+					if len(terms) == 1 {
+						return terms[0], true
+					} else {
+						return css_ast.MediaQuery{Loc: loc, Data: &css_ast.MQBinary{Op: css_ast.MQBinaryOpAnd, Terms: terms}}, true
+					}
+				}
+				return css_ast.MediaQuery{Loc: loc, Data: term}, true
 			}
 		}
 	}
-	return css_ast.MediaQuery{Loc: tokens[0].Loc, Data: &css_ast.MQGeneralEnclosed{Tokens: tokens}}, true
+	return css_ast.MediaQuery{Loc: loc, Data: &css_ast.MQGeneralEnclosed{Tokens: tokens}}, true
+}
+
+func lowerMediaRange(loc logger.Loc, name string, cmp css_ast.MQCmp, value []css_ast.Token) css_ast.MediaQuery {
+	switch cmp {
+	case css_ast.MQCmpLe:
+		// "foo <= 123" => "max-foo: 123"
+		return css_ast.MediaQuery{Loc: loc, Data: &css_ast.MQPlainOrBoolean{Name: "max-" + name, ValueOrNil: value}}
+
+	case css_ast.MQCmpGe:
+		// "foo >= 123" => "min-foo: 123"
+		return css_ast.MediaQuery{Loc: loc, Data: &css_ast.MQPlainOrBoolean{Name: "min-" + name, ValueOrNil: value}}
+
+	case css_ast.MQCmpLt:
+		// "foo < 123" => "not (min-foo: 123)"
+		return css_ast.MediaQuery{Loc: loc, Data: &css_ast.MQNot{
+			Inner: css_ast.MediaQuery{Loc: loc, Data: &css_ast.MQPlainOrBoolean{Name: "min-" + name, ValueOrNil: value}},
+		}}
+
+	case css_ast.MQCmpGt:
+		// "foo > 123" => "not (max-foo: 123)"
+		return css_ast.MediaQuery{Loc: loc, Data: &css_ast.MQNot{
+			Inner: css_ast.MediaQuery{Loc: loc, Data: &css_ast.MQPlainOrBoolean{Name: "max-" + name, ValueOrNil: value}},
+		}}
+
+	default:
+		// "foo = 123" => "foo: 123"
+		return css_ast.MediaQuery{Loc: loc, Data: &css_ast.MQPlainOrBoolean{Name: name, ValueOrNil: value}}
+	}
 }
 
-func parsePlainOrBooleanMediaFeature(tokens []css_ast.Token) (css_ast.MediaQuery, bool) {
+func parsePlainOrBooleanMediaFeature(tokens []css_ast.Token) (*css_ast.MQPlainOrBoolean, bool) {
 	if len(tokens) == 1 && tokens[0].Kind == css_lexer.TIdent {
-		return css_ast.MediaQuery{Loc: tokens[0].Loc, Data: &css_ast.MQPlainOrBoolean{Name: tokens[0].Text}}, true
+		return &css_ast.MQPlainOrBoolean{Name: tokens[0].Text}, true
 	}
 	if len(tokens) >= 3 && tokens[0].Kind == css_lexer.TIdent && tokens[1].Kind == css_lexer.TColon {
 		if value, rest := scanMediaValue(tokens[2:]); len(rest) == 0 {
-			return css_ast.MediaQuery{Loc: tokens[0].Loc, Data: &css_ast.MQPlainOrBoolean{Name: tokens[0].Text, ValueOrNil: value}}, true
+			return &css_ast.MQPlainOrBoolean{Name: tokens[0].Text, ValueOrNil: value}, true
 		}
 	}
-	return css_ast.MediaQuery{}, false
+	return nil, false
 }
 
-func parseRangeMediaFeature(tokens []css_ast.Token) (css_ast.MediaQuery, bool) {
+func parseRangeMediaFeature(tokens []css_ast.Token) (*css_ast.MQRange, bool) {
 	if first, tokens := scanMediaValue(tokens); len(first) > 0 {
 		if firstCmp, tokens := scanMediaComparison(tokens); firstCmp != css_ast.MQCmpNone {
 			if second, tokens := scanMediaValue(tokens); len(second) > 0 {
 				if len(tokens) == 0 {
 					if name, nameLoc, ok := isSingleIdent(first); ok {
-						return css_ast.MediaQuery{Loc: first[0].Loc, Data: &css_ast.MQRange{
+						return &css_ast.MQRange{
 							Name:     name,
 							NameLoc:  nameLoc,
 							AfterCmp: firstCmp,
 							After:    second,
-						}}, true
+						}, true
 					} else if name, nameLoc, ok := isSingleIdent(second); ok {
-						return css_ast.MediaQuery{Loc: first[0].Loc, Data: &css_ast.MQRange{
+						return &css_ast.MQRange{
 							Before:    first,
 							BeforeCmp: firstCmp,
 							Name:      name,
 							NameLoc:   nameLoc,
-						}}, true
+						}, true
 					}
 				} else if name, nameLoc, ok := isSingleIdent(second); ok {
 					if secondCmp, tokens := scanMediaComparison(tokens); secondCmp != css_ast.MQCmpNone {
 						if f, s := firstCmp.Dir(), secondCmp.Dir(); (f < 0 && s < 0) || (f > 0 && s > 0) {
 							if third, tokens := scanMediaValue(tokens); len(third) > 0 && len(tokens) == 0 {
-								return css_ast.MediaQuery{Loc: first[0].Loc, Data: &css_ast.MQRange{
+								return &css_ast.MQRange{
 									Before:    first,
 									BeforeCmp: firstCmp,
 									Name:      name,
 									NameLoc:   nameLoc,
 									AfterCmp:  secondCmp,
 									After:     third,
-								}}, true
+								}, true
 							}
 						}
 					}
 				}
 			}
 		}
 	}
-	return css_ast.MediaQuery{}, false
+	return nil, false
 }
 
 func (p *parser) maybeSimplifyMediaNot(loc logger.Loc, inner css_ast.MediaQuery) css_ast.MediaQuery {

internal/css_parser/css_parser_test.go

@@ -2625,6 +2625,40 @@ func TestMangleAtMedia(t *testing.T) {
 	expectPrintedMangle(t, "@media not (1px >= width) { a { color: red } }", "@media (1px < width) {\n  a {\n    color: red;\n  }\n}\n", "")
 }
 
+func TestLowerAtMediaRange(t *testing.T) {
+	expectPrintedLower(t, "@media (width = 1px) { a { color: red } }", "@media (width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+
+	expectPrintedLower(t, "@media (width < 1px) { a { color: red } }", "@media not (min-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (width <= 1px) { a { color: red } }", "@media (max-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (width > 1px) { a { color: red } }", "@media not (max-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (width >= 1px) { a { color: red } }", "@media (min-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+
+	expectPrintedLower(t, "@media (1px > width) { a { color: red } }", "@media not (min-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (1px >= width) { a { color: red } }", "@media (max-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (1px < width) { a { color: red } }", "@media not (max-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (1px <= width) { a { color: red } }", "@media (min-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+
+	expectPrintedLower(t, "@media (1px < width < 2px) { a { color: red } }", "@media (not (max-width: 1px)) and (not (min-width: 2px)) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (2px > width > 1px) { a { color: red } }", "@media (not (min-width: 2px)) and (not (max-width: 1px)) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (1px <= width <= 2px) { a { color: red } }", "@media (min-width: 1px) and (max-width: 2px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (2px >= width >= 1px) { a { color: red } }", "@media (max-width: 2px) and (min-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+
+	expectPrintedLower(t, "@media (1px < width <= 2px) { a { color: red } }", "@media (not (max-width: 1px)) and (max-width: 2px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (2px > width >= 1px) { a { color: red } }", "@media (not (min-width: 2px)) and (min-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (1px <= width < 2px) { a { color: red } }", "@media (min-width: 1px) and (not (min-width: 2px)) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media (2px >= width > 1px) { a { color: red } }", "@media (max-width: 2px) and (not (max-width: 1px)) {\n  a {\n    color: red;\n  }\n}\n", "")
+
+	expectPrintedLower(t, "@media not (1px < width < 2px) { a { color: red } }", "@media not ((not (max-width: 1px)) and (not (min-width: 2px))) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media not (2px > width > 1px) { a { color: red } }", "@media not ((not (min-width: 2px)) and (not (max-width: 1px))) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media not (1px <= width <= 2px) { a { color: red } }", "@media not ((min-width: 1px) and (max-width: 2px)) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLower(t, "@media not (2px >= width >= 1px) { a { color: red } }", "@media not ((max-width: 2px) and (min-width: 1px)) {\n  a {\n    color: red;\n  }\n}\n", "")
+
+	expectPrintedLowerMangle(t, "@media not (1px < width < 2px) { a { color: red } }", "@media (max-width: 1px) or (min-width: 2px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLowerMangle(t, "@media not (2px > width > 1px) { a { color: red } }", "@media (min-width: 2px) or (max-width: 1px) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLowerMangle(t, "@media not (1px <= width <= 2px) { a { color: red } }", "@media not ((min-width: 1px) and (max-width: 2px)) {\n  a {\n    color: red;\n  }\n}\n", "")
+	expectPrintedLowerMangle(t, "@media not (2px >= width >= 1px) { a { color: red } }", "@media not ((max-width: 2px) and (min-width: 1px)) {\n  a {\n    color: red;\n  }\n}\n", "")
+}
+
 func TestFontWeight(t *testing.T) {
 	expectPrintedMangle(t, "a { font-weight: normal }", "a {\n  font-weight: 400;\n}\n", "")
 	expectPrintedMangle(t, "a { font-weight: bold }", "a {\n  font-weight: 700;\n}\n", "")