Undefined variable $ with postcss-each

[anlijiu]

example :

@each $name, $weight in (thin, ultralight, light, regular, medium, semibold, bold, extrabold, heavy), (100, 200, 300, 400, 500, 600, 700, 800, 900) { .font-$name { font-family: 'lc-gilroy'; font-weight: $weight; } }

Undefined variable $name

[sampullman]

postcss-each has an interesting way of solving this, you can use their afterEach option like so:

require('postcss-each')({
  plugins: {
    afterEach: [
      require('postcss-simple-vars')
    ]
  }
})

It would be better if this can be resolved more gracefully via #12, though.

[anlijiu]

same error. Dependency: "postcss-simple-vars": "^6.0.3", "postcss-each": "^1.0.0"

postcss.config.js sequence:

require('postcss-each')({
  plugins: {
    afterEach: [
      require('postcss-simple-vars')
    ] 
  } 
}), 
require('postcss-simple-vars')(),

If I change postcss-simple-vars index.js line 178 from "if (node.name === 'define-mixin') {" to “if (node.name === 'define-mixin' || node.name === 'each') {” it works .

but i still can't do this:

$some-variants: (thin, ultralight, light, regular, medium, semibold, bold, extrabold, heavy), (100, 200, 300, 400, 500, 600, 700, 800, 900);
@each $name, $weight in $some-variants
{
  .font-$name {
    font-family: 'lc-gilroy';
    font-weight: $weight;
  }
}

[sampullman]

Sorry for the lack of clarification, if I understand the postcss-each code correctly, you need to remove the second require('postcss-simple-vars')() (it should only be in the afterEach plugin).

[anlijiu]

I setup a clean repo only include 'postcss-simple-vars' and 'postcss-each' ,then every thing works fine

so I guess may be other plugin cause the problem.

Thank you for your reply !