From 0c6b15214c585fbb56e2fa984d84ca071663c9b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E4=B8=9D?= <percyley@qq.com>
Date: Sun, 27 Mar 2022 21:11:19 +0800
Subject: [PATCH] feat: add more CSS-wide keywords in font-family

---
 CHANGELOG.md                                 | 35 +++++++++++++++-----
 internal/css_parser/css_decls_font_family.go | 25 +++++++++-----
 internal/css_parser/css_parser_test.go       |  6 ++++
 3 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ddfbaf25f0..ff535596e34 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,23 @@
 
     If the esbuild binary executable is corrupted or missing, previously there was one situation where esbuild's JavaScript API could hang instead of generating an error. This release changes esbuild's library code to generate an error instead in this case.
 
+* Fix when CSS-wide keywords(`initial`, `inherit`, `unset`, `revert`, `revert-layer`, `default`) is present in the `font-family`, must keep the quotation marks, otherwise it will be invalid.
+
+    ```css
+    /* Original code */
+    .foo { font-family: 'revert'; }
+    a { font-family: 'revert-layer', 'Segoe UI', serif; }
+
+    /* Old output (with --minify) */
+    /* Invalid rules */
+    .foo{font-family:revert}
+    a{font-family:revert-layer,Segoe UI,serif}
+
+    /* New output (with --minify) */
+    .foo{font-family:"revert"}
+    a{font-family:"revert-layer",Segoe UI,serif}
+    ```
+
 ## 0.14.28
 
 * Add support for some new CSS rules ([#2115](https://github.com/evanw/esbuild/issues/2115), [#2116](https://github.com/evanw/esbuild/issues/2116), [#2117](https://github.com/evanw/esbuild/issues/2117))
@@ -3586,15 +3603,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:
-
-	```js
-	// Original code
-	const a = Infinity;
-
-	// Output with "--minify-syntax"
-	const a = 1 / 0;
-	```
+    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;
+  
+    // Output with "--minify-syntax"
+    const a = 1 / 0;
+    ```
 
     This change was contributed by [@Gusted](https://github.com/Gusted).
 
diff --git a/internal/css_parser/css_decls_font_family.go b/internal/css_parser/css_decls_font_family.go
index 0ba8c665215..c915094b869 100644
--- a/internal/css_parser/css_decls_font_family.go
+++ b/internal/css_parser/css_decls_font_family.go
@@ -7,13 +7,23 @@ 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,
+// CSS-wide keywords and reserved keyword
+// These keywords usually require special handling when parsing.
+// The latest definition is in CSS Cascading and Inheritance Level 5:
+// https://drafts.csswg.org/css-cascade-5/#defaulting-keywords
+// Old Specification: https://drafts.csswg.org/css-values-4/#common-keywords
+var CSSWideAndReservedKeywords = map[string]bool{
+	"initial":      true,
+	"inherit":      true,
+	"unset":        true,
+	"revert":       true,
+	"revert-layer": true,
+	"default":      true, // CSS reserved 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 +128,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 == "" {
diff --git a/internal/css_parser/css_parser_test.go b/internal/css_parser/css_parser_test.go
index 73298bb6431..72cbacf3ca3 100644
--- a/internal/css_parser/css_parser_test.go
+++ b/internal/css_parser/css_parser_test.go
@@ -1788,6 +1788,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) {