From 42d9ef397df75e2a577e3fc9ba8abd57fae4de56 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Thu, 13 Nov 2014 12:26:52 -0700
Subject: [PATCH] Automatically upgrade syntax themes for shadow DOM
 compatibility

If a given selector in a stylesheet targeting the atom-text-editor
context references `.editor` or `.editor-colors`, we automatically
replace these with the appropriate `:host` pseudo-class expressions.
If the selector already contains the :host pseudo-class, we perform no
upgrade.

Signed-off-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
---
 src/styles-element.coffee | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/styles-element.coffee b/src/styles-element.coffee
index 60d0ab92e..47f859153 100644
--- a/src/styles-element.coffee
+++ b/src/styles-element.coffee
@@ -59,6 +59,10 @@ class StylesElement extends HTMLElement
           break
 
     @insertBefore(styleElementClone, insertBefore)
+
+    if @context is 'atom-text-editor'
+      @upgradeDeprecatedSelectors(styleElementClone, styleElement.sourcePath)
+
     @emitter.emit 'did-add-style-element', styleElementClone
 
   styleElementRemoved: (styleElement) ->
@@ -78,4 +82,28 @@ class StylesElement extends HTMLElement
   styleElementMatchesContext: (styleElement) ->
     not @context? or styleElement.context is @context
 
+  upgradeDeprecatedSelectors: (styleElement, sourcePath) ->
+    upgradedSelectors = []
+
+    for rule in styleElement.sheet.cssRules
+      continue if /\:host/.test(rule.selectorText)
+
+      inputSelector = rule.selectorText
+      outputSelector = rule.selectorText
+        .replace(/\.editor-colors($|[ >])/g, ':host$1')
+        .replace(/\.editor(\.[^ ,>]+)/g, ':host($1)')
+        .replace(/\.editor($|[ ,>])/g, ':host$1')
+
+      unless inputSelector is outputSelector
+        rule.selectorText = outputSelector
+        upgradedSelectors.push({inputSelector, outputSelector})
+
+    if upgradedSelectors.length > 0
+      warning = "Upgraded the following syntax theme selectors in `#{sourcePath}` for shadow DOM compatibility:\n\n"
+      for {inputSelector, outputSelector} in upgradedSelectors
+        warning += "`#{inputSelector}` => `#{outputSelector}`\n"
+
+      warning += "\nSee the upgrade guide for information on removing this warning."
+      console.warn(warning)
+
 module.exports = StylesElement = document.registerElement 'atom-styles', prototype: StylesElement.prototype