Custom properties replacement not working with fallback value

[DavidHenri008]

The plugin does not seem to replace the custom properties properly if they are declare using a fallback value.

With the following css:

:root {
    --myColor: deepPink;
}

.altHeader {
    color: var(--myColor, green);
}

I am expecting the color to be deeppink but it is always green.

Here is my webpack configuration:

{
  loader: "postcss-loader",
  options: {
    plugins: () => [
      require("autoprefixer"),
      require("postcss-custom-properties")({
        preserve: "computed",
       }),
       require("postcss-color-function"),
     ],
     sourceMap: true,
  }
},

[jonathantneal]

I added this test:

https://github.com/jonathantneal/postcss-tests/blob/master/postcss-custom-properties-test-01/test.css

:root {
  --myColor: deepPink;
}

.altHeader {
  color: var(--myColor, green);
}

I was also sure to set the preserve: "computed" option.

The test produced this result:

:root {
  --myColor: deepPink;
}

.altHeader {
  color: green;
  color: deepPink;
}

Based upon that result, .altHeader should be deepPink.

While I’m closing this issue because the test does not produce your results, I am still open to talking this out further with you and helping you resolve your issue. Are you running the latest version?

[DavidHenri008]

You are right. I tried it again, with a simpler webpack config and it worked. I do not know what went wrong last time I checked.

Great thanks.