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

Custom CSS Properties case sensitivity not respected with HostBinding #41364

Closed
Pmyl opened this issue Mar 29, 2021 · 1 comment
Closed

Custom CSS Properties case sensitivity not respected with HostBinding #41364

Pmyl opened this issue Mar 29, 2021 · 1 comment
Assignees
@crisbeto
Labels
area: core Issues related to the framework runtime core: host and host bindings state: has PR
Milestone
needsTriage

Comments

@Pmyl
Copy link

Pmyl commented Mar 29, 2021

🐞 bug report

Affected Package

The issue is caused when using HostBinding that is from @angular/core

Is this a regression?

I don't think it ever worked

Description

Custom CSS properties set in HostBinding get automatically transformed to kebab case ignoring the original casing. For example @HostBinding("style.--MyColor") color: "blue" instead of setting the custom property --MyColor actually sets the property --my-color.
This goes against CSS Custom Properties specification that explicitly says that custom properties are case sensitive, here the specification: https://www.w3.org/TR/css-variables-1/#defining-variables

Unlike other CSS properties, custom property names are case-sensitive

The expected behavior is that CSS Custom Properties are kept unchanged when specified in HostBinding

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-6kturm
This example shows that HostBinding transform the custom properties to kebab case.

🌍 Your Environment

Angular Version:

11.0.8
@AndrewKushnir AndrewKushnir added area: core Issues related to the framework runtime core: host and host bindings labels Mar 29, 2021
@ngbot ngbot bot added this to the needsTriage milestone Mar 29, 2021
@crisbeto crisbeto self-assigned this Mar 30, 2021
@crisbeto crisbeto mentioned this issue Mar 30, 2021
Closed
crisbeto added a commit to crisbeto/angular that referenced this issue Mar 30, 2021
@crisbeto
fix(compiler): handle case-sensitive CSS custom properties
21c557e 
Currently we normalize all CSS property names in the `StylingBuilder` which breaks custom properties, because they're case-sensitive. These changes add a check so that custom properties aren't normalized.

Fixes angular#41364.
alxhub pushed a commit that referenced this issue Mar 30, 2021
@crisbeto @alxhub
fix(compiler): handle case-sensitive CSS custom properties (#41380)
f9da272 
Currently we normalize all CSS property names in the `StylingBuilder` which breaks custom properties, because they're case-sensitive. These changes add a check so that custom properties aren't normalized.

Fixes #41364.

PR Close #41380
@alxhub alxhub closed this as completed in e112e32 Mar 30, 2021
TeriGlover pushed a commit to TeriGlover/angular that referenced this issue Apr 5, 2021
@crisbeto @TeriGlover
fix(compiler): handle case-sensitive CSS custom properties (angular#4…
c3ea7dd 
…1380)

Currently we normalize all CSS property names in the `StylingBuilder` which breaks custom properties, because they're case-sensitive. These changes add a check so that custom properties aren't normalized.

Fixes angular#41364.

PR Close angular#41380
@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 Apr 30, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: core Issues related to the framework runtime core: host and host bindings state: has PR
Projects
None yet
Milestone
needsTriage
Development

Successfully merging a pull request may close this issue.

fix(compiler): handle case-sensitive CSS custom properties crisbeto/angular
3 participants
@crisbeto @Pmyl @AndrewKushnir