New Angular builder has issues with autoprefixer

[waterplea]

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]

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]

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.

[clydin]

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]

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]

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.