fix: imported variables are replaced in exports if followed by a comma (#504)

Author: evilebottnawi

lib/processCss.js

@@ -13,6 +13,7 @@ var localByDefault = require("postcss-modules-local-by-default");
 var extractImports = require("postcss-modules-extract-imports");
 var modulesScope = require("postcss-modules-scope");
 var modulesValues = require("postcss-modules-values");
+var valueParser = require('postcss-value-parser');
 
 var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 	return function(css) {
@@ -23,15 +24,18 @@ var parserPlugin = postcss.plugin("css-loader-parser", function(options) {
 
 		function replaceImportsInString(str) {
 			if(options.import) {
-				var tokens = str.split(/(\S+)/);
-				tokens = tokens.map(function (token) {
+				var tokens = valueParser(str);
+				tokens.walk(function (node) {
+					if (node.type !== 'word') {
+						return;
+					}
+					var token = node.value;
 					var importIndex = imports["$" + token];
 					if(typeof importIndex === "number") {
-						return "___CSS_LOADER_IMPORT___" + importIndex + "___";
+						node.value = "___CSS_LOADER_IMPORT___" + importIndex + "___";
 					}
-					return token;
-				});
-				return tokens.join("");
+				})
+				return tokens.toString();
 			}
 			return str;
 		}

package.json

@@ -23,6 +23,7 @@
     "postcss-modules-local-by-default": "^1.0.1",
     "postcss-modules-scope": "^1.0.0",
     "postcss-modules-values": "^1.1.0",
+    "postcss-value-parser": "^3.3.0",
     "source-list-map": "^0.1.7"
   },
   "devDependencies": {

test/valuesTest.js

@@ -66,4 +66,55 @@ describe("values", function() {
 			})()
 		}
 	);
+	testLocal("should import values contain comma",
+		"@value color from './file1'; @value shadow: 0 0 color,0 0 color; .ghi { box-shadow: shadow; }", [
+			[ 2, "", "" ],
+			[ 1, ".ghi { box-shadow: 0 0 red,0 0 red; }", "" ]
+		], {
+			color: "red",
+			shadow: "0 0 red,0 0 red"
+		}, "", {
+			"./file1": (function() {
+				var a =  [[2, "", ""]];
+				a.locals = {
+					color: "red",
+				};
+				return a;
+			})()
+		}
+	);
+	testLocal("should import values contain comma and space before comma",
+		"@value color from './file1'; @value shadow: 0 0 color ,0 0 color; .ghi { box-shadow: shadow; }", [
+			[ 2, "", "" ],
+			[ 1, ".ghi { box-shadow: 0 0 red ,0 0 red; }", "" ]
+		], {
+			color: "red",
+			shadow: "0 0 red ,0 0 red"
+		}, "", {
+			"./file1": (function() {
+				var a =  [[2, "", ""]];
+				a.locals = {
+					color: "red",
+				};
+				return a;
+			})()
+		}
+	);
+	testLocal("should import values contain tralling comma and space after comma",
+		"@value color from './file1'; @value shadow: 0 0 color, 0 0 color; .ghi { box-shadow: shadow; }", [
+			[ 2, "", "" ],
+			[ 1, ".ghi { box-shadow: 0 0 red, 0 0 red; }", "" ]
+		], {
+			color: "red",
+			shadow: "0 0 red, 0 0 red"
+		}, "", {
+			"./file1": (function() {
+				var a =  [[2, "", ""]];
+				a.locals = {
+					color: "red",
+				};
+				return a;
+			})()
+		}
+	);
 });