feat: add more CSS-wide keywords in font-family (#2135)

Author: yisibl

CHANGELOG.md

@@ -82,6 +82,26 @@
 
     This was contributed by [@yisibl](https://github.com/yisibl).
 
+* Avoid CSS cascade-dependent keywords in the `font-family` property ([#2135](https://github.com/evanw/esbuild/pull/2135))
+
+    In CSS, [`initial`](https://developer.mozilla.org/en-US/docs/Web/CSS/initial), [`inherit`](https://developer.mozilla.org/en-US/docs/Web/CSS/inherit), and [`unset`](https://developer.mozilla.org/en-US/docs/Web/CSS/unset) are [CSS-wide keywords](https://drafts.csswg.org/css-values-4/#css-wide-keywords) which means they have special behavior when they are specified as a property value. For example, while `font-family: 'Arial'` (as a string) and `font-family: Arial` (as an identifier) are the same, `font-family: 'inherit'` (as a string) uses the font family named `inherit` but `font-family: inherit` (as an identifier) inherits the font family from the parent element. This means esbuild must not unquote these CSS-wide keywords (and `default`, which is also reserved) during minification to avoid changing the meaning of the minified CSS.
+
+    The current draft of the new CSS Cascading and Inheritance Level 5 specification adds another concept called [cascade-dependent keywords](https://drafts.csswg.org/css-cascade-5/#defaulting-keywords) of which there are two: [`revert`](https://developer.mozilla.org/en-US/docs/Web/CSS/revert) and [`revert-layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer). This release of esbuild guards against unquoting these additional keywords as well to avoid accidentally breaking pages that use a font with the same name:
+
+    ```css
+    /* Original code */
+    a { font-family: 'revert'; }
+    b { font-family: 'revert-layer', 'Segoe UI', serif; }
+
+    /* Old output (with --minify) */
+    a{font-family:revert}b{font-family:revert-layer,Segoe UI,serif}
+
+    /* New output (with --minify) */
+    a{font-family:"revert"}b{font-family:"revert-layer",Segoe UI,serif}
+    ```
+
+    This fix was contributed by [@yisibl](https://github.com/yisibl).
+
 ## 0.14.30
 
 * Change the context of TypeScript parameter decorators ([#2147](https://github.com/evanw/esbuild/issues/2147))
@@ -3811,15 +3831,15 @@ In addition to the breaking changes above, the following features are also inclu
 
 * Minify the syntax `Infinity` to `1 / 0` ([#1385](https://github.com/evanw/esbuild/pull/1385))
 
-	The `--minify-syntax` flag (automatically enabled by `--minify`) will now minify the expression `Infinity` to `1 / 0`, which uses fewer bytes:
+    The `--minify-syntax` flag (automatically enabled by `--minify`) will now minify the expression   `Infinity` to `1 / 0`, which uses fewer bytes:
 
-	```js
-	// Original code
-	const a = Infinity;
+    ```js
+    // Original code
+    const a = Infinity;
 
-	// Output with "--minify-syntax"
-	const a = 1 / 0;
-	```
+    // Output with "--minify-syntax"
+    const a = 1 / 0;
+    ```
 
     This change was contributed by [@Gusted](https://github.com/Gusted).
 

internal/css_parser/css_decls_font_family.go

@@ -7,13 +7,35 @@ import (
 	"github.com/evanw/esbuild/internal/css_lexer"
 )
 
-// Specification: https://drafts.csswg.org/css-values-4/#common-keywords
-var wideKeywords = map[string]bool{
-	"initial": true,
-	"inherit": true,
-	"unset":   true,
+// These keywords usually require special handling when parsing.
+
+// Declaring a property to have these values explicitly specifies a particular
+// defaulting behavior instead of setting the property to that identifier value.
+// As specified in CSS Values and Units Level 3, all CSS properties can accept
+// these values.
+//
+// For example, "font-family: 'inherit'" sets the font family to the font named
+// "inherit" while "font-family: inherit" sets the font family to the inherited
+// value.
+//
+// Note that other CSS specifications can define additional CSS-wide keywords,
+// which we should copy here whenever new ones are created so we can quote those
+// identifiers to avoid collisions with any newly-created CSS-wide keywords.
+var cssWideAndReservedKeywords = map[string]bool{
+	// CSS Values and Units Level 3: https://drafts.csswg.org/css-values-3/#common-keywords
+	"initial": true, // CSS-wide keyword
+	"inherit": true, // CSS-wide keyword
+	"unset":   true, // CSS-wide keyword
+	"default": true, // CSS reserved keyword
+
+	// CSS Cascading and Inheritance Level 5: https://drafts.csswg.org/css-cascade-5/#defaulting-keywords
+	"revert":       true, // Cascade-dependent keyword
+	"revert-layer": true, // Cascade-dependent keyword
 }
 
+// Font family names that happen to be the same as a keyword value must be
+// quoted to prevent confusion with the keywords with the same names. UAs must
+// not consider these keywords as matching the <family-name> type.
 // Specification: https://drafts.csswg.org/css-fonts/#generic-font-families
 var genericFamilyNames = map[string]bool{
 	"serif":         true,
@@ -118,10 +140,7 @@ func isValidCustomIdent(text string, predefinedKeywords map[string]bool) bool {
 	if predefinedKeywords[loweredText] {
 		return false
 	}
-	if wideKeywords[loweredText] {
-		return false
-	}
-	if loweredText == "default" {
+	if cssWideAndReservedKeywords[loweredText] {
 		return false
 	}
 	if loweredText == "" {

internal/css_parser/css_parser_test.go

@@ -1814,6 +1814,12 @@ func TestFontFamily(t *testing.T) {
 
 	expectPrintedMangleMinify(t, "a {font-family: 'aaa bbb', serif }", "a{font-family:aaa bbb,serif}")
 	expectPrintedMangleMinify(t, "a {font-family: 'aaa bbb', 'ccc ddd' }", "a{font-family:aaa bbb,ccc ddd}")
+	expectPrintedMangleMinify(t, "a {font-family: 'initial', serif;}", "a{font-family:\"initial\",serif}")
+	expectPrintedMangleMinify(t, "a {font-family: 'inherit', serif;}", "a{font-family:\"inherit\",serif}")
+	expectPrintedMangleMinify(t, "a {font-family: 'unset', serif;}", "a{font-family:\"unset\",serif}")
+	expectPrintedMangleMinify(t, "a {font-family: 'revert', serif;}", "a{font-family:\"revert\",serif}")
+	expectPrintedMangleMinify(t, "a {font-family: 'revert-layer', 'Segoe UI', serif;}", "a{font-family:\"revert-layer\",Segoe UI,serif}")
+	expectPrintedMangleMinify(t, "a {font-family: 'default', serif;}", "a{font-family:\"default\",serif}")
 }
 
 func TestFont(t *testing.T) {