Broken with local custom properties (aka css vars)

[otbe]

Hi,

I recently upgraded to postcss 7.0.0 and postcss-preset-env 6.0.10 with postcss-color-mod-function 3.0.3 inside.

Somehow my color-mod functions are broken. For example:

:root {
  --colorsPrimaryLight: color-mod(var(--colorsPrimaryBase) tint(15%));
  --colorsPrimaryBase: #566581;
  --colorsPrimaryDark: color-mod(var(--colorsPrimaryBase) shade(15%));
}

worked with 2.4.3 of postcss-color-mod-function and is now broken (will not be transpiled):

I use postcss in my webpack config like:

 {
      loader: 'postcss-loader',
      options: {
        plugins: [
          postcssPresetEnv({
            stage: 0,
            browsers: [">2%"]
          })
        ]
      }
    }

Any idea whats wrong?

[jonathantneal]

Hi @otbe, color-mod() was deprecated by the CSSWG, and so it is disabled in PostCSS Preset Env. You can enable it manually like so:

postcssPresetEnv({
  stage: 0,
  features: {
    'color-mod-function': { unresolved: 'warn' }
  }
})

See: https://github.com/csstools/postcss-preset-env#features

[otbe]

Thanks for your answer!

That was a bit unexpected for me. I double checked it with https://preset-env.cssdb.org/ and there its still present, but I guess it will be removed in the next days? If not where can I follow the current state of active/deactivated features?

[jonathantneal]

Thank you so much for bringing this to my attention. The page was not showing the right stats because I had forgotten to update the cssdb dependency that powers that page. I have fixed it. Thanks!