Injecting dynamic variables to rewrite relative URLs

[atombender]

We have a somewhat esoteric case where we use styled-jsx inside a Cordova app (via a WKWebView. Cordova apps load their index page from a local file, so window.location points to some file URL like file:///Applications/....

While CSS loaded via link is fine, the file:// URL has the side effect that relative URLs used in styled-jsx code won't work:

<style jsx>{`
  .thing {
    background: url(/thing.png);
  }
`}</style>

We somehow have to change this to be an absolute URL:

<style jsx>{`
  .thing {
    background: url(${Config.assetBase}/thing.png);
  }
`}</style>

...where Config.assetBase is a per-environment configuration. We can't define this string as a SASS variable globally because it's dependent on the current page. (We create a single Docker image for all environments.)

The above would be fine if all our code used styled-jsx, but we also have a ton of shared .scss files we import that contain mixins and stuff that need to be augmented this way. We could define base for all the imports:

<style jsx>{`
  $base: ${Config.assetBase}`;
  @import "stuff";  // This now has access to $base
  .thing {
    background: url(${base}/thing.png);
  }
`}</style>

This works. This doesn't work because styled-jsx doesn't support string interpolation. Unfortunately, this means every styled-jsx component needs to define this variable.

Is there a way to inject SASS variables dynamically and not at transpilation time? We can't do it during Babel transpilation because it's already too late — the base URL is effectively per-request, not a compile-time setting. Or is there a way to post-process the generated CSS so we can change relative URLs to be absolute?

Any ideas?