Don't suppress code when you don't know how to do with values

[MoOx]

Input

.title {
   background: var(--bg);
}
h1 {
  --bg: green;
}
h2 {
  --bg: red;
}

Output

.title {
   background: undefined;
}

Definitly looks like a bug

[tunnckoCore]

:+1:

[MadLittleMods]

This is actually how I intended, because the variable was undefined at that scope. We only work on explicitly defined scope. I understand that with real CSS variables, the true cascade if you did h1.title or h1 title in DOM structure would resolve the value.

If you want to preserve the var(...) version of the background declaration, set the opts.preserve option to true.

I could maybe see doing something like this, if the variable was not defined:

.title {
    background: var(--bg);
    background: undefined;
}

[tunnckoCore]

@MadLittleMods btw, add possibility to enable/disable options in the live playground.

.title {
    background: url('./img/foobar.png');
    background: var(--bg);
}

output

.title {
    background: url('./img/foobar.png');
    background: undefined;
}

not cool. what about to just save/preserve the old value of the property? and it will remain just var(--bg); and leave browser to decide how and what to do.

[tunnckoCore]

yea, it won't be cool again, cuz browser would override the previously defined value and in both cases the background won't be foobar.png, but i think it's better to preserve old value.

[MadLittleMods]

@tunnckoCore The background will fallback to background: url('./img/foobar.png'); in both cases because var(--bg) and undefined are invalid values by todays standards. See how Chrome invalidates the declarations with invalid values:

[tunnckoCore]

hmm, thanks! Good to know, I'm not familiar with the browser.

In that case.. I cant see problem to stay as it is now.

[MadLittleMods]

@tunnckoCore The playground now has options available under the gear icon in the header.

[tunnckoCore]

Extra :+1: