How to write css output before/after each plugin?

[therealgilles]

I am trying to track down an incorrect css build and would like to figure out which plugin is at fault. Is there a way to write out the css output before/after each plugin?

[ai]

There is no easy way, because in PostCSS 8 all plugins runs together. PostCSS walks through CSS tree and send nodes to listeners from all plugins.

You can try to debug code in walkSync and async of https://github.com/postcss/postcss/blob/main/lib/lazy-result.js

[therealgilles]

Hmm tailwindcss is advertised to be using PostCSS 8 and I can see its object declaration:

  return {
    postcssPlugin: 'tailwindcss',
    plugins: [...plugins, (0, _processTailwindFeatures.default)(getConfig), _formatCSS.default]
  };

so not sure why it does not appear in my console.log.

[ai]

Once event runs together with PostCSS 7 plugins

[therealgilles]

Is there a way to put a PostCSS 8 plugin in the PostCSS 7 plugin queue so that it runs on its own in a controlled order?

[therealgilles]

I am also looking at ways to having completely separated PostCSS runs.

[ai]

Once from PostCSS 8 plugin works in PostCSS 7 plugins queue.

There is no way to use full event system from PostCSS 8 to PostCSS 7 queue.

Maybe you can show CSS before/after very event? Or you can track AST changes by hacking Node.* methods.