csstools / postcss-nesting

Nest style rules inside each other

Home Page:https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Migrate to Postcss 8 API

bcomnes opened this issue · comments

Looks like postcss 7 plugins are working again with 8, but its still recommended to port over to the new PCSS 8 api:

https://evilmartians.com/chronicles/postcss-8-plugin-migration

It looks like the current main branch needs more updates to be fully PostCSS 8 compliant, maybe?

"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 the latest main branch where CSS added from a previous plugin in the postcss config isn't processed by the later-defined postcss-nesting and I suspect (but don't know) that this might be the reason.

Looks like jn got a start on it over here: #75

Go Jonathan Go!