Properly resolve url(...) in style strings

[satya164]

What's broken

Say you have the following file structure:

├── .linaria-cache
├── src
│   ├── components
│   │   └── App.js
│   └── assets
│       └── bat.png
└── .babelrc

Now you write following in App.js:

const logo = css`
  background: url(../assets/bat.png);
`;

This won't work, because the generated CSS file will be at .linaria-cache/src/components/App.css, and when resolving ../assets/bat.png, webpack will look relative to the the generated file.

How to fix

We can write a stylis plugin which replaces relative paths in url with the correct path relative to the generated file.

[zamotany]

I think we can calculate the correct path without stylis

[satya164]

@zamotany how? the url statements will be resolved by webpack and style-loader. we don't have any control over how it's resolved.

[zamotany]

But with this:

const logo = css`
  background: url(${require(../assets/bat.png)});
`;

we can calculate the correct path.

Tho you're right, the solution with stylis will work for both cases

[morajabi]

It's interesting! Do you want me to give this a hand? 🙌