postcss-simple-vars unknown variable when using nested loops

[hendriku]

Hello there, we'd like to use this plugin together with postcss-simple-vars. This is supported, right?

I am currently getting this error in one of my postcss files:

with the following as my config:

module.exports = (ctx) => ({
  map: ctx.options.map,
  parser: ctx.options.parser,
  plugins: [
    require("postcss-import")(require("postcss-normalize")().postcssImport()),
    require("postcss-preset-env"),
    require("postcss-flexbugs-fixes"),
    require("postcss-mixins"),
    require("postcss-nested"),
    require("postcss-each")({
      plugins: {
        afterEach: [require("postcss-simple-vars"), require("postcss-calc")]
      }
    }),
    require("postcss-hexrgba"),
    require("postcss-utilities"),
    require("postcss-viewport-height-correction"),
    require("postcss-size"),
    require("autoprefixer"),
    ctx.env === "production" ? require("cssnano") : false
  ]
});

If I stop using postcss-simple-vars the postcss-each package works and I am getting no errors. But configured like this, postcss-simple-vars should actually not see the @\each rules statements, shouldn't they?

Thanks in advance!

[hendriku]

Okay now I've managed to get a minimal example working and figured out some detail about the issue. First of all I mixed up the plugin order. afterEach is obviously called BEFORE the at-each statements are resolved. Maybe a note in the docs explaining this also on the example of simple-vars would be helpful to others. However, as simple-vars thinks the $i were its variables it starts to complain. My minimal example working with beforeEach instead of afterEach in postcss config:

$black: #010101;
$white: #fff;

body {
  background-color: $black
}

@each $i in 1,2,4,8,16 {
  body.m$(i) {
    background-color: $white;
    margin: $(i)px;
  }
}

BUT there is another issue. As soon as I nest multiple each definitions, the error comes back within the inner at-each. This makes sense as after the resolving of the outer at-each simple-vars is being called and faces the same issue as mentioned initially. Example:

$black: #010101;
$white: #fff;

body {
  background-color: $black
}

@each $i in 1,2,4,8,16 {
  @each $j in 1,2,3,4 {
    body.m$(i)-$(j) {
      background-color: $white;
      margin: $(i)px;
    }
  }
}

produces

TLDR; How can we use this package together with @postcss-simple-vars AND use nested at-each statements? :) @madyankin

[ryansch]

After digging in to this issue I decided to configure simple-vars to emit a warning only if the node exists after all of the plugins run.

require('postcss-simple-vars')({
  unknown(node, name, result) {
    // Print out warning if the node still exists at the end.
    node.warn(result, 'Unknown variable ' + name);
  }
}),