From 4db895c731e688b57c822e15a2913fe7a3f89406 Mon Sep 17 00:00:00 2001
From: Antonio Scandurra <as-cii@github.com>
Date: Thu, 6 Oct 2016 19:18:04 +0200
Subject: [PATCH] Transform also more complex `atom-text-editor` selectors

---
 spec/style-manager-spec.js | 33 +++++++++++++++++++--------------
 src/style-manager.js       | 15 ++++++++++-----
 2 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/spec/style-manager-spec.js b/spec/style-manager-spec.js
index 65fc24e9a..fdec350af 100644
--- a/spec/style-manager-spec.js
+++ b/spec/style-manager-spec.js
@@ -34,20 +34,23 @@ describe('StyleManager', () => {
       })
 
       it('removes the ::shadow pseudo-element from atom-text-editor selectors', () => {
-          styleManager.addStyleSheet(`
-            atom-text-editor::shadow .class-1, atom-text-editor::shadow .class-2 { color: red }
-            atom-text-editor::shadow > .class-3 { color: yellow }
-            atom-text-editor .class-4 { color: blue }
-            another-element::shadow .class-5 { color: white }
-          `)
-          expect(Array.from(styleManager.getStyleElements()[0].sheet.cssRules).map((r) => r.selectorText)).toEqual([
-            'atom-text-editor .class-1, atom-text-editor .class-2',
-            'atom-text-editor > .class-3',
-            'atom-text-editor .class-4',
-            'another-element::shadow .class-5'
-          ])
-        }
-      )
+        styleManager.addStyleSheet(`
+          atom-text-editor::shadow .class-1, atom-text-editor::shadow .class-2 { color: red }
+          atom-text-editor::shadow > .class-3 { color: yellow }
+          atom-text-editor .class-4 { color: blue }
+          another-element::shadow .class-5 { color: white }
+          atom-text-editor[data-grammar*=\"js\"]::shadow .class-6 { color: green; }
+          atom-text-editor[mini].is-focused::shadow .class-7 { color: green; }
+        `)
+        expect(Array.from(styleManager.getStyleElements()[0].sheet.cssRules).map((r) => r.selectorText)).toEqual([
+          'atom-text-editor .class-1, atom-text-editor .class-2',
+          'atom-text-editor > .class-3',
+          'atom-text-editor .class-4',
+          'another-element::shadow .class-5',
+          'atom-text-editor[data-grammar*=\"js\"] .class-6',
+          'atom-text-editor[mini].is-focused .class-7'
+        ])
+      })
 
       describe('when a selector targets the atom-text-editor shadow DOM', () => {
         it('prepends "--syntax" to class selectors matching a grammar scope name and not already starting with "syntax--"', () => {
@@ -67,11 +70,13 @@ describe('StyleManager', () => {
           styleManager.addStyleSheet(`
             .source > .js, .source.coffee { color: green }
             atom-text-editor::shadow .source > .js { color: yellow }
+            atom-text-editor[mini].is-focused::shadow .source > .js { color: gray }
             atom-text-editor .source > .js { color: red }
           `)
           expect(Array.from(styleManager.getStyleElements()[1].sheet.cssRules).map((r) => r.selectorText)).toEqual([
             '.source > .js, .source.coffee',
             'atom-text-editor .syntax--source > .syntax--js',
+            'atom-text-editor[mini].is-focused .syntax--source > .syntax--js',
             'atom-text-editor .source > .js'
           ])
         })
diff --git a/src/style-manager.js b/src/style-manager.js
index 60c74c59a..27b680ad0 100644
--- a/src/style-manager.js
+++ b/src/style-manager.js
@@ -239,22 +239,27 @@ function transformDeprecatedShadowDOMSelectors (css, context) {
           firstNode.replaceWith(atomTextEditorElementNode)
         }
 
+        let previousNodeIsAtomTextEditor = false
         let targetsAtomTextEditorShadow = context === 'atom-text-editor'
         let previousNode
         selector.each((node) => {
           if (targetsAtomTextEditorShadow && node.type === 'class') {
-            if (DEPRECATED_SYNTAX_SELECTORS.has(node.value) && !node.value.startsWith('syntax--')) {
+            if (DEPRECATED_SYNTAX_SELECTORS.has(node.value)) {
               node.value = `syntax--${node.value}`
             }
-          } else if (previousNode) {
-            const currentNodeIsShadowPseudoClass = node.type === 'pseudo' && node.value === '::shadow'
-            const previousNodeIsAtomTextEditor = previousNode.type === 'tag' && previousNode.value === 'atom-text-editor'
-            if (previousNodeIsAtomTextEditor && currentNodeIsShadowPseudoClass) {
+          } else {
+            if (previousNodeIsAtomTextEditor && node.type === 'pseudo' && node.value === '::shadow') {
               selector.removeChild(node)
               targetsAtomTextEditorShadow = true
             }
           }
+
           previousNode = node
+          if (node.type === 'combinator') {
+            previousNodeIsAtomTextEditor = false
+          } else if (previousNode.type === 'tag' && previousNode.value === 'atom-text-editor') {
+            previousNodeIsAtomTextEditor = true
+          }
         })
       })
     }).process(rule.selector, {lossless: true}).result