8000 Autoprefixer Not Working on Serve and Build · Issue #26366 · angular/angular-cli · GitHub
[go: up one dir, main page]
Skip to content

Autoprefixer Not Working on Serve and Build #26366

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
1 task done
emiryumak opened this issue Nov 15, 2023 · 8 comments
Closed
1 task done

Autoprefixer Not Working on Serve and Build #26366

emiryumak opened this issue Nov 15, 2023 · 8 comments
Labels
state: blocked on upstream

Comments

@emiryumak
Copy link

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
Copy link
Collaborator
alan-agius4 commented Nov 15, 2023 •
edited
Loading

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

evanw/esbuild#3493

8000
@Emil-Blomquist
Copy link

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

@emiryumak
Copy link
Author

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

@AliKholmatov
Copy link

the same. are there any updates?

@Emil-Blomquist
Copy link

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
Copy link
Collaborator

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
Copy link
Collaborator

Closed via #26440

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 25, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
state: blocked on upstream
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Emil-Blomquist @alan-agius4 @emiryumak @AliKholmatov
0