Nesting with postcss-nesting instead of postcss-nested fails

[AlecRust]

Given this source CSS:

.u-hiddenVisually {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

/* then later in a different file: */

.FormField--hiddenLabel {

  & .FormField-label {

    @inherit: .u-hiddenVisually;
  }
}

I would expect this output:

.u-hiddenVisually,
.FormField--hiddenLabel .FormField-label {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

But instead I get this output:

.u-hiddenVisually,
& .FormField-label {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

This occurs when I switch from postcss-nested to postcss-nesting. I'm not sure if it's an issue with postcss-inherit or postcss-nesting.

[AlecRust]

It appears moving postcss-inherit to the end of my plugins list fixes this.

I've been informed at csstools/postcss-plugins#209 that if this plugin used PostCSS 8 the plugin order would not matter.

Edit: In fact it seems this plugin doesn't work with PostCSS 8 at all, which I was not running until now.