Parcel fails to import intlTelInput.css due to relative URLs

[travisfisher-pdi]

When attempting to import 'intlTelInput.css', Parcel fails, stating:

@parcel/transformer-css: Ambiguous url('../img/flags.webp') in custom property. Relative paths are resolved from the location the var() is used, not where the custom property is defined. Use an absolute URL instead

I looked into this further and it looks like Parcel moved to it's own CSS parser (Parcel CSS) back in 2022:

https://parceljs.org/blog/v2-4-0/

That parser is more strict than other commonly used parsers, especially as it pertains to the url function:

https://parceljs.org/languages/css/#url()

Please note that I did include the "overwrite" CSS variables recommended for the flags and images and used absolute paths, but this did not resolve the issue since the bundler sees the package's CSS as invalid and goes no further.

Any ideas on how I can bypass / ignore this error with Parcel?

[jackocnr]

I'm afraid we can't change those defaults, as that would be a breaking change.

But when we do the next major release, we could tweak how it works, so instead of storing the whole url() in the variable, we could just store the path string e.g. change from this:

--iti-path-flags-1x: url("../img/flags.webp");
background-image: var(--iti-path-flags-1x);

to this:

--iti-path-flags-1x: "../img/flags.webp";
background-image: url(var(--iti-path-flags-1x));

Do you think that would pacify Parcel?

We won't be doing a major release for a few months, but until then, maybe you can just load the plugin stylesheet outside of Parcel? Or you could fork this project and change the defaults, and then use your fork until we make this change?