refactor: loader

Author: alexander-akait

lib/loader.js

@@ -8,13 +8,13 @@ const plugin = require("./plugin");
 const getImportPrefix = require("./getImportPrefix");
 const SyntaxError = require("./SyntaxError");
 
-module.exports = function(content, map) {
+module.exports = function(content, map, meta) {
   const options = loaderUtils.getOptions(this) || {};
 
   // Todo validate options
 
   const cb = this.async();
-  const sourceMap = options.sourceMap;
+  const sourceMap = options.sourceMap || false;
 
   if (sourceMap && map) {
     if (typeof map === "string") {
@@ -30,85 +30,95 @@ module.exports = function(content, map) {
     map = null;
   }
 
-  // We need a prefix to avoid path rewriting of PostCSS
-  const from =
-    "/css-loader!" +
-    loaderUtils
-      .getRemainingRequest(this)
-      .split("!")
-      .pop();
-  const to = loaderUtils
-    .getCurrentRequest(this)
-    .split("!")
-    .pop();
+  // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
+  if (meta) {
+    const { ast } = meta;
+
+    if (ast && ast.type === "postcss") {
+      content = ast.root;
+    }
+  }
 
-  postcss([
+  const plugins = [
     plugin({
       url: options.url !== false,
       import: options.import !== false
     })
-  ])
-    .process(content, {
-      from,
-      to,
-      map: sourceMap
-        ? {
-            prev: map,
-            sourcesContent: true,
-            inline: false,
-            annotation: false
-          }
-        : null
-    })
+  ];
+
+  const postcssOptions = {
+    // We need a prefix to avoid path rewriting of PostCSS
+    from:
+      "/css-loader!" +
+      loaderUtils
+        .getRemainingRequest(this)
+        .split("!")
+        .pop(),
+    to: loaderUtils
+      .getCurrentRequest(this)
+      .split("!")
+      .pop(),
+    map: sourceMap
+      ? {
+          prev: map,
+          sourcesContent: true,
+          inline: false,
+          annotation: false
+        }
+      : null
+  };
+
+  postcss(plugins)
+    .process(content, postcssOptions)
     .then(result => {
-      var cssAsString = JSON.stringify(result.css);
+      let cssAsString = JSON.stringify(result.css);
+      let imports = "";
+      let exports = "";
+      let urlEscapeHelperCode = "";
 
       if (options.import !== false) {
-        var alreadyImported = {};
-        var importJs = result.messages
+        const alreadyImported = {};
+        imports = result.messages
           .filter(message => message.type === "at-rule-import")
-          .filter(imp => {
-            if (!imp.mediaQuery) {
-              if (alreadyImported[imp.url]) {
+          .filter(message => {
+            if (!message.mediaQuery) {
+              if (alreadyImported[message.url]) {
                 return false;
               }
 
-              alreadyImported[imp.url] = true;
+              alreadyImported[message.url] = true;
             }
 
             return true;
           })
-          .map(imp => {
-            if (!loaderUtils.isUrlRequest(imp.url)) {
+          .map(message => {
+            if (!loaderUtils.isUrlRequest(message.url)) {
               return (
                 "exports.push([module.id, " +
-                JSON.stringify("@import url(" + imp.url + ");") +
+                JSON.stringify("@import url(" + message.url + ");") +
                 ", " +
-                JSON.stringify(imp.mediaQuery) +
+                JSON.stringify(message.mediaQuery) +
                 "]);"
               );
             }
 
             // for importing CSS
             var importUrlPrefix = getImportPrefix(this, options);
-            var importUrl = importUrlPrefix + imp.url;
+            var importUrl = importUrlPrefix + message.url;
 
             return (
               "exports.i(require(" +
               loaderUtils.stringifyRequest(this, importUrl) +
               "), " +
-              JSON.stringify(imp.mediaQuery) +
+              JSON.stringify(message.mediaQuery) +
               ");"
             );
           })
           .join("\n");
       }
 
-      // Helper for ensuring valid CSS strings from requires
-      let urlEscapeHelper = "";
-
       if (options.url !== false) {
-        urlEscapeHelper =
+        urlEscapeHelperCode =
           "var runtimeEscape = require(" +
           loaderUtils.stringifyRequest(
             this,
@@ -117,7 +127,7 @@ module.exports = function(content, map) {
           ");\n";
 
         result.messages
-          .filter(message => message.type === "css-loader-import-url")
+          .filter(message => message.type === "function-url")
           .forEach(message => {
             const { placeholder, url } = message;
             const splittedURL = url.split(/(\?)?#/);
@@ -132,15 +142,6 @@ module.exports = function(content, map) {
           });
       }
 
-      // Todo need save backward compatibility with old `style-loader`
-      var exportJs = "";
-
-      if (exportJs) {
-        exportJs = "exports.locals = " + exportJs + ";";
-      }
-
-      var moduleJs;
-
       if (sourceMap && result.map) {
         map = result.map.toJSON();
 
@@ -159,34 +160,34 @@ module.exports = function(content, map) {
           .pop()
           .replace(/\\/g, "/");
         map = JSON.stringify(map);
-
-        moduleJs =
-          "exports.push([module.id, " + cssAsString + ', "", ' + map + "]);";
-      } else {
-        moduleJs = "exports.push([module.id, " + cssAsString + ', ""]);';
       }
 
-      // embed runtime
+      const runtimeCode = `module.exports = exports = require(${loaderUtils.stringifyRequest(
+        this,
+        require.resolve("./runtime.js")
+      )})(${!!sourceMap});\n`;
+      const moduleCode = `// CSS Module\nexports.push([module.id, ${cssAsString}, ""${
+        map ? `,${map}` : ""
+      }]);\n`;
+      const importsCode = imports ? `// CSS Imports\n${imports}\n` : "";
+      // Todo need save backward compatibility with old `style-loader` and exports.locals
+      const exportsCode = exports ? `// CSS Exports\n${exports}\n` : false;
+
       cb(
         null,
-        urlEscapeHelper +
-          "exports = module.exports = require(" +
-          loaderUtils.stringifyRequest(this, require.resolve("./runtime.js")) +
-          ")(" +
-          sourceMap +
-          ");\n" +
-          "// imports\n" +
-          importJs +
-          "\n\n" +
-          "// module\n" +
-          moduleJs +
-          "\n\n" +
-          "// exports\n" +
-          exportJs
+        [
+          urlEscapeHelperCode,
+          runtimeCode,
+          importsCode,
+          moduleCode,
+          exportsCode
+        ].join("\n")
       );
     })
     .catch(err => {
-      // Todo if (err.file) this.addDependency(err.file)
+      if (err.file) {
+        this.addDependency(err.file);
+      }
 
       cb(err.name === "CssSyntaxError" ? new SyntaxError(err) : err);
     });

lib/plugin.js

@@ -100,7 +100,7 @@ module.exports = postcss.plugin(pluginName, function(options) {
 
             result.messages.push({
               pluginName,
-              type: "css-loader-import-url",
+              type: "function-url",
               placeholder: placeholder,
               url: requestedURL
             });

test/helpers.js

@@ -56,6 +56,9 @@ function runLoader(loader, input, map, addOptions, callback) {
     request: "css-loader!test.css",
     emitError: function(message) {
       throw new Error(message);
+    },
+    addDependency: function (dep) {
+      // Nothing
     }
   };
   Object.keys(addOptions).forEach(function(key) {