postcss-debug-logger

[romainmenke]

I often create variations of this plugin when something is causing an infinite loop.
This just logs whatever is being visited by PostCSS :

sample :

Root
  index      : N/A
  nodes      : 1
  input.from : test/document.html

Declaration
  prop       : color
  value      : red
  index      : 0
  raw        : {"before":"","between":": "}
  input.from : test/document.html

DeclarationExit
  prop       : color
  value      : red
  index      : 0
  raw        : {"before":"","between":": "}
  input.from : test/document.html

RootExit
  index      : N/A
  nodes      : 1
  input.from : test/document.html

DocumentExit
  nodes      : 2
  input.from : test/document.html

OnceExit
  index      : N/A
  nodes      : 2
  input.from : test/document.html

OnceExit
  index      : N/A
  nodes      : 1
  input.from : test/document.html

It makes it possible to find the general location and sometimes the exact CSS that is causing freezes/hangs.

I didn't really find it necessary before to make this into a real plugin and publish it, but apparently there are still frameworks/stacks that do not allow passing plugin instances and require users to pass module names. The alternative is fiddling with npm link, which I do not like either.

This plugin can also be used by our users as a way to provide us with more debug info.

[Antonio-Laguna]

This is great! Sad that has to be done but great!

Thanks! 🙇🏻