Custom Property as Fallback for Custom Property

[matthiaskomarek]

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

[Semigradsky]

Feel free to send PR! :)

[Semigradsky]

I think expected output for

:root {
    --my-background: #fff;
}
.three {
  background-color: var(--my-var, var(--my-background, pink));
}

should be:

:root {
    --my-background: #fff;
}
.three {
  background-color: var(--my-var, #fff);
}

What do you think?

[matthiaskomarek]

Hey @Semigradsky, thanks for the fast reply.

Your suggestion would break browsers which doesn't support custom properties. Or am i wrong?

[Semigradsky]

But

.three {
  background-color: #fff;
}

will break current browsers. What if we have defined --my-var? Or we want define it via javascript.

[evanminto]

I agree that you can’t replace the entire declaration, but it would be useful to be able to provide a fallback value when preserve is set to true. In my project I’m using this plugin to provide fallback values for older browsers. They’re overwritten by the var() versions in newer browsers. I’d want @matthiaskomarek’s code to turn into:

.three {
  background-color: #fff;
  background-color: var(--my-var, var(--my-background, pink));
}

The fallback value represents the value I want to use when --my-var isn'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-var isn't set).

[calebdwilliams]

This is addressed by #240.