Css Variables fallback

[Jab2870]

People are increasingly using css variables over less variables because of their inheritance abilities.

Unfortunately, ie11.

It would be very helpful if this plugin were to add a version of the property if a fallback is specified. For example:

@highlight: red;

::root {
--highlight: @highlight;
}

div{
--highlight: green;
}

a{
color: var(--highlight, @highlight)
}

Currently, the above compiles to:

::root {
  --highlight: red;
}
div {
  --highlight: green;
}
a {
  color: var(--highlight, red);
}

This would result in anchors being red in most cases. For browsers that support variables, anchors would be green if inside a div.

In a browser that doesn't support variables, anchors will be the default anchor colour.

My question is this:

Would it be possible for auto-prefix to turn color: var(--highlight, @highlight) into

color: @highlight;
color: var(--highlight, @highlight);

[seven-phases-max]

1. The plugin has no idea of Less variables (basically the plugin is a wrapped for PostCSS Autoprefixer).

2. And even if it would (let's say you propose this feature for Less itself instead of the plugin), what you want is still impossible simply because Less has no idea of your HTML hierarchy (note Less code is compiled to a CSS with no knowledge of page(s) you'll later apply this CSS to). E.g. consider the following snippet:

   CSS

   div  {--highlight: blue}
   span {--highlight: green}
   a {color: var(--highlight)}

   HTML

   <div ><a>Foo</a></div>
   <span><a>Bar</a></span>

   ---

   Now how can Less possibly know if the fallback value is blue or green?. There's no way.

[seven-phases-max]

Closing as "Not Applicable".