By matching anything after the custom selector we avoid a potential problem with commas. We should trust postcss to not give us multiple selectors in its array

Author: jaredadobe

index.js

@@ -3,7 +3,8 @@
  * :--foo
  * 注意：CSS 选择器区分大小写
  */
-var re_CUSTOM_SELECTOR = /([^,]*?)(:-{2,}[\w-]+)([^,]*)/g
+//var re_CUSTOM_SELECTOR = /([^,]*?)(:-{2,}[\w-]+)([^,]*)/g
+var re_CUSTOM_SELECTOR = /([^,]*?)(:-{2,}[\w-]+)(.*)/g
 
 /**
  * 暴露插件
@@ -52,7 +53,6 @@ function customSelector(options) {
     if (!options.lineBreak  && options.lineBreak == false) {
        line_break = ' '
     }
-
     // 转换自定义的选择器别名
     styles.eachRule(function(rule) {
       for (var prop in customSelectors) {

test/fixtures/matches.css

@@ -0,0 +1,11 @@
+@custom-selector :--buttons button, .button;
+
+:--buttons:matches(:focus) {
+    border: red;
+    display: block;
+}
+
+:--buttons:matches(:focus, .is-focused) {
+    border: red;
+    display: block;
+}

test/fixtures/matches.expected.css

@@ -0,0 +1,11 @@
+button:matches(:focus),
+.button:matches(:focus) {
+    border: red;
+    display: block;
+}
+
+button:matches(:focus, .is-focused),
+.button:matches(:focus, .is-focused) {
+    border: red;
+    display: block;
+}

test/index.js

@@ -25,6 +25,7 @@ test("@custom-selector", function(t) {
   compareFixtures(t, "pseudo", "should transform pseudo")
   compareFixtures(t, "multiline", "should transform multiline")
   compareFixtures(t, "some-hyphen-selector", "should transform some-hyphen-selector")
+  compareFixtures(t, "matches", "should transform matches selector")
 
   compareFixtures(t, "extension", "should transform local extensions", {
     extensions: {