8000 New Angular builder has issues with autoprefixer · Issue #30302 · angular/angular-cli · GitHub
[go: up one dir, main page]
Skip to content

New Angular builder has issues with autoprefixer #30302

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
waterplea opened this issue May 14, 2025 · 5 comments
Closed

New Angular builder has issues with autoprefixer #30302

waterplea opened this issue May 14, 2025 · 5 comments

Comments
@waterplea
Copy link
waterplea commented May 14, 2025 •
edited
Loading

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

When switching to Vite builder in Angular 18/19 it causes autoprefixer to stop working

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-kycexs5v

Please provide the exception or error you saw

:host {
  width: stretch;
}

remains unprefixed

Please provide the environment you discovered this bug in (run ng version)

Angular 19 with new builder

Anything else?

Here's the same blitz but with old builder:
https://stackblitz.com/edit/stackblitz-starters-ggd5ztxb
As you can see this style:

:host {
  width: stretch;
}

is properly turned into this:

[_nghost-ng-c1419874505] {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
}
@JeanMeche JeanMeche transferred this issue from angular/angular May 14, 2025
@JeanMeche
Copy link
Member
JeanMeche commented May 14, 2025 •
edited
Loading

This was also mentionned in #26366.

It's an upstream issue, Esbuild doesn't prefix width: stretch

https://esbuild.github.io/try/#dAAwLjE5LjUAewogIGxvYWRlcjogJ2NzcycsCiAgdGFyZ2V0OiBbJ2Nocm9tZTEzNSddCn0AKiB7CiAgIHdpZHRoOiBzdHJldGNoCn0

@alan-agius4
Copy link
Collaborator

This is not actionable from our end. 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 alan-agius4 closed this as not planned Won't fix, can't repro, duplicate, stale May 14, 2025
@waterplea waterplea mentioned this issue May 14, 2025
Closed
@clydin
Copy link
Member
clydin commented May 14, 2025 •
edited
Loading

From the MDN browser compatibility table, it appears that width: stretch is support by all browsers supported by Angular. From that table it does not appear that any prefixing should occur.

Link: https://developer.mozilla.org/en-US/docs/Web/CSS/width#browser_compatibility

@waterplea
Copy link
Author

From the MDN browser compatibility table, it appears that width: stretch is support by all browsers supported by Angular. From that table it does not appear that any prefixing should occur.

Link: https://developer.mozilla.org/en-US/docs/Web/CSS/width#browser_compatibility

No, it's actually not supported by ANY browser when unprefixed:
https://caniuse.com/mdn-css_properties_width_stretch
And that's my experience, I noticed it not working not by inspecting the sources 😁

@clydin
Copy link
Member
clydin commented May 14, 2025 •
edited
Loading

Might want to consider raising an issue with MDN then if that's something you are encountering since that's a source of info for many of the downstream tools. MDN has a special symbol for the table when a vendor prefix is required.

EDIT: Actually nevermind that. It's there just a different symbol than I'm used to seeing. MDN apparently doesn't consider it a vendor prefix even though it looks like one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to 43D7 comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@JeanMeche @waterplea @alan-agius4 @clydin
0