Two fallbacks after preprocessing

[DZakh]

Honestly I don't really know either it's an issue of postcss-css-variables or something else, but I'm going to keep it right here.

My problem:

After I build my project I have two fallbacks for a css variable.

:root {
  --main-clr: red;
}
/* Original code */
.some-selector {
  color: var(--main-clr);
}
/* Becomes */
.some-selector {
  color: red;
  color: red;
  color: var(--main-clr);
}

And I've found how to fix it (after two hours)

I had to make postcss.config.js

module.exports = {
  plugins: [require('postcss-preset-env')({})]
};

instead of .postcssrc

{
  "modules": true,
  "plugins": {
    "postcss-preset-env": {}
  }
}

About my doubts

As I said before, it may be not a problem of the package, but some other things I use in my project: Parcel, PostCss, my stupidity, or even Sass's imports.

[MadLittleMods]

@DZakh In your plugins array, I don't see postcss-css-variables listed so this plugin wouldn't be used. Is that your actual config?

If I run your original code in the playground, I get an expected result with 1 fallback. What does the CSS look like when it reaches postcss-css-variables in the plugin stack?

Input:

:root {
  --main-clr: red;
}
/* Original code */
.some-selector {
  color: var(--main-clr);
}

Output:

/* Original code */
.some-selector {
  color: red;
}

[DZakh]

@MadLittleMods Well, I have postcss-preset-env in my example, because I use it in my project and postcss-css-variables is inside of it.

But what's more important:

I was recreating my working environment to show you the problem and during the process I found an actual source of the problem. Eventually it was because of the "modules": true, thing. I don't even know how it appeared in my config, because I don't use postcss-modules...

So

Here is my code, but I think we can close the issue, because it's not really related to the repo.