refactor: runtime code

Author: alexander-akait

.eslintrc.yml

@@ -41,7 +41,7 @@ rules:
   consistent-this: error
   curly: 'off'
   default-case: 'off'
-  dot-location: error
+  dot-location: 'off'
   dot-notation:
     - error
     - allowKeywords: true

lib/css-base.js

@@ -126,7 +126,7 @@ module.exports = function(content, map) {
 		// embed runtime
 		callback(null, urlEscapeHelper +
 			"exports = module.exports = require(" +
-			loaderUtils.stringifyRequest(this, require.resolve("./css-base.js")) +
+			loaderUtils.stringifyRequest(this, require.resolve("./runtime.js")) +
 			")(" + sourceMap + ");\n" +
 			"// imports\n" +
 			importJs + "\n\n" +

lib/loader.js

@@ -0,0 +1,91 @@
+/*
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
+*/
+// CSS (Loader) Runtime
+module.exports = function(useSourceMap) {
+  const list = [];
+
+  // return the list of modules as css string
+  list.toString = function toString() {
+    return this.map(function(item) {
+      const content = cssWithMappingToString(item, useSourceMap);
+
+      if (item[2]) {
+        return "@media " + item[2] + "{" + content + "}";
+      }
+
+      return content;
+    }).join("");
+  };
+
+  // import a list of modules into the list
+  list.i = function(modules, mediaQuery) {
+    if (typeof modules === "string") {
+      modules = [[null, modules, ""]];
+    }
+
+    const isImported = {};
+
+    for (let i = 0; i < this.length; i++) {
+      const id = this[i][0];
+
+      if (typeof id === "number") {
+        isImported[id] = true;
+      }
+    }
+
+    for (let i = 0; i < modules.length; i++) {
+      const item = modules[i];
+
+      // skip already imported module
+      // this implementation is not 100% perfect for weird media query combinations
+      //  when a module is imported multiple times with different media queries.
+      //  I hope this will never occur (Hey this way we have smaller bundles)
+      if (typeof item[0] !== "number" || !isImported[item[0]]) {
+        if (mediaQuery && !item[2]) {
+          item[2] = mediaQuery;
+        } else if (mediaQuery) {
+          item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
+        }
+
+        list.push(item);
+      }
+    }
+  };
+
+  return list;
+};
+
+function cssWithMappingToString(item, useSourceMap) {
+  const content = item[1] || "";
+  const sourceMap = item[3];
+
+  if (!sourceMap) {
+    return content;
+  }
+
+  if (useSourceMap && typeof btoa === "function") {
+    const sourceMapping = toComment(sourceMap);
+    const sourceURLs = sourceMap.sources.map(function(source) {
+      return "/*# sourceURL=" + sourceMap.sourceRoot + source + " */";
+    });
+
+    return [content]
+      .concat(sourceURLs)
+      .concat([sourceMapping])
+      .join("\n");
+  }
+
+  return [content].join("\n");
+}
+
+// Adapted from convert-source-map (MIT)
+function toComment(sourceMap) {
+  // eslint-disable-next-line no-undef
+  const base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
+  const data =
+    "sourceMappingURL=data:application/json;charset=utf-8;base64," + base64;
+
+  return "/*# " + data + " */";
+}

lib/runtime.js

@@ -1,8 +1,8 @@
 /*eslint-env mocha*/
 
-var base = require("../lib/css-base");
+var runtime = require("../lib/runtime");
 
-describe("css-base", function() {
+describe("runtime", function() {
 	before(function() {
 		global.btoa = function btoa(str) {
 			var buffer = null;
@@ -22,23 +22,23 @@ describe("css-base", function() {
 	})
 
 	it("should toString a single module", function() {
-		var m = base();
+		var m = runtime();
 		m.push([1, "body { a: 1; }", ""]);
 		m.toString().should.be.eql("body { a: 1; }");
 	});
 	it("should toString multiple modules", function() {
-		var m = base();
+		var m = runtime();
 		m.push([2, "body { b: 2; }", ""]);
 		m.push([1, "body { a: 1; }", ""]);
 		m.toString().should.be.eql("body { b: 2; }body { a: 1; }");
 	});
 	it("should toString with media query", function() {
-		var m = base();
+		var m = runtime();
 		m.push([1, "body { a: 1; }", "screen"]);
 		m.toString().should.be.eql("@media screen{body { a: 1; }}");
 	});
 	it("should import modules", function() {
-		var m = base();
+		var m = runtime();
 		var m1 = [1, "body { a: 1; }", "screen"];
 		var m2 = [2, "body { b: 2; }", ""];
 		var m3 = [3, "body { c: 3; }", ""];
@@ -53,7 +53,7 @@ describe("css-base", function() {
 			"@media screen{body { a: 1; }}");
 	});
 	it("should toString with source mapping", function() {
-		var m = base(true);
+		var m = runtime(true);
 		m.push([1, "body { a: 1; }", "", {
 			file: "test.scss",
 			sources: [
@@ -66,7 +66,7 @@ describe("css-base", function() {
 	});
 	it("should toString without source mapping if btoa not avalibale", function() {
 		global.btoa = null;
-		var m = base(true);
+		var m = runtime(true);
 		m.push([1, "body { a: 1; }", "", {
 			file: "test.scss",
 			sources: [

test/cssBaseTest.js

@@ -9,8 +9,8 @@ function getEvaluated(output, modules) {
 		var fn = vm.runInThisContext("(function(module, exports, require) {" + output + "})", "testcase.js");
 		var m = { exports: {}, id: 1 };
 		fn(m, m.exports, function(module) {
-			if(module.indexOf("css-base") >= 0)
-				return require("../lib/css-base");
+			if(module.indexOf("runtime") >= 0)
+				return require("../lib/runtime");
 			if(module.indexOf("url/escape") >= 0)
 				return require("../lib/url/escape");
 			if(module.indexOf("-!/path/css-loader!") === 0)