Fix parsing of selectors with commas in functions

For example: .foo:matches(.bar, .baz)

Thanks to @phosphoer

Author: necolas

History.md

@@ -1,6 +1,7 @@
 HEAD
 ==================
 
+ * allow commas inside selector functions
  * allow empty property values
  * changed default `options.position` value to `true`
  * remove comments from properties and values

index.js

@@ -206,7 +206,7 @@ module.exports = function(css, options){
       .replace(/(?:"[^"]*"|'[^']*')/g, function(m) {
         return m.replace(/,/g, '\u200C');
       })
-      .split(/\s*,\s*/)
+      .split(/\s*(?![^(]*\)),\s*/)
       .map(function(s) {
         return s.replace(/\u200C/g, ',');
       });

test/cases/comma-selector-function.css

@@ -0,0 +1,12 @@
+.foo:matches(.bar,.baz),
+.foo:matches(.bar, .baz),
+.foo:matches(.bar , .baz),
+.foo:matches(.bar ,.baz) {
+  prop: value;
+}
+
+.foo:matches(.bar,.baz,.foobar),
+.foo:matches(.bar, .baz,),
+.foo:matches(,.bar , .baz) {
+  anotherprop: anothervalue;
+}

test/cases/comma-selector-function.json

@@ -0,0 +1,83 @@
+{
+  "type": "stylesheet",
+  "stylesheet": {
+    "rules": [
+      {
+        "type": "rule",
+        "selectors": [
+          ".foo:matches(.bar,.baz)",
+          ".foo:matches(.bar, .baz)",
+          ".foo:matches(.bar , .baz)",
+          ".foo:matches(.bar ,.baz)"
+        ],
+        "declarations": [
+          {
+            "type": "declaration",
+            "property": "prop",
+            "value": "value",
+            "position": {
+              "start": {
+                "line": 5,
+                "column": 3
+              },
+              "end": {
+                "line": 5,
+                "column": 14
+              },
+              "source": "comma-selector-function.css"
+            }
+          }
+        ],
+        "position": {
+          "start": {
+            "line": 1,
+            "column": 1
+          },
+          "end": {
+            "line": 6,
+            "column": 2
+          },
+          "source": "comma-selector-function.css"
+        }
+      },
+      {
+        "type": "rule",
+        "selectors": [
+          ".foo:matches(.bar,.baz,.foobar)",
+          ".foo:matches(.bar, .baz,)",
+          ".foo:matches(,.bar , .baz)"
+        ],
+        "declarations": [
+          {
+            "type": "declaration",
+            "property": "anotherprop",
+            "value": "anothervalue",
+            "position": {
+              "start": {
+                "line": 11,
+                "column": 3
+              },
+              "end": {
+                "line": 11,
+                "column": 28
+              },
+              "source": "comma-selector-function.css"
+            }
+          }
+        ],
+        "position": {
+          "start": {
+            "line": 8,
+            "column": 1
+          },
+          "end": {
+            "line": 12,
+            "column": 2
+          },
+          "source": "comma-selector-function.css"
+        }
+      }
+    ]
+  }
+}
+

test/css-parse.js

@@ -18,6 +18,9 @@ describe('parse(str)', function(){
       var css = read(path.join('test', 'cases', file + '.css'), 'utf8');
       var json = read(path.join('test', 'cases', file + '.json'), 'utf8');
       var ret = parse(css, { source: file + '.css' });
+      // normalize line endings from input file
+      json = JSON.parse(json);
+      json = JSON.stringify(json, null, 2);
       ret = JSON.stringify(ret, null, 2);
       ret.should.equal(json);
     });