css variable from imported files

[iliakan]

According to CSS vars draft, if I import a file with :root variables, it should work, right? But it doesn't with postcss-custom-properties.

vars.css:

:root {
  --some-color: red;
}

main.css:

@import 'vars.css';

body {
  color: var(--some-color);
}

The variable doesn't get into main.css, is that a bug or a feature?

[iliakan]

P.S. I'm using postcss-custom-properties via postcss-preset-env.

[oliversierrab]

Same here, using as postcss plugin and webpack.

{ loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ postcssCustomProperties({ preserve: true }) ] } },,

[pascalduez]

The variable doesn't get into main.css, is that a bug or a feature?

If you want the vars.css file to get appended at the top of the main.css file and ship only one file to the browser you'll need a plugin such as postcss-import, otherwise it's just plain default @import behaviour.

Alternatively there's also the importFrom option.

[oliversierrab]

Hey @pascalduez thanks, I'm using sass with this, so have it like this: style-loader|css-loader|postcss-loader|sass-loader so sass-loader is handling the import. Thanks

[pascalduez]

Oh okay. Well, at that point without a minimal reproducible code/repo, we won't be able to help much.

[oliversierrab]

Thanks @pascalduez I'll try to get a sample together, working on a private repo that I cannot share. Thanks

[ryanfitzer]

I see the same issue. I'm even using postcss-import and it's running as the first plugin in my postcss.config.js. The only way I can get this to work is through importFrom. I'll try to put a minimal example. Just pressed for time at the moment.