nested @inherit inside of @media fails

[sodiumjoe]

minimal repro source css:

%Foo {
  background: red;
}

%Bar {
  @inherit: %Foo;
}

@media (min-resolution: 1.5dppx) {
  .Button {
    @inherit: %Bar;
  }
}

and js:

const postcss = require('postcss');
const inherit = require('postcss-inherit');
const fs = require('fs');

fs.readFile('./repro.css', (err, css) => {
  postcss([inherit])
    .process(css, { from: './repro.css', to: 'dist/repro.css' })
    .then(result => {
      console.log(result.css);
      fs.writeFile('dist/repro.css', result.css, () => true);
    })
  .catch(console.log.bind(console))
});

results in:

CssSyntaxError {
  name: 'CssSyntaxError',
  reason: 'Could not find rule that matched %Foo in the same atRule.',
  file: '/Users/moon/stripe/pay-server/frontend/bootstripe/repro.css',
  source: '%Foo {\n  background: red;\n}\n\n%Bar {\n  @inherit: %Foo;\n}\n\n@media (min-resolution: 1.5dppx) {\n  .Button {\n    @inherit: %Bar;\n  }\n}\n\n',
  line: 6,
  column: 3,
  message: 'postcss-inherit: /Users/moon/stripe/pay-server/frontend/bootstripe/repro.css:6:3: Could not find rule that matched %Foo in the same atRule.',
  input:
   { line: 6,
     column: 3,
     source: '%Foo {\n  background: red;\n}\n\n%Bar {\n  @inherit: %Foo;\n}\n\n@media (min-resolution: 1.5dppx) {\n  .Button {\n    @inherit: %Bar;\n  }\n}\n\n',
     file: '/Users/moon/stripe/pay-server/frontend/bootstripe/repro.css' },
  postcssNode:
   AtRule {
     raws: { before: '\n  ', between: '', afterName: ' ' },
     type: 'atrule',
     name: 'inherit:',
     parent:
      Rule {
        raws: [Object],
        type: 'rule',
        nodes: [Array],
        source: [Object],
        selector: '%%Bar',
        lastEach: 6,
        indexes: [Object],
        parent: [Object] },
     source: { start: [Object], input: [Object], end: [Object] },
     params: '%Foo',
     lastEach: 5,
     indexes: { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0 } },
  plugin: 'postcss-inherit' }