fix: support usage with file-loader

This commit adds a plugin to replace relative paths inside url(..) expressions to be relative to the output file so that they can be resolved properly with css-loader.

It also changes the output folder to be 'node_modules/.linaria-cache' like before.

Inspired by #195
Fixes #182

Author: satya164

package.json

@@ -58,7 +58,6 @@
     "flow-copy-source": "^2.0.2",
     "jest": "^23.5.0",
     "jest-image-snapshot": "^2.5.0",
-    "parcel-bundler": "^1.9.7",
     "prettier": "^1.14.2",
     "puppeteer": "^1.8.0",
     "react": "^16.5.1",
@@ -71,6 +70,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/register": "^7.0.0",
     "loader-utils": "^1.1.0",
+    "mkdirp": "^0.5.1",
     "postcss": "^7.0.2",
     "react-is": "^16.5.1",
     "source-map": "^0.7.3",

src/__tests__/module.test.js

@@ -106,9 +106,7 @@ it('clears modules from the cache', () => {
 it('exports the path for non JS/JSON files', () => {
   const mod = new Module(path.resolve(__dirname, '../__fixtures__/test.js'));
 
-  expect(mod.require('./sample-asset.png')).toBe(
-    path.resolve(__dirname, '../__fixtures__/sample-asset.png')
-  );
+  expect(mod.require('./sample-asset.png')).toBe('./sample-asset.png');
 });
 
 it('throws when requiring native node modules', () => {

src/babel/module.js

@@ -98,9 +98,10 @@ class Module {
           m.evaluate(code);
         }
       } else {
-        // For non JS/JSON requires, just export the filename
+        // For non JS/JSON requires, just export the id
         // This is to support importing assets in webpack
-        m.exports = filename;
+        // The module will be resolved by css-loader
+        m.exports = id;
       }
     }
 

src/loader.js

@@ -1,27 +1,38 @@
-const os = require('os');
 const fs = require('fs');
 const path = require('path');
+const mkdirp = require('mkdirp');
 const Module = require('module');
 const loaderUtils = require('loader-utils');
 const transform = require('./transform');
-const slugify = require('./slugify');
 
-module.exports = function loader(
-  content /* :string */,
-  inputSourceMap /* :?Object */
-) {
+module.exports = function loader(content, inputSourceMap) {
   const { sourceMap, ...rest } = loaderUtils.getOptions(this) || {};
 
-  const result = transform(this.resourcePath, content, rest, inputSourceMap);
+  const outputDirectory = path.join(
+    process.cwd(),
+    'node_modules',
+    '.linaria-cache'
+  );
+
+  const outputFilename = path.join(
+    outputDirectory,
+    path.relative(
+      process.cwd(),
+      this.resourcePath.replace(/\.[^.]+$/, '.linaria.css')
+    )
+  );
+
+  const result = transform(
+    this.resourcePath,
+    content,
+    rest,
+    inputSourceMap,
+    outputFilename
+  );
 
   if (result.cssText) {
     let { cssText } = result;
 
-    const slug = slugify(this.resourcePath);
-    const filename = `${path
-      .basename(this.resourcePath)
-      .replace(/\.js$/, '')}_${slug}.css`;
-
     if (sourceMap) {
       cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(
         result.cssSourceMapText
@@ -44,13 +55,25 @@ module.exports = function loader(
       });
     }
 
-    const output = path.join(os.tmpdir(), filename.split(path.sep).join('_'));
+    // Read the file first to compare the content
+    // Write the new content only if it's changed
+    // This will prevent unnecessary WDS reloads
+    let currentCssText;
 
-    fs.writeFileSync(output, cssText);
+    try {
+      currentCssText = fs.readFileSync(outputFilename, 'utf-8');
+    } catch (e) {
+      // Ignore error
+    }
+
+    if (currentCssText !== cssText) {
+      mkdirp.sync(path.dirname(outputFilename));
+      fs.writeFileSync(outputFilename, cssText);
+    }
 
     this.callback(
       null,
-      `${result.code}\n\nrequire("${output}")`,
+      `${result.code}\n\nrequire("${outputFilename}")`,
       result.sourceMap
     );
     return;

src/transform.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+const path = require('path');
 const babel = require('@babel/core');
 const stylis = require('stylis');
 const { SourceMapGenerator } = require('source-map');
@@ -16,7 +17,7 @@ type Result = {
   code: string,
   sourceMap: ?Object,
   cssText?: string,
-  cssSourceMapText?: ?string,
+  cssSourceMapText?: string,
   dependencies?: string[],
   rules?: {
     [className: string]: {
@@ -39,11 +40,14 @@ type PluginOptions = {
 }
 */
 
+const STYLIS_DECLARATION = 1;
+
 module.exports = function transform(
   filename /* :string */,
   content /* :string */,
   options /* :PluginOptions */,
-  inputSourceMap /* :?Object */
+  inputSourceMap /* :?Object */,
+  outputFilename /* : ?string */
 ) /* : Result */ {
   // Check if the file contains `css` or `styled` tag first
   // Otherwise we should skip transforming
@@ -105,6 +109,28 @@ module.exports = function transform(
 
   let cssText = '';
 
+  stylis.use(null)((context, decl) => {
+    if (context === STYLIS_DECLARATION && outputFilename) {
+      // When writing to a file, we need to adjust the relative paths inside url(..) expressions
+      // It'll allow css-loader to resolve an imported asset properly
+      return decl.replace(
+        /\b(url\()(\.[^)]+)(\))/,
+        (match, p1, p2, p3) =>
+          p1 +
+          // Replace asset path with new path relative to the output CSS
+          path.relative(
+            /* $FlowFixMe */
+            path.dirname(outputFilename),
+            // Get the absolute path to the asset from the path relative to the JS file
+            path.resolve(path.dirname(filename), p2)
+          ) +
+          p3
+      );
+    }
+
+    return decl;
+  });
+
   Object.keys(rules).forEach((selector, index) => {
     mappings.push({
       generated: {