Not compatible with Webpack file and url loaders?

Do you want to request a feature or report a bug? Bug.

What is the current behavior? Webpack’s file-loader or url-loader (they come standard with create-react-app) let you require() (or import) any file type (like images and fonts). At build time, the require statement gets replaced with a URL that you can use to load the file at runtime. Unfortunately Linaria seems to break any time I reference anything that gets loaded this way. It appears to attempt to load the file as if it were a JS module. E.g. both of these fail:

css`background-image: url(`require('image.svg')`);`
css`@font-face { font-family: Test; src: url(${require('webfont.woff')})}`;

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test. Quick create-react-app that attempts to load an SVG and a web font on the home page: https://github.com/steadicat/linaria-test

What is the expected behavior? Expected behavior is for Linaria to let the loader run first so that those requires become plains strings to be included in the CSS.

Please provide your exact Babel configuration and mention your Linaria, Node, Yarn/npm version and operating system. See app above.

[steadicat]

I think I just stumbled upon the answer to the “why it doesn’t work” question. Here’s what the raw JS looks like after url-loader does its thing:

/***/ "./src/logo.svg":
/*!**********************!*\
  !*** ./src/logo.svg ***!
  \**********************/
/*! no static exports found */
/*! all exports used */
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__.p + "static/media/logo.5d5d9eef.svg";

/***/ }),

/* [...SNIP...] */

var logo = __webpack_require__(/*! ./logo.svg */ "./src/logo.svg");

It appears that url-loader does not replace the require statement with a string, it actually creates a dummy module that exports a string. I don’t see how Linaria can work around that. 😞

[steadicat]

The solution of using plain CSS url() works for me. There are two actionable things:

1. Document this more clearly. I saw a mention of this at the bottom of this file. Would be great if this was in the README.
2. Fix the paths. Currently url()s referenced inside Linaria CSS are relative to the location of the Linaria generated CSS, which is awkward. It would be great if the paths got rewritten to be relative to the current file.