Relative references to URLs using assetPrefix in CSS

[jpage-godaddy]

Describe the feature you'd like to request

Problem Statement

We have a CICD system at our company where a single build image is produced and used across all our deployment environments. However, for each deployed environment we use separate CDN URLs for our static assets. This complicates things because the generated CSS that has a url(...) reference to an image uses an absolute URL based on the assetPrefix config setting. Because we perform our build against our production environment (so that we get NODE_ENV=production optimizations), the CSS that is generated thus contains absolute references to our production environment CDN. This means that in our staging environments, even when we load the CSS from our staging CDN URLs, the CSS tries to load images from the production URLs due to those absolute URLs being used. Since we run tests against our staging environment before deploying to production, those references fail to load.

Describe the solution you'd like

In short, it'd be great if references to assets from inside of CSS files used relative URLs so that if they're loaded from a different origin CDN the referenced files are also loaded from the same origin CDN. For example, rather than:

background-image:url(https://example.cdn.com/foo/_next/static/media/edit.906cc02a.svg);

...generate:

background-image:url(../media/edit.906cc02a.svg);

...at least for CSS files that are also using assetPrefix.

Describe alternatives you've considered

The only alternatives to this seems to be:

1. Producing distinct builds per environment, each environment having a different set of generated assets. This doesn't work well with our existing workflows.
2. Referencing images from CSS using /public URLs instead; of course this means we lose the benefit of loading the file from CDN since the request would hit our application server.

[r34son]

@jpage-godaddy Did you find any solution?