Global Variables are ignored

If you try to define a variable like so:

/* Global Variables */
:global :root {
  --bkg: red;
}

/* Local Variables */
:root {
  --color: blue;
}

html {
  background-color: var(--bkg);
  color: var(--color);
}

You will get the following error back from webpack:

app/containers/App/styles.css
4:3       Custom property ignored: not scoped to the top-level :root element (:global :root { ... --bkg: ... }) [postcss-custom-properties]
12:3      variable '--bkg' is undefined and used without a fallback [postcss-custom-properties]

And a response that looks like this:

/* Global Variables */
:root {
  --bkg: red;
}

/* Local Variables */

html {
  background-color: var(--bkg);
  color: blue;
}

Essentially postcss-custom-properties looks for :root specifically and if it finds a variable in any other scope, it leaves the variable as is and doesn’t touch it. When it sees :global :root it automatically assumes it’s not the right scope and moves on.

This prevents a dev from add global variables such as theme colors and similar that can be reused across files.

[kastsiushkin]

I’m still having a problem with this. Getting warnings for every global variable I use. I tried adding postcss-custom-properties and postcss-import, but probably misconfigured them and can’t find a good example of Webpack config. Tried the one right above, but also no luck. Can someone please point me in the right direction?

My config:

var precss = require('precss');
var cssnext = require('postcss-cssnext');
var atImport = require('postcss-import');

...
postcss: [
    atImport,
    precss,
    cssnext,
],

I tired adding customProperties in various variations into the mix, but warnings remain. Thank you!

[MoOx]

Currently this project does not handle @import statement. You will need something like postcss-import in your stack to resolve this.