Plugin integration #895

Open
borodean opened this Issue Sep 26, 2016 · 7 comments

Projects

None yet

4 participants

@borodean
Contributor
borodean commented Sep 26, 2016 edited

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:

.foo {
  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:

.bar {
  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?

@ai
Member
ai commented Sep 26, 2016

Good idea. We already have idea, how to fix it #296

Closed. as duplicate, not as wontfix ;)

@ai ai closed this Sep 26, 2016
@borodean
Contributor

@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.

@ai
Member
ai commented Sep 27, 2016

@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 ai reopened this Sep 27, 2016
@borodean
Contributor

@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?

@ai
Member
ai commented Sep 27, 2016

I thought about same logic, not same config :D

User could put paths to variable and use this variable for both plugins

@TrySound
Member
TrySound commented Sep 27, 2016 edited

Config can be different for different cases. Save to variable if you want to reuse it.

@jantimon

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.

@ai ai referenced this issue Oct 28, 2016
Open

Import Plugin #906

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment