fix: imported variables are replaced in exports if followed by a comma (webpack#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;
+})()
+}
+);
 });