linaria: 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.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 24 (17 by maintainers)

Most upvoted comments

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 on Nov 2, 2017