mirror of
https://github.com/atom/atom.git
synced 2026-01-24 06:18:03 -05:00
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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user