warn about basic CSS property typos

Author: evanw

CHANGELOG.md

@@ -42,23 +42,42 @@
     The TypeScript compiler already [treats this as an error](https://github.com/microsoft/TypeScript/issues/36341), so esbuild now treats this as an error in TypeScript files too. That looks like this:
 
     ```
-    ✘ [ERROR] The character ">" is not valid inside a JSX element, but can be escaped as "{'>'}" instead
+    ✘ [ERROR] The character ">" is not valid inside a JSX element
 
         example.tsx:2:14:
           2 │   return <div>></div>;
             │               ^
             ╵               {'>'}
 
-    ✘ [ERROR] The character "}" is not valid inside a JSX element, but can be escaped as "{'}'}" instead
+      Did you mean to escape it as "{'>'}" instead?
+
+    ✘ [ERROR] The character "}" is not valid inside a JSX element
 
         example.tsx:5:17:
           5 │   return <div>{1}}</div>;
             │                  ^
             ╵                  {'}'}
+
+      Did you mean to escape it as "{'}'}" instead?
     ```
 
     Babel doesn't yet treat this as an error, so esbuild only warns about these characters in JavaScript files for now. Babel 8 [treats this as an error](https://github.com/babel/babel/issues/11042) but Babel 8 [hasn't been released yet](https://github.com/babel/babel/issues/10746). If you see this warning, I recommend fixing the invalid JSX syntax because it will become an error in the future.
 
+* Warn about basic CSS property typos
+
+    This release now generates a warning if you use a CSS property that is one character off from a known CSS property:
+
+    ```
+    ▲ [WARNING] "marign-left" is not a known CSS property
+
+        example.css:2:2:
+          2 │   marign-left: 12px;
+            │   ~~~~~~~~~~~
+            ╵   margin-left
+
+      Did you mean "margin-left" instead?
+    ```
+
 ## 0.14.11
 
 * Fix a bug with enum inlining ([#1903](https://github.com/evanw/esbuild/issues/1903))

internal/css_ast/css_decl_table.go

@@ -1,5 +1,7 @@
 package css_ast
 
+import "github.com/evanw/esbuild/internal/helpers"
+
 type D uint16
 
 const (
@@ -640,3 +642,18 @@ var KnownDeclarations = map[string]D{
 	"z-index":                     DZIndex,
 	"zoom":                        DZoom,
 }
+
+var typoDetector *helpers.TypoDetector
+
+func MaybeCorrectDeclarationTypo(text string) (string, bool) {
+	if typoDetector == nil {
+		// Lazily-initialize the typo detector for speed when it's not needed
+		valid := make([]string, 0, len(KnownDeclarations))
+		for key := range KnownDeclarations {
+			valid = append(valid, key)
+		}
+		detector := helpers.MakeTypoDetector(valid)
+		typoDetector = &detector
+	}
+	return typoDetector.MaybeCorrectTypo(text)
+}

internal/css_parser/css_parser.go

@@ -1377,8 +1377,20 @@ stop:
 		}
 	}
 
+	key := css_ast.KnownDeclarations[keyText]
+
+	// Attempt to point out trivial typos
+	if key == css_ast.DUnknown {
+		if corrected, ok := css_ast.MaybeCorrectDeclarationTypo(keyText); ok {
+			data := p.tracker.MsgData(keyToken.Range, fmt.Sprintf("%q is not a known CSS property", keyText))
+			data.Location.Suggestion = corrected
+			p.log.AddMsg(logger.Msg{Kind: logger.Warning, Data: data,
+				Notes: []logger.MsgData{{Text: fmt.Sprintf("Did you mean %q instead?", corrected)}}})
+		}
+	}
+
 	return css_ast.Rule{Loc: keyLoc, Data: &css_ast.RDeclaration{
-		Key:       css_ast.KnownDeclarations[keyText],
+		Key:       key,
 		KeyText:   keyText,
 		KeyRange:  keyToken.Range,
 		Value:     result,

internal/helpers/typos.go

@@ -0,0 +1,38 @@
+package helpers
+
+import "unicode/utf8"
+
+type TypoDetector struct {
+	oneCharTypos map[string]string
+}
+
+func MakeTypoDetector(valid []string) TypoDetector {
+	detector := TypoDetector{oneCharTypos: make(map[string]string)}
+
+	// Add all combinations of each valid word with one character missing
+	for _, correct := range valid {
+		if len(correct) > 2 {
+			for i, ch := range correct {
+				detector.oneCharTypos[correct[:i]+correct[i+utf8.RuneLen(ch):]] = correct
+			}
+		}
+	}
+
+	return detector
+}
+
+func (detector TypoDetector) MaybeCorrectTypo(typo string) (string, bool) {
+	// Check for a single deleted character
+	if corrected, ok := detector.oneCharTypos[typo]; ok {
+		return corrected, true
+	}
+
+	// Check for a single misplaced character
+	for i, ch := range typo {
+		if corrected, ok := detector.oneCharTypos[typo[:i]+typo[i+utf8.RuneLen(ch):]]; ok {
+			return corrected, true
+		}
+	}
+
+	return "", false
+}

internal/js_lexer/js_lexer.go

@@ -914,7 +914,8 @@ func (lexer *Lexer) NextJSXElementChild() {
 						replacement = "{'>'}"
 					}
 					msg := logger.Msg{Kind: logger.Error, Data: lexer.tracker.MsgData(logger.Range{Loc: logger.Loc{Start: int32(lexer.end)}, Len: 1},
-						fmt.Sprintf("The character \"%c\" is not valid inside a JSX element, but can be escaped as %q instead", lexer.codePoint, replacement))}
+						fmt.Sprintf("The character \"%c\" is not valid inside a JSX element", lexer.codePoint)),
+						Notes: []logger.MsgData{{Text: fmt.Sprintf("Did you mean to escape it as %q instead?", replacement)}}}
 					msg.Data.Location.Suggestion = replacement
 					if !lexer.ts.Parse {
 						// TypeScript treats this as an error but Babel doesn't treat this

internal/js_parser/js_parser_test.go

@@ -4242,8 +4242,12 @@ func TestNewTarget(t *testing.T) {
 }
 
 func TestJSX(t *testing.T) {
-	expectParseErrorJSX(t, "<div>></div>", "<stdin>: WARNING: The character \">\" is not valid inside a JSX element, but can be escaped as \"{'>'}\" instead\n")
-	expectParseErrorJSX(t, "<div>{1}}</div>", "<stdin>: WARNING: The character \"}\" is not valid inside a JSX element, but can be escaped as \"{'}'}\" instead\n")
+	expectParseErrorJSX(t, "<div>></div>",
+		"<stdin>: WARNING: The character \">\" is not valid inside a JSX element\n"+
+			"NOTE: Did you mean to escape it as \"{'>'}\" instead?\n")
+	expectParseErrorJSX(t, "<div>{1}}</div>",
+		"<stdin>: WARNING: The character \"}\" is not valid inside a JSX element\n"+
+			"NOTE: Did you mean to escape it as \"{'}'}\" instead?\n")
 	expectPrintedJSX(t, "<div>></div>", "/* @__PURE__ */ React.createElement(\"div\", null, \">\");\n")
 	expectPrintedJSX(t, "<div>{1}}</div>", "/* @__PURE__ */ React.createElement(\"div\", null, 1, \"}\");\n")
 

internal/js_parser/ts_parser_test.go

@@ -1796,8 +1796,12 @@ func TestTSOptionalChain(t *testing.T) {
 }
 
 func TestTSJSX(t *testing.T) {
-	expectParseErrorTSX(t, "<div>></div>", "<stdin>: ERROR: The character \">\" is not valid inside a JSX element, but can be escaped as \"{'>'}\" instead\n")
-	expectParseErrorTSX(t, "<div>{1}}</div>", "<stdin>: ERROR: The character \"}\" is not valid inside a JSX element, but can be escaped as \"{'}'}\" instead\n")
+	expectParseErrorTSX(t, "<div>></div>",
+		"<stdin>: ERROR: The character \">\" is not valid inside a JSX element\n"+
+			"NOTE: Did you mean to escape it as \"{'>'}\" instead?\n")
+	expectParseErrorTSX(t, "<div>{1}}</div>",
+		"<stdin>: ERROR: The character \"}\" is not valid inside a JSX element\n"+
+			"NOTE: Did you mean to escape it as \"{'}'}\" instead?\n")
 
 	expectPrintedTS(t, "const x = <number>1", "const x = 1;\n")
 	expectPrintedTSX(t, "const x = <number>1</number>", "const x = /* @__PURE__ */ React.createElement(\"number\", null, \"1\");\n")
@@ -1849,7 +1853,7 @@ func TestTSJSX(t *testing.T) {
 	expectPrintedTS(t, "const x = <[]>(y, z)", "const x = (y, z);\n")
 	expectPrintedTS(t, "const x = <[]>(y, z) => {}", "const x = (y, z) => {\n};\n")
 
-	invalid := "<stdin>: ERROR: The character \">\" is not valid inside a JSX element, but can be escaped as \"{'>'}\" instead\n"
+	invalid := "<stdin>: ERROR: The character \">\" is not valid inside a JSX element\nNOTE: Did you mean to escape it as \"{'>'}\" instead?\n"
 	expectParseErrorTSX(t, "(<T>(y) => {}</T>)", invalid)
 	expectParseErrorTSX(t, "(<T extends>(y) => {}</T>)", invalid)
 	expectParseErrorTSX(t, "(<T extends={false}>(y) => {}</T>)", invalid)