Doesn't work with postcss-custom-properties ?

[jtomaszewski]

Our example code:

@import "../common/variables.css";

@define-mixin color $color {
  color: $color;
}

.spinner--color-teal1 {
  @mixin color #00a790;
}
.spinner--color-teal2 {
  @mixin color var(--color-teal);
}
.spinner--color-teal3 {
  color: var(--color-teal);
}

Current Output:

.spinner--color-teal1 {
  color: #00a790;
}

.spinner--color-teal2 {
  color: var(--color-teal);
}

.spinner--color-teal3 {
  color: #00a790;
}

Expected Output:

.spinner--color-teal1 {
  color: #00a790;
}

.spinner--color-teal2 {
  color: #00a790;
}

.spinner--color-teal3 {
  color: #00a790;
}

postcss.config.js :

module.exports = {
  plugins: [
    require("postcss-import")(),
    require("postcss-mixins")(),
    require("postcss-custom-properties")({
      preserve: false,
    }),
    require("postcss-nesting")(),
    require("postcss-custom-media")(),
    require("autoprefixer")(),
  ],
};

Any idea what are we doing wrong?

Packages versions are up-to-date:

    "postcss": "^8.4.5",
    "postcss-color-function": "^4.1.0",
    "postcss-color-mod-function": "^3.0.3",
    "postcss-custom-media": "^8.0.0",
    "postcss-custom-properties": "^11.0.0",
    "postcss-import": "^14.0.2",
    "postcss-mixins": "^9.0.1",
    "postcss-nesting": "^10.0.3",

[jtomaszewski]

Mhm Actually packages versions weren't up to-date, as we've been using postcss-custom-properties v11, and it supports postcss8 only from v12 ...

However upgrading to v12 brings problems like postcss/postcss-custom-properties#256 and postcss/postcss-custom-properties#204 ;s

(Thinking what to do about it now.)

[ai]

We need to add full PostCSS 8 support to postcss-custom-properties to convert all data changed by postcss-mixins.

I am not sure that we can help from postcss-mixins side.