Plugins docs

[Mangatt]

It would be great to include some docs on plugins usage. Right now, it's not clear how to integrate mentioned plugins at all.

E.g. postcss-url should work great with postcss-import, but integrating postCssUrl({url: 'rebase'}) into plugins don't do anything at all.

[romainmenke]

@Mangatt Can you provide a concrete example of something you are trying to do and what doesn't work?

The best thing for us is a github repro with a minimap reproduction.

---

Currently it is not exactly clear what the issue is, or if there is an issue at all :)

[Mangatt]

Sure, there's snippet:

import postcss from 'postcss'
import atImport from 'postcss-import'
import postCssUrl from 'postcss-url'

const cssImports = (css, file) =>
    postcss()
        .use(
            atImport({
                plugins: [
                    postCssUrl({
                        url: 'rebase',
                    }),
                ],
            })
        )
        .process(css, { from: file })

[Mangatt]

I'm trying to make work postcss-import with postcss-url as mentioned in docs, because relative urls in CSS need to be rewritten.

[RyanZim]

@Mangatt Yeah, I can see how that can be confusing. The plugins option is something you'd rarely use; it's only applied to imported files. Instead, you'd want to run postcss-url as a regular postcss plugin, after postcss-import, like this:

import postcss from 'postcss'
import atImport from 'postcss-import'
import postCssUrl from 'postcss-url'

const cssImports = (css, file) =>
    postcss()
        .use(atImport())
        .use(postCssUrl({ url: 'rebase' }))
        .process(css, { from: file })

[Mangatt]

Nice, thank you very much!

Still, I think it would be great to add this example to the docs, I can imagine that I'm not the only one with this problem.