[css-null-keyword] null keyword

[MartijnCuppens]

Imagine the following css:

body {
  background-color: red;
  background-color: var(--bg);
  --bg: null; /* I need to set this to anything that invalidates the background color so that the red background color is used */
}

As far as I know it's not possible to set the value of --bg to anything which will result to the property to become invalid. Maybe a null keyword could help us out here, which would basically mean: ignore this line.

An other use case would be:
CSS:

.animate {
  animation: animate 1s infinite alternate;
}

.animate-from-scale-50 {
  --animate-from-transform: scale(0.5);
}

.animate-to-scale-75 {
  --animate-to-transform: scale(0.75);
}

.animate-from-color-red {
  --animate-from-color: red;
}

.animate-to-color-yellow {
  --animate-to-color: yellow;
}

.color-blue {
  color: blue;
}

@keyframes animate {
  from {
    color: var(--animate-from-color, null);
    transform: var(--animate-from-transform, null);
  }
  to {
    color: var(--animate-to-color, null);
    transform: var(--animate-to-transform, null);
  }
}

HTML:

<div class="animate animate-from-color-red animate-to-color-yellow">
  Animate from color red to yellow.
</div>
<div class="animate antimate-from-scale-50 animate-to-scale-75 color-blue">
  Animate from scale 50% to 75%. The color isn't blue.
</div>

Demo: https://codepen.io/MartijnCuppens/pen/PoLavRM?editors=1100

Would a null keyword be interesting or are there existing workarounds?

[Loirooriol]

For your 1st code to work, you would actually need 2 features:

1. The ability to ignore a declaration and roll back to the next winner of the cascade: [css-variables][css-cascade] Proposal: additional CSS-Wide Keyword, "ignore" (primarily for css variable fallbacks) #5319
2. The ability to use the above on a custom property, but just tokenize it and defer its execution to when var() is used: css expression inheritance #2749

For now, I would recommend to make do with:

@layer {
  body {
    background-color: red;
  }
}
@layer {
  body {
    /* Fall back to `revert-layer`, which will roll back to `red` */
    background-color: var(--bg, revert-layer);
    /* Set it to the guaranteed-invalid value (assuming --bg is not registered) */
    --bg: initial;
  }
}

Your codepen should actually work if you used color: var(--animate-to-color, revert-layer) instead of color: var(--animate-to-color, null). And it works in WebKit indeed. But Gecko and Blink are buggy and it doesn't work, even though they do use blue for color: revert-layer. So please file bugs.

[Loirooriol]

So I guess this can be closed, partially as a duplicate of the issues linked above, partially as question answered. Please comment if you still need something not covered by that.