How to disable CSS @supports rules during debugging?

Remy Sharp has brought this issue up on Twitter 1. It would be useful if you could disable @supports rules in order to test how the page renders in browsers that do not support a given CSS feature. Remy tried using a var():

:root {
  --grid: grid;
}

@supports (display: var(--grid)) {

}

You would set --grid to something nonsensical in order to disable the @supports rule, but that doesn’t work. The condition is always true for any --grid value, even when it’s undefined. Why is that? Would it be possible to change this, so that this pattern becomes possible? If not, is there another way to disable @supports rules during debugging?

The condition is always true for any --grid value, even when it’s undefined. Why is that?

Because @supports just tests “does this property/value successfully parse?” and (almost) any value in a custom property validly parses.

ETA: Oh whoops, was misreading the example. Similar thing - a normal property with a var() reference in it must, per spec, be assumed to be valid at parse time; it’s only grammar-checked after variable substitution occurs. We can’t do variable substitution in this case, because there’s no element to draw the --grid property from, so we can’t even do something clever.