Possible to run postcss-rewrite-url before postcss-bundler?

[ehoogeveen-medweb]

I was looking into replacing postcss-import with postcss-rewrite-url and postcss-bundler by using @import rewrite-url(), but it seems that postcss-bundler always runs first. I think this is because postcss-bundler applies to Once while postcss-rewrite-url applies to AtRule and Declaration, and Once simply happens earlier.

I found postcss/postcss#1786 (comment) which talks about an "event system" but I couldn't find anything about how plugins could inform each other about what they've done within the same pass (if this is even possible).

Is it possible to make this work right now, or would postcss-bundler need to get an option like postcss-preset-env's insertBefore, e.g.

postcssBundler({
  insertBefore: {
    'postcss-import': postcssRewriteUrl({ rewriter: myRewriter })
  }
})
?

[romainmenke]

Ha, yeah, you are right.

I should also implement the same thing as AtRule and Declaration in the Once hook.
I will do so later today :)

[romainmenke]

This shipped : https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-rewrite-url/CHANGELOG.md#110

Thank you for bringing this up!

[ehoogeveen-medweb]

I tried it, and it works! However, I found one more edge case: Nested @import rewrite-url() isn't handled, I guess because at that point we've left the normal plugin chain and are inside the logic of postcss-bundler. Would it be possible to make that work as well?

[romainmenke]

Nope, that isn't possible as pointed out in the original issue :)

Invalid @import statements (as something with rewrite-url() is) are not revisited by postcss-bundler after they have been altered.

So you either need to use postcss-import which does have a plugin option for this, or you need to write all your imports in your "root" css file :)

[ehoogeveen-medweb]

Hmm, that's a pity, though I think we're unlikely to run into it in practice. I think our primary use case will be to import the CSS for Vue SFCs in the root CSS for the page.

Nested dependencies aren't out of the question there (I can imagine components importing styles from other components that they use), but since I control the .css files generated from the .vue files I can just ensure that rewrite-url is transformed a little earlier in the pipeline. Though that might be a bad idea in general since I don't think postcss-bundler can deduplicate @imports as they might overlap in various ways.

Anyway I think I'll close the discussion here, thanks for the help! :)