heroku-js-runtime-env

heroku-js-runtime-env copied to clipboard

Hello, consider the following situation:

We are using the wonderful heroku-js-runtime-env buildpack to dynamically interpolate the PUBLIC_URL variable into the build, depending on the environment (it changes between staging and production, for obvious reasons).

Now, in one of the CSS files, we have something similar to this:

background: url('./image.svg');

The build process will take image.svg in the same folder as the .scss file, append a cache-busting hash to its filename, and copy it into the compiled bundle. It will then replace './image.svg' with the final path from the compiled bundle (in something like $PUBLIC_URL/static/media/image.abcd1234.svg).

Here's the problem: the final path from the compiled bundle interpolates PUBLIC_URL. Which in our case is a label, {{DYNAMIC_PUBLIC_URL}}.

As a result, after the build process, what we get in the css file is the literal string {{DYNAMIC_PUBLIC_URL}}/static/media/image.abcd1234.svg.

At a later date, when we deploy our application, the heroku-js-runtime-env intervenes and substitutes all instances of the temporary label {{DYNAMIC_PUBLIC_URL}} with the final, appropriate public URL. There's only one problem: it only processes the *.js files.

As a result, the URL in the css/scss file is invalid.

Possible workaround (⛔ it does not work at this time)

We tried to change the JS_RUNTIME_TARGET_BUNDLE so that it would also process the css, file, this way:

/app/build/static/{css,js}/*.{css,js}

...but unfortunately it doesn't look like this naive attempt at using bash expansion is working.

Is there a way to also perform the interpolation on .css files?

Thanks a lot in advance!