<h1>Prefix and CSS variable bug</h1>
<div class="test test1"> This one works with no CSS variables.</div>
<div class="test test2"> This one doesn't work when CSS variables are added!</div>
<div class="test test3"> This one does work when CSS variables are added but only if prefixed rule is last!</div>

:root {
  --color-a: red;
}

/*This one works with no CSS variables */
/*
body {
  background-image: -webkit-repeating-radial-gradient(
      21% 21%,
      closest-corner,
      rgba(20, 5, 25, 1),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.6) 9%
    ),
    linear-gradient(red 5px, #0000 5px),
    linear-gradient(90deg, red 5px, #0000 5px);

  background-image: repeating-radial-gradient(
      21% 21%,
      closest-corner,
      rgba(20, 5, 25, 1),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.6) 9%
    ),
    linear-gradient(red 5px, #0000 5px),
    linear-gradient(90deg, red 5px, #0000 5px);
}

*/
/* this one doesnt work when variables are added */

/*
body {
  background-image: -webkit-repeating-radial-gradient(
      21% 21%,
      closest-corner,
      rgba(20, 5, 25, 1),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.6) 9%
    ),
    linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px);
   background-image: repeating-radial-gradient(
      21% 21%,
      closest-corner,
      rgba(20, 5, 25, 1),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.6) 9%
    ),
    linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px);


}
*/

/* this one doesn't work when CSS variables are added 
body {
  background-image: -webkit-repeating-radial-gradient(
    21% 21%,
    closest-corner,
    rgba(20, 5, 25, 1),
    var(--color-a),
    rgba(0, 0, 0, 0.6) 9%
  );

  background-image: repeating-radial-gradient(
    21% 21%,
    closest-corner,
    rgba(20, 5, 25, 1),
    var(--color-a),
    rgba(0, 0, 0, 0.6) 9%
  );
}
*/

.test {
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 1px solid #000;
  margin: 0 10px;
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  text-shadow: 1px 1px #fff;
}

.test1 {
  background-image: -webkit-repeating-radial-gradient(
    21% 21%,
    closest-corner,
    rgba(20, 5, 25, 1),
    red,
    rgba(0, 0, 0, 0.6) 9%
  );

  background-image: repeating-radial-gradient(
    21% 21%,
    closest-corner,
    rgba(20, 5, 25, 1),
    red,
    rgba(0, 0, 0, 0.6) 9%
  );
}

.test2 {
  background-image: -webkit-repeating-radial-gradient(
    21% 21%,
    closest-corner,
    rgba(20, 5, 25, 1),
    var(--color-a),
    rgba(0, 0, 0, 0.6) 9%
  );

  background-image: repeating-radial-gradient(
    21% 21%,
    closest-corner,
    rgba(20, 5, 25, 1),
    var(--color-a),
    rgba(0, 0, 0, 0.6) 9%
  );
}

.test3 {
  background-image: repeating-radial-gradient(
    21% 21%,
    closest-corner,
    rgba(20, 5, 25, 1),
    var(--color-a),
    rgba(0, 0, 0, 0.6) 9%
  );
  background-image: -webkit-repeating-radial-gradient(
    21% 21%,
    closest-corner,
    rgba(20, 5, 25, 1),
    var(--color-a),
    rgba(0, 0, 0, 0.6) 9%
  );
}