Add specs for atom-text-editor shadow DOM selector upgrades

And cover one more case with `.editor` plus pseudo-classes

Signed-off-by: Max Brunsfeld <maxbrunsfeld@gmail.com>

spec/styles-element-spec.coffee

@@ -74,3 +74,22 @@ describe "StylesElement", ->
     expect(element.children.length).toBe 2
     expect(element.children[0].textContent).toBe "a {color: red;}"
     expect(element.children[1].textContent).toBe "a {color: blue;}"
+
+  describe "atom-text-editor shadow DOM selector upgrades", ->
+    beforeEach ->
+      element.setAttribute('context', 'atom-text-editor')
+
+    it "upgrades selectors containing .editor-colors", ->
+      atom.styles.addStyleSheet(".editor-colors {background: black;}", context: 'atom-text-editor')
+      expect(element.firstChild.sheet.cssRules[0].selectorText).toBe ':host'
+
+    it "upgrades selectors containing .editor", ->
+      atom.styles.addStyleSheet """
+        .editor {background: black;}
+        .editor.mini {background: black;}
+        .editor:focus {background: black;}
+      """, context: 'atom-text-editor'
+
+      expect(element.firstChild.sheet.cssRules[0].selectorText).toBe ':host'
+      expect(element.firstChild.sheet.cssRules[1].selectorText).toBe ':host(.mini)'
+      expect(element.firstChild.sheet.cssRules[2].selectorText).toBe ':host(:focus)'

src/styles-element.coffee

@@ -91,7 +91,7 @@ class StylesElement extends HTMLElement
       inputSelector = rule.selectorText
       outputSelector = rule.selectorText
         .replace(/\.editor-colors($|[ >])/g, ':host$1')
-        .replace(/\.editor(\.[^ ,>]+)/g, ':host($1)')
+        .replace(/\.editor([:.][^ ,>]+)/g, ':host($1)')
         .replace(/\.editor($|[ ,>])/g, ':host$1')
 
       unless inputSelector is outputSelector