Not fully compatible with PostCSS v8 API

[John Albin Wilkins]

Over in #70 (comment), I mentioned my issues with the then-in-progress v8 code hadn't yet completed all the steps in the PostCSS plugin migration guide. It looks like that step still hasn't been done; the postcss-8-nesting.js file is still using Once.

It looks like this project needs more updates to be fully PostCSS 8 compliant.

"Step 3: Take the most out of the new API" of the PostCSS plugin migration guide says:

PostCSS 8 does a single CSS tree scan. Multiple plugins can leverage the same scan for better performance.

To use the single scan you need to remove root.walk* calls and move the code to Declaration(), Rule(), AtRule() or Comment() methods in a plugin’s object:

module.exports = {
    postcssPlugin: 'postcss-dark-theme-class',
-   Once (root) {
-     root.walkAtRules(atRule => {
-       // Slow
-     })
-   }
+   AtRule (atRule) {
+     // Faster
+   }
  }
  module.exports.postcss = true

postcss-nesting still has:

const postcssNesting = () => {
	return {
		postcssPlugin: 'postcss-nesting',
		Once(root) {
			walk(root);
		}
	}
}

I'm experiencing a bug on v8.0.1 where CSS added from a previous plugin (like postcss-mixins) in the postcss config isn't processed by the later-defined postcss-nesting and I suspect that this might be the reason.

Steps to reproduce: Configure PostCSS with postcss-mixins before postcss-nesting. Then make a simple mixin with postcss-mixins that adds a nested rule. The postcss-nesting plugin will fail to convert the @nest into valid contemporary CSS.

@define-mixin hoverExample {
  @nest &:hover, &:focus {
    background: grey;
  }
}

.example {
  @mixin hoverExample;
}

Expected results:

.example:hover,
.example:focus {
  background: grey;
}

Actual results:

.example {
  @nest &:focus, &:focus {
    background: grey;
  }
}

[John Albin Wilkins]

postcss-nested updated to v8 API with this change: postcss/postcss-nested@ec804d1

I'm not sure if that will give any hints on how to fix this issue.

[Adam Lynch]

+1. This breaks:

@define-mixin example {
  /* ... */

  &::-webkit-scrollbar  {
    height: 4px;
    width: 4px;
  }
}

(Workaround: use a class instead of a mixin)

[Jonathan Neal]

This would also be resolved by #86