Not working when variables file is @import -ed

[radubrehar]

I have variables in one file, let's call it 'vars.css'

In 'main.css' I try to @import './vars.css'and use variables. This fails and renders undefined. If I define variables in the same file where I use them, it's working.

vars.css

:root {
  --red: #D85743;
}

main.css

@import './vars.css'; /*or @import url('./vars.css')*/

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

[MadLittleMods]

@radubrehar Are you running postcss-import before postcss-css-variables (plugin order)?

[radubrehar]

Is it necessary? I mean I don't want to inline all my css files that I @import

[MadLittleMods]

@radubrehar Do you know of another plugin that can handle declarations that are in a @import'ed file? I am curious to see what they are doing.

Running postcss-import before postcss-css-variables is necessary now because we get the map of variables from the rules and declarations passed in.

[radubrehar]

Thanks, it works!