Provide a flag to auto-prefix local css classes when minified

Author: chowey

cmd/esbuild/main.go

@@ -93,6 +93,8 @@ var helpText = func(colors logger.Colors) string {
                             eof | linked | external, default eof when bundling
                             and inline otherwise)
   --line-limit=...          Lines longer than this will be wrap onto a new line
+  --local-css-prefix=...    Add a prefix to local-css classes if
+                            minify-identifiers is enabled
   --log-level=...           Disable logging (verbose | debug | info | warning |
                             error | silent, default info)
   --log-limit=...           Maximum message count or 0 to disable (default 6)

internal/config/config.go

@@ -474,6 +474,7 @@ type Options struct {
 	TreeShaking            bool
 	DropDebugger           bool
 	MangleQuoted           bool
+	LocalCSSPrefix         string
 	Platform               Platform
 	OutputFormat           Format
 	NeedsMetafile          bool

internal/linker/linker.go

@@ -493,10 +493,10 @@ func (c *linkerContext) mangleLocalCSS(usedLocalNames map[string]bool) {
 		nextName := 0
 
 		for _, symbolCount := range sorted {
-			name := minifier.NumberToMinifiedName(nextName)
+			name := c.options.LocalCSSPrefix + minifier.NumberToMinifiedName(nextName)
 			for globalNames[name] || usedLocalNames[name] {
 				nextName++
-				name = minifier.NumberToMinifiedName(nextName)
+				name = c.options.LocalCSSPrefix + minifier.NumberToMinifiedName(nextName)
 			}
 
 			// Turn this local name into a global one

lib/shared/common.ts

@@ -277,6 +277,7 @@ function flagsForBuildOptions(
   let write = getFlag(options, keys, 'write', mustBeBoolean) ?? writeDefault; // Default to true if not specified
   let allowOverwrite = getFlag(options, keys, 'allowOverwrite', mustBeBoolean)
   let mangleCache = getFlag(options, keys, 'mangleCache', mustBeObject)
+  let localCSSPrefix = getFlag(options, keys, 'localCSSPrefix', mustBeString)
   keys.plugins = true; // "plugins" has already been read earlier
   checkForInvalidFlags(options, keys, `in ${callName}() call`)
 
@@ -304,6 +305,7 @@ function flagsForBuildOptions(
   if (entryNames) flags.push(`--entry-names=${entryNames}`)
   if (chunkNames) flags.push(`--chunk-names=${chunkNames}`)
   if (assetNames) flags.push(`--asset-names=${assetNames}`)
+  if (localCSSPrefix) flags.push(`--local-css-prefix=${localCSSPrefix}`)
   if (mainFields) {
     let values: string[] = []
     for (let value of mainFields) {

lib/shared/types.ts

@@ -168,6 +168,8 @@ export interface BuildOptions extends CommonOptions {
   absWorkingDir?: string
   /** Documentation: https://esbuild.github.io/api/#node-paths */
   nodePaths?: string[]; // The "NODE_PATH" variable from Node.js
+  /** Documentation: https://esbuild.github.io/api/#local-css-prefix */
+  localCSSPrefix?: string;
 }
 
 export interface StdinOptions {

pkg/api/api.go

@@ -296,6 +296,7 @@ type BuildOptions struct {
 	TreeShaking       TreeShaking            // Documentation: https://esbuild.github.io/api/#tree-shaking
 	IgnoreAnnotations bool                   // Documentation: https://esbuild.github.io/api/#ignore-annotations
 	LegalComments     LegalComments          // Documentation: https://esbuild.github.io/api/#legal-comments
+	LocalCSSPrefix    string                 // Documentation: https://esbuild.github.io/api/#local-css-prefix
 
 	JSX             JSX    // Documentation: https://esbuild.github.io/api/#jsx-mode
 	JSXFactory      string // Documentation: https://esbuild.github.io/api/#jsx-factory

pkg/api/api_impl.go

@@ -28,6 +28,7 @@ import (
 	"github.com/evanw/esbuild/internal/compat"
 	"github.com/evanw/esbuild/internal/config"
 	"github.com/evanw/esbuild/internal/css_ast"
+	"github.com/evanw/esbuild/internal/css_lexer"
 	"github.com/evanw/esbuild/internal/fs"
 	"github.com/evanw/esbuild/internal/graph"
 	"github.com/evanw/esbuild/internal/helpers"
@@ -524,6 +525,23 @@ func validateJSXExpr(log logger.Log, text string, name string) config.DefineExpr
 	return config.DefineExpr{}
 }
 
+func validateCSSIdentifier(log logger.Log, ident string) string {
+	for i, c := range ident {
+		if i == 0 {
+			if !css_lexer.IsNameStart(c) {
+				log.AddError(nil, logger.Range{}, fmt.Sprintf("Invalid CSS prefix: %q", ident))
+				return ""
+			}
+		} else {
+			if !css_lexer.IsNameContinue(c) {
+				log.AddError(nil, logger.Range{}, fmt.Sprintf("Invalid CSS prefix: %q", ident))
+				return ""
+			}
+		}
+	}
+	return ident
+}
+
 func validateDefines(
 	log logger.Log,
 	defines map[string]string,
@@ -1257,6 +1275,7 @@ func validateBuildOptions(
 		MangleProps:           validateRegex(log, "mangle props", buildOpts.MangleProps),
 		ReserveProps:          validateRegex(log, "reserve props", buildOpts.ReserveProps),
 		MangleQuoted:          buildOpts.MangleQuoted == MangleQuotedTrue,
+		LocalCSSPrefix:        validateCSSIdentifier(log, buildOpts.LocalCSSPrefix),
 		DropLabels:            append([]string{}, buildOpts.DropLabels...),
 		DropDebugger:          (buildOpts.Drop & DropDebugger) != 0,
 		AllowOverwrite:        buildOpts.AllowOverwrite,

pkg/cli/cli_impl.go

@@ -204,6 +204,10 @@ func parseOptionsImpl(
 			value := arg[len("--mangle-cache="):]
 			extras.mangleCache = &value
 
+		case strings.HasPrefix(arg, "--local-css-prefix=") && buildOpts != nil:
+			value := arg[len("--local-css-prefix="):]
+			buildOpts.LocalCSSPrefix = value
+
 		case strings.HasPrefix(arg, "--drop:"):
 			value := arg[len("--drop:"):]
 			switch value {