This repository was archived by the owner on Feb 18, 2022. It is now read-only.
Repository navigation
This repository was archived by the owner on Feb 18, 2022. It is now read-only.
Custom Property as Fallback for Custom Property #208
Description
Hello,
thanks for the awesome package and the great work.
I have found an issue when you have a Custom Property defined as Fallback of a Custom Property.
Given the following example:
:root {
--my-background: #fff;
}
.three {
background-color: var(--my-var, var(--my-background, pink));
}
Expected output should be:
:root {
--my-background: #fff;
}
.three {
background-color: #fff;
}
The Current output if --my-background is defined is like this:
:root {
--my-background: #fff;
}
.three {
background-color: var(--my-background, pink);
}
In my opinion the current output is wrong and i would like to make a PR for this if you agree.
Thanks
Activity
Semigradsky commentedon Feb 20, 2020
Feel free to send PR! :)
Semigradsky commentedon Feb 20, 2020
I think expected output for
should be:
What do you think?
matthiaskomarek commentedon Feb 21, 2020
Hey @Semigradsky, thanks for the fast reply.
Your suggestion would break browsers which doesn't support custom properties. Or am i wrong?
Semigradsky commentedon Feb 21, 2020
But
will break current browsers. What if we have defined
--my-var? Or we want define it via javascript.evanminto commentedon Jul 14, 2020
I agree that you can’t replace the entire declaration, but it would be useful to be able to provide a fallback value when
preserveis set totrue. In my project I’m using this plugin to provide fallback values for older browsers. They’re overwritten by thevar()versions in newer browsers. I’d want @matthiaskomarek’s code to turn into:The fallback value represents the value I want to use when
--my-varisn't set. So it makes sense that I’d want to use that same value for browsers that don't support custom properties at all (since that's also a situation where--my-varisn't set).calebdwilliams commentedon Mar 26, 2021
This is addressed by #240.