No access to the variable declared in another file

[vohaha]

The plugin doesn't transform variable, declared in another file, to a value. In context of React. I used simple css loader and postcss-preset-env

INPUT

component1.css

:root {
   --color: red;
}

component2.css

* {
   color: var(--color);
}

OUTPUT

* {
   color: var(--color);
   color: var(--color);
}

EXPECTED OUTPUT

 * {
   color: red;
   color: var(--color);
}

But if I declared and used a variable in one file it transformed as expected. Or mb it's correct behavior and I don't understand something :( Could someone explain?

[pmadruga]

Had the same issue and solved by adding the postcss-import before the postcss-custom-properties, so in my postcss.config.js I have:

module.exports = {
  plugins: [
    require('postcss-import'),

    require('postcss-custom-properties')
  ]
};

[mevbg]

Had the same issue and solved by adding the postcss-import before the postcss-custom-properties, so in my postcss.config.js I have:

module.exports = {
  plugins: [
    require('postcss-import'),

    require('postcss-custom-properties')
  ]
};

But what if I have a file (vars.css) with defined variables inside :root { … } and I want to use them in several files?

For example, if I @import vars.css in three separate files where variables are needed, I would end up with three times printed :root { … } declarations in the output that overwrite each other.

And if I @import vars.css in one file only, then the fallback feature won't work for the other two files.

[jonathantneal]

For these scenarios, the upcoming importFrom will allow you to do this.