Do not replace url() function content, closes #22

Author: princed

index.js

@@ -2,7 +2,7 @@ const postcss = require('postcss');
 const path = require('path');
 const promisify = require('es6-promisify');
 const { CachedInputFileSystem, NodeJsInputFileSystem, ResolverFactory } = require('enhanced-resolve');
-const { replaceValueSymbols } = require('icss-utils');
+const valueParser = require('postcss-value-parser');
 
 const matchImports = /^(.+?|\([\s\S]+?\))\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/;
 const matchValueDefinition = /(?:\s+|^)([\w-]+)(:?\s+)(.+?)(\s*)$/g;
@@ -16,6 +16,23 @@ const INNER_PLUGIN = 'postcss-modules-values-replace-bind';
 const nodeFs = new CachedInputFileSystem(new NodeJsInputFileSystem(), 4000);
 const concordContext = {};
 
+const replaceValueSymbols = (valueString, replacements) => {
+  const value = valueParser(valueString);
+
+  value.walk((node) => {
+    if (node.type !== 'word') return;
+
+    const replacement = replacements[node.value];
+
+    if (replacement != null) {
+      // eslint-disable-next-line no-param-reassign
+      node.value = replacement;
+    }
+  });
+
+  return value.toString();
+};
+
 const getDefinition = (atRule, existingDefinitions, requiredDefinitions) => {
   let matches;
   const definition = {};

package.json

@@ -21,8 +21,8 @@
   "dependencies": {
     "enhanced-resolve": "^3.1.0",
     "es6-promisify": "^5.0.0",
-    "icss-utils": "^3.0.1",
-    "postcss": "^6.0.1"
+    "postcss": "^6.0.1",
+    "postcss-value-parser": "^3.3.0"
   },
   "devDependencies": {
     "ava": "^0.24.0",

test.js

@@ -64,6 +64,14 @@ test('shouldn\'t replace selector', async (t) => {
   );
 });
 
+test('shouldn\'t replace inside url', async (t) => {
+  await run(
+    t,
+    '@value blue red; .blue { background-image: url(blue.png); }',
+    '@value blue red; .blue { background-image: url(blue.png); }',
+  );
+});
+
 test('should replace two constants with same name within the file and the latter should win', async (t) => {
   await run(
     t,
@@ -167,6 +175,14 @@ test('should allow transitive values', async (t) => {
   );
 });
 
+test('shouldn\'t allow transitive values in urls', async (t) => {
+  await run(
+    t,
+    '@value aaa: red;\n@value bbb: url(aaa.png); \n.a { background-image: url(aaa.png); }',
+    '@value aaa: red;\n@value bbb: url(aaa.png); \n.a { background-image: url(aaa.png); }',
+  );
+});
+
 test('should allow transitive values within calc', async (t) => {
   await run(
     t,