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.

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

Flipping for background mistakes percentages in color functions for background-position #92

Open
HumansCanWinElves opened this issue Sep 13, 2023 · 2 comments

Comments

@HumansCanWinElves
Copy link

HumansCanWinElves commented Sep 13, 2023

Consider the following definition:

background: hsl(150 30% 30%);

The percent values are about the saturation and lightness of the generated color and are unrelated to directions.

Yet, when passing it through CSSJanus you get:

background: hsl(150 70% 30%);

which is totally wrong.

Another example:

background: color-mix(in srgb, red 30%, blue);

turns into

background: color-mix(in srgb, red 70%, blue);

The root cause is probably this regex which tries to capture background-position values out of the background shorthand property.


(As a side note, I'm not sure how this is even supposed to work well for actual position values, considering that the default alignment direction is still "left". For example,

background-position: 30%;

turns into

background-position: 70%;

which seems off)

@Krinkle Krinkle changed the title Flipping of unrelated percentage values in background shorthand property Flipping for background shorthand breaks CSS4 space-separated color functions Sep 13, 2023
@Krinkle
Copy link
Member

Krinkle commented Sep 13, 2023

@HumansCanWinElves Thanks for filing this bug. Looks like this is specific to the new space-separated color functions, which CSSJanus does not yet know about.

@HumansCanWinElves
Copy link
Author

HumansCanWinElves commented Sep 14, 2023

@Krinkle the issue isn't just about the new space-separated syntax. It is the same with the old comma-separated syntax of the hsl() function, as well as with the mandatory comma-separated syntax of the color-mix() function mentioned in the report.

For example,

background: hsl(150, 30%, 30%);

becomes

background: hsl(150, 70%, 30%);

@Krinkle Krinkle changed the title Flipping for background shorthand breaks CSS4 space-separated color functions Flipping for background mitakes percentages in color functions for background-position Sep 22, 2023
@Krinkle Krinkle changed the title Flipping for background mitakes percentages in color functions for background-position Flipping for background mistakes percentages in color functions for background-position Sep 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

2 participants