Allow value definitions with commas in them.

This makes value declarations slight more strict: there must now
be only one declaration per @value (imports still work as before,
and multiple values can be imported in a single @value).

By doing this, it allows us to be more permissive of what the
definitions can contain, thus allowing for support of things
such as:

- Multiple box-shadow shadows
- Multiple transition specifications
- Multiple media query conditions (OR'd)

It does allow for a little bit of weirder usage in this, e.g. for
specifying multiple values in a comma-separate rgba value:

@value redAndGreen: 150, 150;
.foo { background-color: rgba(redAndGreen, 0, 1); }

I don't think that's a super-desirable usage, but I also don't
think it really harms anything by being allowed, so I haven't
attempted to mitigate it.

Fixes #11.

Author: tec27

lib/index.js

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

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 matchValueDefinition = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|\w+\([^\)]+\)|[^,]+)\s?/g
+const matchValueDefinition = /(?:\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|.+?)\s*$/g
 const matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/
 let options = {}
 let importIndex = 0

test/index.js

@@ -110,4 +110,12 @@ describe('constants', () => {
       ':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); }')
   })
+
+  it('should allow definitions with commas in them', () => {
+    test(
+      '@value coolShadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14)   ;\n' +
+      '.foo { box-shadow: coolShadow; }',
+      ':export {\n  coolShadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14);\n}\n' +
+      '.foo { box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14); }')
+  })
 })