Working wrong with POSTCSS-CUSTOM-PROPERTIES

[elcoach290]

This is my postcss.config.js

module.exports = {
  plugins: [
    require('postcss-easy-import'),
    require('postcss-mixins'),
    require('postcss-nested'),
    require('postcss-custom-properties'),
    require("postcss-color-function"),
      ]
}

In the precompiled file y write:

.header{
    background-color: color(var(--lightcolor) a(30%));
}

The result is:

.header{
    background-color: rgba(255, 255, 255, 0.3);
    background-color: color(var(--lightcolor) a(30%));
}

The declaration is duplicated, what I did wrong???

the task is:

"scripts": {
    "css": "postcss pcss/style.pcss -o frontend/css/style.css —no-map —verbose"
}

what is missing ???

Thanks for your help friends!!

[Semigradsky]

What is your result without postcss-color-function?

[elcoach290]

@Semigradsky thanks for your help, without postcss-color-function the result is:

.header{
  background-color: color(white a(80%));
  padding: 15px 0;
  padding: var(--spacer) 0;
}

Now the padding is duplicated, I thinlk the problem is with the postcss-custom-properties package, is there aditional configuration that I need to do??, My current solution is use postcss-color-function without postcss-custom-properties, but I can't use variables as parameters when I use the color function.

[Semigradsky]

@elcoach290 by default postcss-custom-properties preserve rules with custom properties. You can disable this by set preserve: false, see configuration in readme: https://github.com/postcss/postcss-custom-properties#preserve

[elcoach290]

@Semigradsky thanks a lot you are a Master, I tried , but I did it wrong because I didn't know how to add that property, so I did it:

module.exports = {
  plugins: [
    require('postcss-easy-import'),
    require('postcss-mixins'),
    require('postcss-nested'),
    require('postcss-custom-properties', {preserve: false}),
    require("postcss-color-function"),
      ]
}

But the correct way is:

module.exports = {
  plugins: [
    require('postcss-easy-import'),
    require('postcss-mixins'),
    require('postcss-nested'),
    require('postcss-custom-properties')({
      preserve: false
    }),
    require("postcss-color-function"),
      ]
}

But your answer gave me confidence, and I try other way, maybe it could be added to the documentation, thanks again