Conversation

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://.com/postcss/postcss-url or https://.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://.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://.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://.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

@unlightunlight merged commit 4d04c97 into unlight:master Mar 1, 2020
@unlight

🎉 This PR is included in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Successfully merging this pull request may close these issues.