Autoprefixer Not Working on Serve and Build

[emiryumak]

Command

build, serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16.0.2

Description

Autoprefixer not working on scss compiler. For example:

In component.scss file;
mask-composite: exclude;

On chromium based browser says;
Invalid property name.

In version 16, it also added -webkit and -moz version of properties.

Minimal Reproduction

This issue occurs when ng serve and ng build

My angular.json architect.build

"build": {
	"builder": "@angular-devkit/build-angular:application",
	"options": {
		"outputPath": "dist/app",
		"index": "src/index.html",
		"browser": "src/main.ts",
		"polyfills": ["zone.js"],
		"tsConfig": "tsconfig.app.json",
		"inlineStyleLanguage": "scss",
		"assets": [
			"src/assets",
			"src/manifest.webmanifest"
		],
		"styles": [
			"src/assets/style/styles.scss"
		],
		"stylePreprocessorOptions": {
			"includePaths": ["src/assets/style"]
		},
		"scripts": [],
		"server": "src/main.server.ts",
		"prerender": false,
		"ssr": {
			"entry": "server.ts"
		}
	},
	"configurations": {
		"production": {
			"budgets": [
				{
					"type": "initial",
					"maximumWarning": "2mb",
					"maximumError": "5mb"
				},
				{
					"type": "anyComponentStyle",
					"maximumWarning": "6kb",
					"maximumError": "50kb"
				}
			],
			"fileReplacements": [
				{
					"replace": "src/environments/environment.ts",
					"with": "src/environments/environment.prod.ts"
				}
			],
			"outputHashing": "all"
		},
		"development": {
			"optimization": false,
			"extractLicenses": false,
			"sourceMap": true
		}
	},
	"defaultConfiguration": "production"
}

Exception or Error

No response

Your Environment

Angular CLI: 17.0.0
Node: 20.9.0
Package Manager: npm 10.1.0
OS: darwin arm64

Angular: 17.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0 (cli-only)
@angular-devkit/build-angular   17.0.0
@angular-devkit/core            16.0.6
@angular-devkit/schematics      17.0.0
@angular/cdk                    17.0.0
@angular/cli                    17.0.0
@angular/ssr                    17.0.0
@schematics/angular             17.0.0
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

Package Manager: npm
OS: MacOS
Browser: Arc Browser (Chromium based), Mozilla Firefox Developer Edition, Safari etc.

[alan-agius4]

In this case, Esbuild is not prefixing this particular property.

evanw/esbuild#3493

[Emil-Blomquist]

Experiencing a similar problem but with the width: stretch value.

[emiryumak]

This not just mask-composite. This property is an example. Also does not work on mask.

[AliKholmatov]

the same. are there any updates?

[Emil-Blomquist]

It seems that some properties are actually being handled. From a brand new angular project I obtained the following results when running ng serve.

in

background: linear-gradient(to right, white, gray);
width: stretch;
user-select: none;

out (when inspecting the element)

background: linear-gradient(to right, white, gray);
width: stretch;
-webkit-user-select: none;
user-select: none;

[alan-agius4]

The esbuild pipeline does not use autoprefixer, instead it relies on esbuild do the the vendor prefixing.

In the case you are experiencing a property or value that is not being vendor prefixed correctly. Please feel free to file an issue directly with https://github.com/evanw/esbuild.

[alan-agius4]

Closed via #26440

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}