refactor: use runtime message api

.eslintrc.yml

@@ -9,7 +9,7 @@ rules:
   array-bracket-spacing: 'off'
   array-callback-return: error
   arrow-body-style: error
-  arrow-parens: error
+  arrow-parens: 'off'
   arrow-spacing: error
   block-scoped-var: 'off'
   block-spacing:
@@ -90,7 +90,7 @@ rules:
   no-bitwise: error
   no-caller: error
   no-catch-shadow: error
-  no-confusing-arrow: error
+  no-confusing-arrow: 'off'
   no-continue: error
   no-div-regex: error
   no-duplicate-imports: error
@@ -176,7 +176,7 @@ rules:
   no-useless-constructor: error
   no-useless-escape: error
   no-useless-rename: error
-  no-useless-return: error
+  no-useless-return: 'off'
   no-var: 'off'
   no-void: error
   no-warning-comments: error

lib/loader.js

@@ -2,10 +2,10 @@
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
 */
+
 const loaderUtils = require("loader-utils");
 const postcss = require("postcss");
 const plugin = require("./plugin");
-const getImportPrefix = require("./getImportPrefix");
 const SyntaxError = require("./SyntaxError");
 
 module.exports = function(content, map, meta) {
@@ -42,7 +42,9 @@ module.exports = function(content, map, meta) {
   const plugins = [
     plugin({
       url: options.url !== false,
-      import: options.import !== false
+      import: options.import !== false,
+      loaderContext: this,
+      importLoaders: options.importLoaders
     })
   ];
 
@@ -71,75 +73,8 @@ module.exports = function(content, map, meta) {
   postcss(plugins)
     .process(content, postcssOptions)
     .then(result => {
-      let cssAsString = JSON.stringify(result.css);
-      let imports = "";
-      let exports = "";
-      let urlEscapeHelperCode = "";
-
-      if (options.import !== false) {
-        const alreadyImported = {};
-        imports = result.messages
-          .filter(message => message.type === "at-rule-import")
-          .filter(message => {
-            if (!message.mediaQuery) {
-              if (alreadyImported[message.url]) {
-                return false;
-              }
-
-              alreadyImported[message.url] = true;
-            }
-
-            return true;
-          })
-          .map(message => {
-            if (!loaderUtils.isUrlRequest(message.url)) {
-              return (
-                "exports.push([module.id, " +
-                JSON.stringify("@import url(" + message.url + ");") +
-                ", " +
-                JSON.stringify(message.mediaQuery) +
-                "]);"
-              );
-            }
-
-            // for importing CSS
-            var importUrlPrefix = getImportPrefix(this, options);
-            var importUrl = importUrlPrefix + message.url;
-
-            return (
-              "exports.i(require(" +
-              loaderUtils.stringifyRequest(this, importUrl) +
-              "), " +
-              JSON.stringify(message.mediaQuery) +
-              ");"
-            );
-          })
-          .join("\n");
-      }
-
-      if (options.url !== false) {
-        urlEscapeHelperCode =
-          "var runtimeEscape = require(" +
-          loaderUtils.stringifyRequest(
-            this,
-            require.resolve("./runtimeEscape.js")
-          ) +
-          ");\n";
-
-        result.messages
-          .filter(message => message.type === "function-url")
-          .forEach(message => {
-            const { placeholder, url } = message;
-            const splittedURL = url.split(/(\?)?#/);
-            const importURLString =
-              '" + runtimeEscape(require(' +
-              loaderUtils.stringifyRequest(this, splittedURL[0]) +
-              ')) + "' +
-              (splittedURL[1] ? splittedURL[1] : "") +
-              (splittedURL[2] ? `#${splittedURL[2]}` : "");
-
-            cssAsString = cssAsString.replace(placeholder, importURLString);
-          });
+      if (meta && meta.messages) {
+        result.messages = result.messages.concat(meta.messages);
       }
 
       if (sourceMap && result.map) {
@@ -162,33 +97,54 @@ module.exports = function(content, map, meta) {
         map = JSON.stringify(map);
       }
 
-      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;
+      let newContent = {
+        imports: "",
+        runtime: `module.exports = exports = require(${loaderUtils.stringifyRequest(
+          this,
+          require.resolve("./runtime.js")
+        )})(${!!sourceMap});\n`,
+        module: `exports.push([module.id, ${JSON.stringify(result.css)}, ""${
+          map ? `,${map}` : ""
+        }]);\n`,
+        exports: ""
+      };
+
+      if (result.messages && result.messages.length > 0) {
+        newContent = result.messages
+          .filter(message => (message.type === "modify-runtime" ? message : false))
+          .reduce((initialValue, message) => {
+            try {
+              initialValue = message.modifyRuntimeCode(this, initialValue);
+            } catch (err) {
+              this.emitError(err);
+            }
+
+            return initialValue;
+          }, newContent);
+      }
+
+      const {imports, runtime, module, exports} = newContent;
 
       cb(
         null,
         [
-          urlEscapeHelperCode,
-          runtimeCode,
-          importsCode,
-          moduleCode,
-          exportsCode
+          imports ? `// CSS imports\n${imports}` : "",
+          runtime ? `// CSS runtime\n${runtime}` : "",
+          module ? `// CSS module\n${newContent.module}` : "",
+          exports ? `// CSS exports\n${newContent.exports}` : ""
         ].join("\n")
       );
+
+      return;
     })
     .catch(err => {
       if (err.file) {
         this.addDependency(err.file);
       }
 
       cb(err.name === "CssSyntaxError" ? new SyntaxError(err) : err);
+
+      return;
     });
 };

lib/plugin.js

@@ -4,9 +4,28 @@ const loaderUtils = require("loader-utils");
 
 const pluginName = "postcss-css-loader";
 
+function getImportPrefix(loaderContext, importLoaders) {
+  if (importLoaders === false) {
+    return "";
+  }
+
+  const importLoadersValue = parseInt(importLoaders, 10) || 0;
+  const loadersRequest = loaderContext.loaders
+    .slice(
+      loaderContext.loaderIndex,
+      loaderContext.loaderIndex + 1 + importLoadersValue
+    )
+    .map(x => x.request)
+    .join("!");
+
+  return "-!" + loadersRequest + "!";
+}
+
 module.exports = postcss.plugin(pluginName, function(options) {
   return function(css, result) {
     if (options.import) {
+      const alreadyImported = {};
+
       css.walkAtRules(/^import$/i, function(rule) {
         const parsedValue = valueParser(rule.params);
 
@@ -35,20 +54,43 @@ module.exports = postcss.plugin(pluginName, function(options) {
           return;
         }
 
+        const mediaQuery = valueParser
+          .stringify(parsedValue.nodes.slice(1))
+          .trim();
+
+        let runtimeCode = "";
+
         if (loaderUtils.isUrlRequest(url)) {
           url = loaderUtils.urlToRequest(url);
+
+          const importUrlPrefix = getImportPrefix(
+            options.loaderContext,
+            options.importLoaders
+          );
+
+          runtimeCode = `exports.i(require(${loaderUtils.stringifyRequest(
+            options.loaderContext,
+            importUrlPrefix + url
+          )}), ${JSON.stringify(mediaQuery)});\n`;
+        } else {
+          runtimeCode = `exports.push([module.id, ${JSON.stringify(
+            "@import url(" + url + ");"
+          )}, ${JSON.stringify(mediaQuery)}]);`;
         }
 
-        const mediaQuery = valueParser
-          .stringify(parsedValue.nodes.slice(1))
-          .trim();
+        if (!alreadyImported[url]) {
+          result.messages.push({
+            pluginName,
+            type: "modify-runtime",
+            modifyRuntimeCode: (loaderContext, content) => {
+              content.runtime = `${content.runtime}${runtimeCode}\n`;
+
+              return content;
+            }
+          });
 
-        result.messages.push({
-          pluginName,
-          type: "at-rule-import",
-          url: url,
-          mediaQuery: mediaQuery
-        });
+          alreadyImported[url] = true;
+        }
 
         rule.remove();
       });
@@ -75,37 +117,67 @@ module.exports = postcss.plugin(pluginName, function(options) {
             }
 
             const URLNode = node.nodes[0];
-            const URLValue = URLNode.value.trim().replace(/\\[\r\n]/g, "");
+            const URL = URLNode.value.trim().replace(/\\[\r\n]/g, "");
 
             // Skip empty URLs
             // Empty URL function equals request to current stylesheet where it is declared
-            if (URLValue.length === 0) {
+            if (URL.length === 0) {
               return;
             }
 
-            if (!loaderUtils.isUrlRequest(URLValue)) {
+            if (!loaderUtils.isUrlRequest(URL)) {
               return;
             }
 
             // Remove spaces before and after
             node.before = "";
             node.after = "";
 
-            const requestedURL = loaderUtils.urlToRequest(URLValue);
-            const placeholder = "___CSS_LOADER_IMPORT_URL_PLACEHOLDER___" + index + "___";
+            const splittedURL = URL.split(/(\?)?#/);
+            const normalizedURL = splittedURL[0];
+
+            const requestedURL = loaderUtils.urlToRequest(normalizedURL);
+            const placeholder =
+              "___CSS_LOADER_IMPORT_URL_PLACEHOLDER___" + index + "___";
 
             URLNode.value = placeholder;
             // Strip quotes, they will be re-added if the module needs them
             URLNode.quote = "";
 
+            let hasURLEscapeRuntimeCode = false;
+
             result.messages.push({
               pluginName,
-              type: "function-url",
-              placeholder: placeholder,
-              url: requestedURL
+              type: "modify-runtime",
+              modifyRuntimeCode: (loaderContext, content) => {
+                if (!hasURLEscapeRuntimeCode) {
+                  content.imports = `var runtimeEscape = require(${loaderUtils.stringifyRequest(
+                    loaderContext,
+                    require.resolve("./runtimeEscape.js")
+                  )});\n${content.imports}`;
+
+                  hasURLEscapeRuntimeCode = true;
+                }
+
+                content.imports = `${
+                  content.imports
+                }var ${placeholder} = require(${loaderUtils.stringifyRequest(
+                  loaderContext,
+                  requestedURL
+                )});\n`;
+
+                content.module = content.module.replace(
+                  placeholder,
+                  `" + runtimeEscape(${placeholder}) + "${
+                    splittedURL[1] ? splittedURL[1] : ""
+                  }${splittedURL[2] ? `#${splittedURL[2]}` : ""}`
+                );
+
+                return content;
+              }
             });
 
-            index++;
+            index += 1;
 
             return false;
           })