There is a bunch of plugins that has the similar way of dealing with things, but it is sometimes really tough or impossible to make them work perfectly together.
Example: various plugins that implement custom functions: height(), svg-load(), precalculating calc(). Some of them use custom implementations, some reuse the amazing postcss-functions plugin. But if you want to make them work nicely together, you should be really careful about the order you enable your plugins. For instance, this code:
padding-top: calc(height('image.png') + 20px);
It wouldn't reduce to a number if postcss-calc is enabled after postcss-assets in the array of plugins. You may reorder them, but it would break stuff in a place where functions are nested the other way around:
width: height('image.png', calc(10 / 2));
That was a pretty unrealistic example, but I have a gut feeling that this is still a nasty imperfection that should be fixed. In a perfect world, you add all of your function-defining plugins, and they execute simultaneously. But I can't think of the way of achieving this with the current API.
The other example is plugins that deal with resolving paths: the aforementioned svg-load and postcss-assets, postcss-inline – they all can benefit from having a shared path resolving core. So, for instance, you tell your plugin chain that the load paths are this and that, and postcss-assets and svg-load both honor that single setting. I don't really know a way how to smoothly implement such an approach.
Could you guys share your thoughts on this matter?
Good idea. We already have idea, how to fix it #296
Closed. as duplicate, not as wontfix ;)
@ai some brilliant discussion out there, I should have searched for it better. However, I don't really see how that topic covers my second point, the one about shared core for a few different plugins.
@borodean resolving core looks very promising!
@TrySound @jantimon @swernerx what do you think of creating something like postcss-resolve-path and use it in all your plugins?
@ai I guess that the main complexity there would be the issue of sharing configs. How one can tell, say, postcss-assets and svg-load to use the same array of the load path upon path resolution?
I thought about same logic, not same config :D
User could put paths to variable and use this variable for both plugins
Config can be different for different cases. Save to variable if you want to reuse it.
In my plugin I had to add the config.compilation.compiler to https://github.com/jantimon/iconfont-webpack-plugin/blob/master/lib/postcss-plugin.js#L134 and moved the part where it loads and works with the images to another file so that webpack can watch the images for changes.
Unfortunately that way it works only with webpack.