fix #3286: don't wrap strings with unique keys

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+* Fix asset references with the `--line-limit` flag ([#3286](https://github.com/evanw/esbuild/issues/3286))
+
+    The recently-released `--line-limit` flag tells esbuild to terminate long lines after they pass this length limit. This includes automatically wrapping long strings across multiple lines using escaped newline syntax. However, using this could cause esbuild to generate incorrect code for references from generated output files to assets in the bundle (i.e. files loaded with the `file` or `copy` loaders). This is because esbuild implements asset references internally using find-and-replace with a randomly-generated string, but the find operation fails if the string is split by an escaped newline due to line wrapping. This release fixes the problem by not wrapping these strings. This issue affected asset references in both JS and CSS files.
+
 * Support local names in CSS for `@keyframe`, `@counter-style`, and `@container` ([#20](https://github.com/evanw/esbuild/issues/20))
 
     This release extends support for local names in CSS files loaded with the `local-css` loader to cover the `@keyframe`, `@counter-style`, and `@container` rules (and also `animation`, `list-style`, and `container` declarations). Here's an example:

internal/ast/ast.go

@@ -124,6 +124,10 @@ const (
 
 	// CSS "@import" of an empty file should be removed
 	WasLoadedWithEmptyLoader
+
+	// Unique keys are randomly-generated strings that are used to replace paths
+	// in the source code after it's printed. These must not ever be split apart.
+	ContainsUniqueKey
 )
 
 func (flags ImportRecordFlags) Has(flag ImportRecordFlags) bool {

internal/bundler/bundler.go

@@ -310,7 +310,10 @@ func parseFile(args parseArgs) {
 	case config.LoaderFile:
 		uniqueKey := fmt.Sprintf("%sA%08d", args.uniqueKeyPrefix, args.sourceIndex)
 		uniqueKeyPath := uniqueKey + source.KeyPath.IgnoredSuffix
-		expr := js_ast.Expr{Data: &js_ast.EString{Value: helpers.StringToUTF16(uniqueKeyPath)}}
+		expr := js_ast.Expr{Data: &js_ast.EString{
+			Value:             helpers.StringToUTF16(uniqueKeyPath),
+			ContainsUniqueKey: true,
+		}}
 		ast := js_parser.LazyExportAST(args.log, source, js_parser.OptionsFromConfig(&args.options), expr, "")
 		ast.URLForCSS = uniqueKeyPath
 		if pluginName != "" {

internal/bundler_tests/bundler_default_test.go

@@ -8321,6 +8321,9 @@ func TestLineLimitNotMinified(t *testing.T) {
 	default_suite.expectBundled(t, bundled{
 		files: map[string]string{
 			"/script.jsx": `
+				import fileURL from './x.file'
+				import copyURL from './x.copy'
+				import dataURL from './x.data'
 				export const SignUpForm = (props) => {
 					return <p class="signup">
 						<label>Username: <input class="username" type="text"/></label>
@@ -8329,6 +8332,9 @@ func TestLineLimitNotMinified(t *testing.T) {
 							{props.buttonText}
 						</div>
 						<small>By signing up, you are agreeing to our <a href="/tos/">terms of service</a>.</small>
+						<img src={fileURL} />
+						<img src={copyURL} />
+						<img src={dataURL} />
 					</p>
 				}
 			`,
@@ -8343,16 +8349,30 @@ func TestLineLimitNotMinified(t *testing.T) {
 				`CIgZmlsbD0iI0ZGQ0YwMCIvPgogIDxwYXRoIGQ9Ik00Ny41IDUyLjVMOTUgMTAwbC00Ny41IDQ3LjVtNjAtOTVMM` +
 				`TU1IDEwMGwtNDcuNSA0Ny41IiBmaWxsPSJub25lIiBzdHJva2U9IiMxOTE5MTkiIHN0cm9rZS13aWR0aD0iMjQiL` +
 				`z4KPC9zdmc+Cg==);
+					cursor: url(x.file);
+					cursor: url(x.copy);
+					cursor: url(x.data);
 				}
 			`,
+			"/x.file": `...file...`,
+			"/x.copy": `...copy...`,
+			"/x.data": `...lots of long data...lots of long data...`,
 		},
 		entryPaths: []string{
 			"/script.jsx",
 			"/style.css",
 		},
 		options: config.Options{
+			Mode:         config.ModeBundle,
 			AbsOutputDir: "/out",
 			LineLimit:    32,
+			ExtensionToLoader: map[string]config.Loader{
+				".jsx":  config.LoaderJSX,
+				".css":  config.LoaderCSS,
+				".file": config.LoaderFile,
+				".copy": config.LoaderCopy,
+				".data": config.LoaderDataURL,
+			},
 		},
 	})
 }

internal/bundler_tests/snapshots/snapshots_default.txt

@@ -2979,8 +2979,24 @@ BzdHJva2U9IiMxOTE5MTkiIHN0cm9rZS\
 
 ================================================================================
 TestLineLimitNotMinified
+---------- /out/x-TZ25B4WH.file ----------
+...file...
+---------- /out/x-UF3O47Y3.copy ----------
+...copy...
 ---------- /out/script.js ----------
-export const SignUpForm = (props) => {
+// x.file
+var x_default = "./x-TZ25B4WH.file";
+
+// script.jsx
+import copyURL from "./x-UF3O47Y3.copy";
+
+// x.data
+var x_default2 = "data:text/plai\
+n;charset=utf-8,...lots of long \
+data...lots of long data...";
+
+// script.jsx
+var SignUpForm = (props) => {
   return /* @__PURE__ */ React.createElement(
   "p", { class: "signup" }, /* @__PURE__ */ React.
   createElement("label", null, "\
@@ -2998,10 +3014,19 @@ led" }, props.buttonText), /* @__PURE__ */ React.
 By signing up, you are agreeing \
 to our ", /* @__PURE__ */ React.
   createElement("a", { href: "/t\
-os/" }, "terms of service"), "."));
+os/" }, "terms of service"), "."),
+  /* @__PURE__ */ React.createElement(
+  "img", { src: x_default }), /* @__PURE__ */ React.
+  createElement("img", { src: copyURL }),
+  /* @__PURE__ */ React.createElement(
+  "img", { src: x_default2 }));
+};
+export {
+  SignUpForm
 };
 
 ---------- /out/style.css ----------
+/* style.css */
 body.light-mode.new-user-segment:not(.logged-in)
 .signup,
 body.light-mode.new-user-segment:not(.logged-in)
@@ -3027,6 +3052,11 @@ tNjAtOTVMMTU1IDEwMGwtNDcuNSA0Ny4\
 1IiBmaWxsPSJub25lIiBzdHJva2U9IiM\
 xOTE5MTkiIHN0cm9rZS13aWR0aD0iMjQ\
 iLz4KPC9zdmc+Cg==");
+  cursor: url(./x-TZ25B4WH.file);
+  cursor: url(./x-UF3O47Y3.copy);
+  cursor: url("data:text/plain;c\
+harset=utf-8,...lots of long dat\
+a...lots of long data...");
 }
 
 ================================================================================

internal/css_printer/css_printer.go

@@ -154,7 +154,7 @@ func (p *printer) printRule(rule css_ast.Rule, indent int32, omitTrailingSemicol
 		p.print("@charset ")
 
 		// It's not valid to print the string with single quotes
-		p.printQuotedWithQuote(r.Encoding, '"')
+		p.printQuotedWithQuote(r.Encoding, '"', 0)
 		p.print(";")
 
 	case *css_ast.RAtImport:
@@ -163,7 +163,12 @@ func (p *printer) printRule(rule css_ast.Rule, indent int32, omitTrailingSemicol
 		} else {
 			p.print("@import ")
 		}
-		p.printQuoted(p.importRecords[r.ImportRecordIndex].Path.Text)
+		record := p.importRecords[r.ImportRecordIndex]
+		var flags printQuotedFlags
+		if record.Flags.Has(ast.ContainsUniqueKey) {
+			flags |= printQuotedNoWrap
+		}
+		p.printQuoted(record.Path.Text, flags)
 		p.recordImportPathForMetafile(r.ImportRecordIndex)
 		p.printTokens(r.ImportConditions, printTokensOpts{})
 		p.print(";")
@@ -485,7 +490,7 @@ func (p *printer) printCompoundSelector(sel css_ast.CompoundSelector, isFirst bo
 				if printAsIdent {
 					p.printIdent(s.MatcherValue, identNormal, canDiscardWhitespaceAfter)
 				} else {
-					p.printQuoted(s.MatcherValue)
+					p.printQuoted(s.MatcherValue, 0)
 				}
 			}
 			if s.MatcherModifier != 0 {
@@ -633,8 +638,14 @@ func bestQuoteCharForString(text string, forURL bool) byte {
 	return '"'
 }
 
-func (p *printer) printQuoted(text string) {
-	p.printQuotedWithQuote(text, bestQuoteCharForString(text, false))
+type printQuotedFlags uint8
+
+const (
+	printQuotedNoWrap printQuotedFlags = 1 << iota
+)
+
+func (p *printer) printQuoted(text string, flags printQuotedFlags) {
+	p.printQuotedWithQuote(text, bestQuoteCharForString(text, false), flags)
 }
 
 type escapeKind uint8
@@ -685,7 +696,7 @@ func (p *printer) printWithEscape(c rune, escape escapeKind, remainingText strin
 }
 
 // Note: This function is hot in profiles
-func (p *printer) printQuotedWithQuote(text string, quote byte) {
+func (p *printer) printQuotedWithQuote(text string, quote byte, flags printQuotedFlags) {
 	if quote != quoteForURL {
 		p.css = append(p.css, quote)
 	}
@@ -697,7 +708,7 @@ func (p *printer) printQuotedWithQuote(text string, quote byte) {
 	// Only compute the line length if necessary
 	var startLineLength int
 	wrapLongLines := false
-	if p.options.LineLimit > 0 && quote != quoteForURL {
+	if p.options.LineLimit > 0 && quote != quoteForURL && (flags&printQuotedNoWrap) == 0 {
 		startLineLength = p.currentLineLength()
 		if startLineLength > p.options.LineLimit {
 			startLineLength = p.options.LineLimit
@@ -983,16 +994,20 @@ func (p *printer) printTokens(tokens []css_ast.Token, opts printTokensOpts) bool
 			p.printIdent(t.Text, identHash, whitespace)
 
 		case css_lexer.TString:
-			p.printQuoted(t.Text)
+			p.printQuoted(t.Text, 0)
 
 		case css_lexer.TURL:
-			text := p.importRecords[t.PayloadIndex].Path.Text
+			record := p.importRecords[t.PayloadIndex]
+			text := record.Path.Text
 			tryToAvoidQuote := true
-			if p.options.LineLimit > 0 && p.currentLineLength()+len(text) >= p.options.LineLimit {
+			var flags printQuotedFlags
+			if record.Flags.Has(ast.ContainsUniqueKey) {
+				flags |= printQuotedNoWrap
+			} else if p.options.LineLimit > 0 && p.currentLineLength()+len(text) >= p.options.LineLimit {
 				tryToAvoidQuote = false
 			}
 			p.print("url(")
-			p.printQuotedWithQuote(text, bestQuoteCharForString(text, tryToAvoidQuote))
+			p.printQuotedWithQuote(text, bestQuoteCharForString(text, tryToAvoidQuote), flags)
 			p.print(")")
 			p.recordImportPathForMetafile(t.PayloadIndex)
 

internal/css_printer/css_printer_test.go

@@ -57,7 +57,7 @@ func expectPrintedString(t *testing.T, stringValue string, expected string) {
 	t.Run(stringValue, func(t *testing.T) {
 		t.Helper()
 		p := printer{}
-		p.printQuoted(stringValue)
+		p.printQuoted(stringValue, 0)
 		test.AssertEqualWithDiff(t, string(p.css), expected)
 	})
 }

internal/js_ast/js_ast.go

@@ -779,6 +779,7 @@ type EString struct {
 	LegacyOctalLoc        logger.Loc
 	PreferTemplate        bool
 	HasPropertyKeyComment bool // If true, a preceding comment contains "@__KEY__"
+	ContainsUniqueKey     bool // If true, this string must not be wrapped
 }
 
 type TemplatePart struct {