diff --git a/lib/processCss.js b/lib/processCss.js index 7a7edb1d..6a3ac1d2 100644 --- a/lib/processCss.js +++ b/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; } diff --git a/package.json b/package.json index 47974860..13ab19c9 100644 --- a/package.json +++ b/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": { diff --git a/test/valuesTest.js b/test/valuesTest.js index 57858407..5b77aa54 100644 --- a/test/valuesTest.js +++ b/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; + })() + } + ); });