Chrome & Firefox browser extensions CSS image urls in content scripts

Question

how can I manage the background image URLs for both Chrome and Firefox browser extension content script in a single CSS file please?

Firefox uses regular relative URL as:

background-image: url('/images/my-photo.jpg');

Chrome uses messages extension ID URL as:

background-image: url('chrome-extension://__MSG_@@extension_id__/images/my-photo.jpg');

This cause development inconvenience as I need to create different CSS files for each browser.

For now I use SASS/SCSS variables as:

$imagePath: '/images/';
$imagePath: 'chrome-extension://__MSG_@@extension_id__/images/';

background-image: url('#{$imagePath}my-photo.jpg');

And then I duplicate the file, remove one variable and compile the file.

But it isn't that comfortable to work with different files, is there any idea how to work on a single CSS file and make it works for both browsers please?

I'm not interested in using base64 urls.

I was thinking maybe using CSS native variables together with a media query that will overwrite the variable to a specific browser, but I'm not sure how.

For example something like that:

:root {
    --imagePath: '/images/';
}

@media chrome(){
    --imagePath: 'chrome-extension://__MSG_@@extension_id__/images/';
}

--imageURL: var(--imagePath)+'my-photo.jpg';
background-image: url(var(--imageURL));