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>
This commit is contained in:
Nathan Sobo
2014-11-13 12:26:52 -07:00
committed by Ben Ogle
parent 10eb89f078
commit 42d9ef397d

View File

@@ -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