title: Nested CSS Custom Properties (CSS Variables) with media-queries in IE 11?
body: <p>My setup:</p>
  
  <pre><code>// Set CSS Vars
  :root {
    // These variables control everything
    /* set base values */
    --text-base-size: 1.125em;
    /* This is for smaller text (sm and down) */
    --text-scale-ratio-down: 1.15;
    /* This is for larger text (md and up) */
    --text-scale-ratio-up: 1.18;
  
    // Calculate sizes
    --text-xxs: calc(((1em / var(--text-scale-ratio-down)) / var(--text-scale-ratio-down)) / var(--text-scale-ratio-down));
    --text-xs: calc(var(--text-xxs) * var(--text-scale-ratio-down));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio-down));
    --text-md: calc(1em * var(--text-scale-ratio-up));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio-up));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio-up));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio-up));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio-up));
    --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio-up));
  }
  
  // Responsive
  // Override variables for recalculation on desktops
  @include mq(xxl){
      :root {
      /* set base values */
      --text-base-size: 1.313em;
      /* This is for smaller text (sm and down) */
      --text-scale-ratio-down: 1.18;
      /* This is for larger text (md and up) */
      --text-scale-ratio-up: 1.22;
    }
  }
  
  body {
    // Set base font size
    font-size: var(--text-base-size);
  }
  
  // Set font-size
  h1 {
    font-size: var(--text-xxxl);
  }
  </code></pre>
  
  <p>After compiling with <code>postcss-preset-env</code> it looks like that in <strong>IE 11</strong>:</p>
  
  <pre><code>h1 {<br>  font-size: 1.93878em;<br>  <s>font-size:var(--text-xxxl);</s>");<br>}
  </code></pre>
  
  <p>IE 11 does not understand custom properties and uses the value <strong>1.93878em</strong>. This value was statically calculated by <code>postcss-preset-env</code>.</p>
  
  <p>This is correct on mobile devices! On larger desktops, the CSS variables are adjusted by the media-query and the text is displayed larger.</p>
  
  <p><strong>This does not work here, because the IE 11 does not recognize the updating of the CSS variable in the media-query. Maybe it does not work, because the CSS variables are nested?</strong></p>
  
  <p>What can a solution for the IE 11 look like?</p>