title: Fallback for CSS variable assigned to a CSS variable
body: <p>When it comes to features like CSS Custom Properties, I use <a href="https://github.com/csstools/postcss-preset-env" rel="nofollow noreferrer">postcss-preset-env</a> in order to have fallback definitions printed for older browsers like IE 11.</p>
  
  <p>So, for example if I have:</p>
  
  <pre><code>:root {
      --col-light: #fff;
  }
  
  body {
      background-color: var(--col-light);
  }
  </code></pre>
  
  <p>the output will be:</p>
  
  <pre><code>:root {
      --col-light: #fff;
  }
  
  body {
      color: #fff; // the fallback value
      color: var(--col-light);
  }
  </code></pre>
  
  <p>However, when I assign a CSS variable to another CSS variable and use the second one as a value for a property, then the fallback feature does not work as expected – it's not passing the first variable's value (#fff) through the second variable to the property. So if I have this:</p>
  
  <pre><code>:root {
      --col-light: #fff;
      --main-background: var(--col-light);
  }
  
  body {
      background-color: var(--main-background);
  }
  </code></pre>
  
  <p>The output will be like so:</p>
  
  <pre><code>:root {
      --col-light: #fff;
      --main-background: #fff; // a fallback value where it's not needed
      --main-background: var(--col-light);
  }
  
  body {
      color: var(--main-background);
  }
  </code></pre>
  
  <p>The outcome makes the fallback feature useless.</p>
  
  <p>So here comes the question:
  <strong>Is there a way to make the fallback feature working as expected?</strong></p>