fix #4357: -webkit- prefix for mask shorthand (#4358)

CHANGELOG.md

@@ -8,6 +8,26 @@
 
     This change was contributed by [@hybrist](https://github.com/hybrist).
 
+* Added CSS vendor prefix (`-webkit`) for the [mask](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask) shorthand property ([#4357](https://github.com/evanw/esbuild/issues/4357)).
+
+    ```css
+    /* Original code */
+    main {
+        mask: url(x.png) center/5rem no-repeat
+    }
+
+    /* Old output */
+    main {
+        mask: url(x.png) center/5rem no-repeat
+    }
+
+    /* New output */
+    main {
+        -webkit-mask: url(x.png) center/5rem no-repeat
+        mask: url(x.png) center/5rem no-repeat
+    }
+    ```
+
 * Additional minification of `switch` statements ([#4176](https://github.com/evanw/esbuild/issues/4176), [#4359](https://github.com/evanw/esbuild/issues/4359))
 
     This release contains additional minification patterns for reducing `switch` statements. Here is an example:

compat-table/src/index.ts

@@ -118,6 +118,7 @@ export const cssProperties = {
   DHeight: true,
   DHyphens: true,
   DInitialLetter: true,
+  DMask: true,
   DMaskComposite: true,
   DMaskImage: true,
   DMaskOrigin: true,

compat-table/src/mdn.ts

@@ -84,6 +84,7 @@ const similarPrefixedProperty: Record<string, { prefix: string, property: string
 
 const cssPrefixFeatures: Record<string, CSSProperty> = {
   'css.properties.height.stretch': 'DHeight',
+  'css.properties.mask': 'DMask',
   'css.properties.mask-composite': 'DMaskComposite',
   'css.properties.mask-image': 'DMaskImage',
   'css.properties.mask-origin': 'DMaskOrigin',

internal/compat/css_table.go

@@ -249,6 +249,13 @@ var cssPrefixTable = map[css_ast.D][]prefixData{
 		{engine: IOS, prefix: WebkitPrefix},
 		{engine: Safari, prefix: WebkitPrefix},
 	},
+	css_ast.DMask: {
+		{engine: Chrome, prefix: WebkitPrefix, withoutPrefix: v{120, 0, 0}},
+		{engine: Edge, prefix: WebkitPrefix, withoutPrefix: v{120, 0, 0}},
+		{engine: IOS, prefix: WebkitPrefix, withoutPrefix: v{15, 4, 0}},
+		{engine: Opera, prefix: WebkitPrefix, withoutPrefix: v{106, 0, 0}},
+		{engine: Safari, prefix: WebkitPrefix, withoutPrefix: v{15, 4, 0}},
+	},
 	css_ast.DMaskComposite: {
 		{engine: Chrome, prefix: WebkitPrefix, withoutPrefix: v{120, 0, 0}},
 		{engine: Edge, prefix: WebkitPrefix, withoutPrefix: v{120, 0, 0}},

internal/css_parser/css_parser_test.go

@@ -2864,6 +2864,7 @@ func TestPrefixInsertion(t *testing.T) {
 		"clip-path",
 		"font-kerning",
 		"initial-letter",
+		"mask",
 		"mask-image",
 		"mask-origin",
 		"mask-position",