search

andywer / postcss-debug

Debug your postcss workflow with ease! Creates snapshots of your CSS files before/after each postcss plugin is run.
MIT License
95 stars 7 forks source link

how to integrate with webpack #11

Open ctaepper opened 8 years ago

ctaepper commented 8 years ago

i got the debug function working, but i have no idea how or where to add .inspect() method and where to access the ui?

andywer commented 8 years ago

Hi @ctaepper!

I was just writing some instructions when it appeared to me that right now the postcss-debug code might not yet handle the dynamic nature of webpack incl. changing file contents properly.

We will have to fix this. In the meantime... Can I suggest using the postcss-debug CLI for now?

Just add a .postcss.js file to set up your postcss plugins as described here: https://github.com/andywer/postcss-debug#cli

Sorry for the inconvenience!

ctaepper commented 8 years ago

no worries, will do that... mind keeping this issue open in the meantime? PS: i like your postcss repos ;-)

andywer commented 8 years ago

Sure, let's keep it open as a reminder for now.

Btw: Thanks! I am glad about your feedback, too. I always start by the assumption that it's easy to solve and then recognize it's not ;)

andywer commented 8 years ago

I am still thinking about it... I see multiple problems for the webpack scenario (which is a shame, since I like webpack and many people use it).

Like

(Just wanted to write my current thoughts down, so they don't get lost ;) )

ctaepper commented 8 years ago

i don't know anything about neither dev-server internals nor postcss debugger internals ... but shouldn't it be possible to make the dev-server serve the debugger under a special path? like server:port/_postcss_debugger (assuming the debugger-ui is a static tool?)

andywer commented 8 years ago

Serving the debugger is not the problem. But updating the debugger view when the dev-server re-compiles a changed css file is. Plus: If a file is processed by two different postcss instances (like postcss-loader + css-loader w/ css modules) then we might run into issues, too, since the debugger assumes that files are only processed by postcss once...

andywer commented 8 years ago

Didn't forget you. I think I know how to implement better and more dynamical webpack support, but it's not going to be as nice as I would like it to be. And I barely have the time to implement it...

So my suggestion for now (btw this is how I currently do it [also in a webpack-based setup]): Just use the postcss-debugger CLI 🙈😉