Fix case with variable and several color values

Author: lutien

index.js

@@ -8,7 +8,7 @@ module.exports = postcss.plugin('postcss-extract-value', function (opts) {
     var reColorKeywords = new RegExp(colorNameList.join('|'));
     var reCheck =  new RegExp(/#\w+|rgba?|hsla?/.source +
         '|' + reColorKeywords.source, 'g');
-    var reCSSVariable = /var\(-{2}\w{1}[\w+-]*/;
+    var reCSSVariable = /^var\(-{2}\w{1}[\w+-]*/;
     var reHex = /#(\w{6}|\w{3})/;
     var reRgb = /rgba?\([\d,.\s]+\)/;
     var reHls = /hsla?\(\s?[0-9]{1,3},\s?(([0-9]{1,3})+%,\s?){2}[0-9.]+\s?\)/;

test.js

@@ -161,3 +161,22 @@ test('default value in css variable', t => {
     }`;
     return run(t, input, output, { onlyColor: true });
 });
+
+test('variable with several color values', t => {
+    let input = `:root {
+        --base-color: #fff;
+    }
+    .foo {
+        border: 1px solid var(--base-color),
+        2px solid #000;
+    }`;
+    let output = `:root {
+        --base-color: #fff;
+        --border-1: #000;
+    }
+    .foo {
+        border: 1px solid var(--base-color),
+        2px solid var(--border-1);
+    }`;
+    return run(t, input, output, { onlyColor: true });
+});