Use instance data instead of global const

lib/selector.js

@@ -1,18 +1,14 @@
+let list = require('postcss').list
+
 let OldSelector = require('./old-selector')
 let Prefixer = require('./prefixer')
 let Browsers = require('./browsers')
 let utils = require('./utils')
 
-const SELECTORS_CACHE = {}
-
 class Selector extends Prefixer {
   constructor (name, prefixes, all) {
     super(name, prefixes, all)
     this.regexpCache = {}
-    SELECTORS_CACHE[name] = {
-      possible: this.possible(),
-      replace: this.replace.bind(this)
-    }
   }
 
   /**
@@ -65,18 +61,24 @@ class Selector extends Prefixer {
     let prefixeds = {}
 
     if (rule.selector.includes(',')) {
-      let toProcess = rule.selector
-        .split(',')
-        .filter(el => el.includes(':'))
-        .map(el => el.trim())
-
-      Object.keys(SELECTORS_CACHE).forEach(name => {
-        let selector = toProcess.find(el => el.includes(name))
-        if (selector) {
+      let separatedRule = list.comma(rule.selector)
+
+      this.all.add.selectors.forEach(selector => {
+        let name = selector.name
+        let selToProc = separatedRule.filter(el => el.includes(name))
+
+        if (selToProc.length) {
+          let possible = selector.possible()
           prefixeds[name] = {}
-          SELECTORS_CACHE[name].possible.forEach(prefix => {
-            prefixeds[name][prefix] = SELECTORS_CACHE[name].replace(
-              selector, prefix)
+
+          possible.forEach(prefix => {
+            if (selToProc.length > 1) {
+              prefixeds[name][prefix] = selToProc
+                .map(sel => selector.replace(sel, prefix))
+                .join(', ')
+            } else {
+              prefixeds[name][prefix] = selector.replace(selToProc[0], prefix)
+            }
           })
         }
       })

test/cases/grouping-rule.css

@@ -17,3 +17,7 @@
 :read-only {
   color: black;
 }
+
+.f:read-write, .g:read-write {
+  background: #fff;
+}

test/cases/grouping-rule.out.css

@@ -54,3 +54,11 @@
 :read-only {
   color: black;
 }
+
+.f:-moz-read-write, .g:-moz-read-write {
+  background: #fff;
+}
+
+.f:read-write, .g:read-write {
+  background: #fff;
+}

test/selector.test.js

@@ -1,10 +1,32 @@
+let agents = require('caniuse-lite').agents
 let parse = require('postcss').parse
 
+let Browsers = require('../lib/browsers')
+let Prefixes = require('../lib/prefixes')
 let Selector = require('../lib/selector')
 
+let data = {
+  browsers: agents,
+  prefixes: {
+    '::selection': {
+      selector: true,
+      browsers: ['firefox 21', 'firefox 20 old', 'chrome 30', 'ie 6']
+    },
+    ':read-only': {
+      selector: true,
+      browsers: ['ie 7', 'firefox 20']
+    }
+  }
+}
+
+let fill = new Prefixes(
+  data.prefixes,
+  new Browsers(data.browsers, ['firefox 21', 'ie 7'])
+)
+
 let selector
 beforeEach(() => {
-  selector = new Selector('::selection', ['-moz-', '-ms-'])
+  selector = new Selector('::selection', ['-moz-', '-ms-'], fill)
 })
 
 describe('prefixed()', () => {
@@ -40,7 +62,7 @@ describe('check()', () => {
 describe('prefixeds()', () => {
   it('returns all available prefixed selectors for grouping rule', () => {
     let css = parse('.c::selection, .d:read-only {}')
-    let rSel = new Selector(':read-only', ['-moz-'])
+    let rSel = new Selector(':read-only', ['-moz-'], fill)
     expect(rSel.prefixeds(css.first)).toEqual({
       '::selection': {
         '-webkit-': '.c::-webkit-selection',