Variable replacement failure

[geovezir]

[email protected]

CSS input

:root {
  --color1: #000000;
  --color2: #FFFFFF;
}

.success {
  background-image: linear-gradient(var(--color1), var(--color2));
}

.fail {
  background-image: linear-gradient(var(--color1),var(--color2));
}

CSS ouput ( preserve: false )

.success {
  background-image: linear-gradient(#000000, #FFFFFF);
}

.fail {
  background-image: linear-gradient(#000000,var(--color2));
}

The variable is left unchanged if there is no space between the comma and the "var" keyword.

[merrywhether]

This especially effects SCSS chains in webpack, as sass-loader/node-sass defaults to the ,var output. A workaround for this is to add outputStyle: "expanded", to the sassOptions to ensure whitespace exists in between.