[fixes #5] colour values can have commas in them, but only within brackets

Author: geelen

lib/index.js

@@ -17,7 +17,7 @@ var _icssReplaceSymbols = require('icss-replace-symbols');
 var _icssReplaceSymbols2 = _interopRequireDefault(_icssReplaceSymbols);
 
 var matchImports = /^(.+?)\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/;
-var matchLet = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|[^,]+)\s?/g;
+var matchValueDefinition = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|\w+\([^\)]+\)|[^,]+)\s?/g;
 var matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/;
 var options = {};
 var importIndex = 0;
@@ -31,7 +31,7 @@ exports['default'] = function (css) {
 
   var addDefinition = function addDefinition(atRule) {
     var matches = undefined;
-    while (matches = matchLet.exec(atRule.params)) {
+    while (matches = matchValueDefinition.exec(atRule.params)) {
       var _matches = matches;
 
       var _matches2 = _slicedToArray(_matches, 3);

src/index.js

@@ -2,7 +2,7 @@ import postcss from 'postcss'
 import replaceSymbols, { replaceAll } from 'icss-replace-symbols'
 
 const matchImports = /^(.+?)\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/
-const matchLet = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|[^,]+)\s?/g
+const matchValueDefinition = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|\w+\([^\)]+\)|[^,]+)\s?/g
 const matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/
 let options = {}
 let importIndex = 0
@@ -14,7 +14,7 @@ export default css => {
 
   const addDefinition = atRule => {
     let matches
-    while (matches = matchLet.exec(atRule.params)) {
+    while (matches = matchValueDefinition.exec(atRule.params)) {
       let [/*match*/, key, value] = matches
       // Add to the definitions, knowing that values can refer to each other
       definitions[key] = replaceAll(definitions, value)

test/index.js

@@ -102,5 +102,12 @@ describe('constants', () => {
       ':export {\n  --red: i__const___red_9;\n}\n' +
       '.foo { color: i__const___red_9; }')
   })
-})
 
+  it('should allow all colour types', () => {
+    test(
+      '@value named: red; @value 3char #0f0; @value 6char #00ff00; @value rgba rgba(34, 12, 64, 0.3); @value hsla hsla(220, 13.0%, 18.0%, 1);\n' +
+      '.foo { color: named; background-color: 3char; border-top-color: 6char; border-bottom-color: rgba; outline-color: hsla; }',
+      ':export {\n  named: red;\n  3char: #0f0;\n  6char: #00ff00;\n  rgba: rgba(34, 12, 64, 0.3);\n  hsla: hsla(220, 13.0%, 18.0%, 1);\n}\n' +
+      '.foo { color: red; background-color: #0f0; border-top-color: #00ff00; border-bottom-color: rgba(34, 12, 64, 0.3); outline-color: hsla(220, 13.0%, 18.0%, 1); }')
+  })
+})