Linaria: url() params break when wrapping in strings.

[ivancuric]

Environment

"linaria": "^1.3.1",
"webpack": "^4.29.6",

Description

Using src: url('../../../assets/Roboto-Medium.ttf'); causes the following error:

ERROR in ./.linaria-cache/src/ui/styles/fonts.linaria.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../../../assets/Roboto-Medium.ttf' in 'C:\Users\ivan\Desktop\myProject\.linaria-cache\src\ui\styles'

Removing the quotes, eg using src: url(../../../assets/Roboto-Medium.ttf); fixes the issue.

Reproducible Demo

The whole snippet:

import { css } from 'linaria';

export const fonts = css`
  :global() {
    @font-face {
      font-family: 'Roboto';
      font-display: block;
      src: url(../../../assets/Roboto-Medium.ttf);
      font-weight: 700;
    }

    @font-face {
      font-family: 'Roboto';
      font-display: block;
      src: url(../../../assets/Roboto-Medium.ttf);
      font-weight: 500;
    }

    @font-face {
      font-family: 'Roboto';
      font-display: block;
      src: url(../../../assets/Roboto-Regular.ttf);
      font-weight: 400;
    }

    @font-face {
      font-family: 'RobotoMono';
      font-display: block;
      src: url(../../../assets/RobotoMono-Regular.ttf);
      font-weight: 400;
    }
  }
`;

[satya164]

It's intentional. We process the URL inside the url(...) expression, but leave it alone if you wrapped it in quotes to give you an escape hatch when you don't want linaria to touch it. We should document it though.

[ivancuric]

So what would be the best way to approach this issue?
Also, why can't the URL be resolved?

[satya164]

It's just undocumented behavior that we don't transform the quoted string. There's nothing preventing us from doing it, but I left it that way to provide an escape hatch in case you don't want linaria to resolve it.

But maybe we should resolve it regardless because css-loader will try to resolve it anyway even if linaria doesn't. We just need to change the regex here https://github.com/callstack/linaria/blob/master/src/transform.js#L114 to account for quotes

[ivancuric]

All I know is that either webpack or the browser is complaining when resolving the url().

Might be an issue with the css-loader or mini-css-extract-plugin. :\

[satya164]

Even if you remove the quotes?
Sorry I'm not understanding.

[ivancuric]

It works without quotes. However, I'd like to have it work _with_ quotes, or even by using the import syntax for the url-loader and then interpolating it in css, like background-image: url(`${image}`);

It seems it isn't an issue with linaria but somewhere along the line in css-loader<>mini-css-extract-plugin <> url-loader.

Also, when using linaria, I get errors if I pass the correct relative path to the resource, due to it being in the .linaria-cache folder:

ERROR in ./.linaria-cache/src/ui/styles/fonts.linaria.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../../../assets/Roboto-Medium.ttf'

I need to add an additional ../ to go back to the project root.

[satya164]

@ivancuric so the string in the image variable has quotes in it? we can handle quotes in linaria, no big deal.

the following should work right now:

const image = '../../image.png';

const hero = css`
  background-image: url(${image});
`;

or

const hero = css`
  background-image: url(${require('../../image.png')});
`;

[ivancuric]

Here's the thing:
My folder structure is the following:

/src/ui/styles/fonts.js
/assets/Roboto-Medium.ttf

Using either of these doesn't work:

export const fonts = css`
    @font-face {
      font-family: 'Roboto';
      src: url("../../../assets/Roboto-Medium.ttf");
      font-weight: 700;
    }
    @font-face {
      font-family: 'Roboto';
      src: url(${require("../../../assets/Roboto-Medium.ttf")});
      font-weight: 700;
    }
`

It produces the error:

ERROR in ./.linaria-cache/src/ui/styles/fonts.linaria.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../../../assets/Roboto-Medium.ttf' in 'C:\Users\ivan\Desktop\my-app\.linaria-cache\src\ui\styles'

What does work:

export const fonts = css`
    @font-face {
      font-family: 'Roboto';
      src: url("../../../../assets/Roboto-Medium.ttf"); // extra "..//"
      font-weight: 700;
    }
    @font-face {
      font-family: 'Roboto';
      src: url(../../../assets/Roboto-Medium.ttf); // no quotes
      font-weight: 700;
    }
`

However that either points to the wrong path to combat the extra /.linaria-cache/ level, or is offloading to linaria to process the url in the second example.

[satya164]

Thanks! The second one was supposed to work, but seems it's broken. Will fix it.

[ivancuric]

Also, using src: url("../../../assets/Roboto-Medium.ttf"); in scss files works fine.
So does import font from '../../../assets/Roboto-Medium.ttf'; in JS.

Meaning that the issue is in how linaria handles the paths afterwards.

The second one was supposed to work

IMO the first one — src: url("../../../assets/Roboto-Medium.ttf"); should work as well.

[Anber]

Fixed. Will be released in the next 1.4 beta.