feat: Include the sourceMappingURL & sourceURL when toString()

This feature is useful when you need to pass the result of css-loader to angular: call to require('to-string-loader!css-loader? sourceMap!sass-loader?sourceMap!./ test.scss') will include source mapping, And finally assigned to the component's styles metadata

Author: Zhicheng Wang

lib/css-base.js

@@ -1,50 +1,62 @@
 /*
-	MIT License http://www.opensource.org/licenses/mit-license.php
-	Author Tobias Koppers @sokra
-*/
+ MIT License http://www.opensource.org/licenses/mit-license.php
+ Author Tobias Koppers @sokra
+ */
 // css base code, injected by the css-loader
 module.exports = function() {
-	var list = [];
+    var list = [];
 
-	// return the list of modules as css string
-	list.toString = function toString() {
-		var result = [];
-		for(var i = 0; i < this.length; i++) {
-			var item = this[i];
-			if(item[2]) {
-				result.push("@media " + item[2] + "{" + item[1] + "}");
-			} else {
-				result.push(item[1]);
-			}
-		}
-		return result.join("");
-	};
+    // return the list of modules as css string
+    list.toString = function toString() {
+        return this.map(function(item){
+            const content = cssWithMappingToString(item);
+            if(item[2]) {
+                return "@media " + item[2] + "{" + content + "}";
+            } else {
+                return content;
+            }
+        }).join("");
+    };
 
-	// import a list of modules into the list
-	list.i = function(modules, mediaQuery) {
-		if(typeof modules === "string")
-			modules = [[null, modules, ""]];
-		var alreadyImportedModules = {};
-		for(var i = 0; i < this.length; i++) {
-			var id = this[i][0];
-			if(typeof id === "number")
-				alreadyImportedModules[id] = true;
-		}
-		for(i = 0; i < modules.length; i++) {
-			var 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" || !alreadyImportedModules[item[0]]) {
-				if(mediaQuery && !item[2]) {
-					item[2] = mediaQuery;
-				} else if(mediaQuery) {
-					item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
-				}
-				list.push(item);
-			}
-		}
-	};
-	return list;
+    // import a list of modules into the list
+    list.i = function(modules, mediaQuery) {
+        if(typeof modules === "string")
+            modules = [[null, modules, ""]];
+        var alreadyImportedModules = {};
+        for(var i = 0; i < this.length; i++) {
+            var id = this[i][0];
+            if(typeof id === "number")
+                alreadyImportedModules[id] = true;
+        }
+        for(i = 0; i < modules.length; i++) {
+            var 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" || !alreadyImportedModules[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) {
+    var content = item[1] || '';
+    var cssMapping = item[3];
+    if (!cssMapping) {
+        return content;
+    }
+    var convertSourceMap = require('convert-source-map');
+    var sourceMapping = convertSourceMap.fromObject(cssMapping).toComment({multiline: true});
+    var sourceURLs = cssMapping.sources.map(function (source) {
+        return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
+    });
+    return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
+}

package.json

@@ -6,9 +6,14 @@
   "engines": {
     "node": ">=0.12.0 || >=4.3.0 <5.0.0 || >=5.10"
   },
-  "files": ["index.js", "locals.js", "lib"],
+  "files": [
+    "index.js",
+    "locals.js",
+    "lib"
+  ],
   "dependencies": {
     "babel-code-frame": "^6.11.0",
+    "convert-source-map": "^1.3.0",
     "css-selector-tokenizer": "^0.7.0",
     "cssnano": ">=2.6.1 <4",
     "loader-utils": "~0.2.2",

test/cssBaseTest.js

@@ -34,4 +34,16 @@ describe("css-base", function() {
 			"@media print{body { d: 4; }}" +
 			"@media screen{body { a: 1; }}");
 	});
+    it("should toString with source mapping", function() {
+        var m = base();
+        m.push([1, "body { a: 1; }", "", {
+            file: "test.scss",
+            sources: [
+                './path/to/test.scss'
+            ],
+            mappings: "AAAA;",
+            sourceRoot: "webpack://"
+        }]);
+        m.toString().should.be.eql("body { a: 1; }\n/*# sourceURL=webpack://./path/to/test.scss */\n/*# sourceMappingURL=data:application/json;base64,eyJmaWxlIjoidGVzdC5zY3NzIiwic291cmNlcyI6WyIuL3BhdGgvdG8vdGVzdC5zY3NzIl0sIm1hcHBpbmdzIjoiQUFBQTsiLCJzb3VyY2VSb290Ijoid2VicGFjazovLyJ9 */");
+    });
 });