feat: Resolve relative URLs in property values

[alex-ketch]

Hi @unlight, and thanks for this plugin!

I encountered a need for converting relative paths referenced in remote files to be absolute, as otherwise it the relative files would fail to resolve, and cause build issues down the pipeline.
Let me know if this PR is something you'd want to accept or not.
But for our use case, resolving assets paths to be absolute allows for chaining with other plugins to either download the assets or inline them as base64.

I've added tests which should illustrate the resolution better, but here's the idea:

/* myFile.css */
@import url("https://example.com/styles.css");

/* https://example.com/styles.css */
@font-family {
  src: url("./relative/path/font.woff");
}

Output

/* myFile-compiled.css */
@font-family {
-  src: url("./relative/path/font.woff");
+  src: url("https://example.com/relative/path/font.woff");
}

---

One question though, I didn't put this functionality behind an option flag as I didn't think keeping asset paths relative would be a desirable very often, but I can see how that might be misconception on my part, or even a breaking change for some setups.
I'd appreciate your guidance on how, and if, you'd like this to work.

Thanks again 👋

[unlight]

Hi @alex-ketch
Thanks for PR.
Have you tried https://github.com/postcss/postcss-url or https://github.com/devex-web-frontend/postcss-assets-rebase add to your postcss pipeline?

[unlight]

@alex-ketch ping

[alex-ketch]

Hi @unlight, I've been busy with work but will try to to confirm what I encountered by making a test repo.

But from I remember, I tried using (postcss-url)[https://github.com/postcss/postcss-url] but it did not solve my problem because it was still looking for the resources on my local machine, rather than on the remote server. I did not come across https://github.com/devex-web-frontend/postcss-assets-rebase during my searches.
Will get back to you once I do a bit more testing.

Thanks for your patience

[alex-ketch]

Hi again @unlight, I've made a repo with a minimal setup demonstrating the issue this PR tries to solve. I also have a couple configurations using the plugins you suggested, but they don‘t seem to solve the problem either.
It can be found here: https://github.com/alex-ketch/postcss-import-url-resolve-test

Let me know if you have any questions are need clarification.
Thanks

[unlight]

@alex-ketch
PR looks good to me (I'm going to accept next weekend), but it would be nice if new feature would be hidden under option with default value false.

[alex-ketch]

Appreciate it @unlight, I can put it behind a flag.
Does either resolveUrls or qualifyUrls sound good for the option name? Preference over singular vs plural?

[unlight]

resolveUrls sounds good (plural).

[alex-ketch]

@unlight I've made the changes, added test, and update the README.
Let me know if you have any feedback

[unlight]

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀