Skip to content
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

rgba converted to hex notation in Component Styles - breaks IE11 #21652

Closed
habibialkaff opened this issue Aug 26, 2021 · 5 comments · Fixed by #21653
Closed

rgba converted to hex notation in Component Styles - breaks IE11 #21652

habibialkaff opened this issue Aug 26, 2021 · 5 comments · Fixed by #21653
Assignees
@alan-agius4
Labels
area: @angular-devkit/build-angular devkit/build-angular:browser freq1: low Only reported by a handful of users who observe it rarely type: bug/fix
Milestone
needsTriage

Comments

@habibialkaff
Copy link

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

Don't known / other

Is this a regression?

No

Description

When running "ng build", Angular v12 converts rgba to hex notation for component style (css / less / sass)

This causes issue for IE11 because IE11 doesn't support #rrggbbaa hex color notation (https://caniuse.com/css-rrggbbaa)

Even though IE11 is already marked as deprecated, I would expect it shouldn't have this issue

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

Angular version ~12.2.0

Anything else?

No response
@JoostK JoostK transferred this issue from angular/angular Aug 26, 2021
@JoostK
Copy link
Member

JoostK commented Aug 26, 2021

Which exact version are you using? There was a change in 12.2.2 to address #21594, but it's not clear if you're using that version. If you are on that version, it looks like the issue may have persisted.

@habibialkaff
Copy link
Author

Yes, I just created a new ng app with the cli which uses 12.2.2, and the issue still exists

@ngbot ngbot bot added this to the needsTriage milestone Aug 26, 2021
@alan-agius4 alan-agius4 self-assigned this Aug 26, 2021
@alan-agius4 alan-agius4 mentioned this issue Aug 26, 2021
Merged
@alan-agius4
Copy link
Collaborator

What's happening here is that ESBuild CSS optimizer doesn't support IE.

I opened this PR to workaround this issue in version 12.2.x.

@alan-agius4 alan-agius4 linked a pull request Aug 26, 2021 that will close this issue
fix(@angular-devkit/build-angular): RGBA converted to hex notation in component styles breaks IE11 #21653
Merged
alan-agius4 added a commit that referenced this issue Aug 26, 2021
@alan-agius4
fix(@angular-devkit/build-angular): RGBA converted to hex notation in…
3e33218 
… component styles breaks IE11

ESBuild which is used to optimize CSS in components, doesn't support IE. With this change we workaround this limitation by adding `Edge 12` when the user needs `IE 11` support.

Closes #21652
@alan-agius4
Copy link
Collaborator

Closed via #21653

@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 Sep 26, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alan-agius4 alan-agius4

Labels
area: @angular-devkit/build-angular devkit/build-angular:browser freq1: low Only reported by a handful of users who observe it rarely type: bug/fix
Projects
None yet
Milestone
needsTriage
Development

Successfully merging a pull request may close this issue.

fix(@angular-devkit/build-angular): RGBA converted to hex notation in component styles breaks IE11
3 participants
@JoostK @habibialkaff @alan-agius4