Add StyleManager.prototype.{onDidUpdateDeprecations,getDeprecations}

src/style-manager.js

@@ -17,6 +17,7 @@ module.exports = class StyleManager {
     this.emitter = new Emitter()
     this.styleElements = []
     this.styleElementsBySourcePath = {}
+    this.deprecationsBySourcePath = {}
   }
 
   /*
@@ -93,6 +94,10 @@ module.exports = class StyleManager {
     return this.emitter.on('did-update-style-element', callback)
   }
 
+  onDidUpdateDeprecations (callback) {
+    return this.emitter.on('did-update-deprecations', callback)
+  }
+
   /*
   Section: Reading Style Elements
   */
@@ -125,7 +130,12 @@ module.exports = class StyleManager {
       }
     }
 
-    styleElement.textContent = transformDeprecatedShadowDOMSelectors(source, params.context)
+    const transformed = transformDeprecatedShadowDOMSelectors(source, params.context)
+    styleElement.textContent = transformed.source
+    if (transformed.deprecationMessage) {
+      this.deprecationsBySourcePath[params.sourcePath] = {message: transformed.deprecationMessage}
+      this.emitter.emit('did-update-deprecations')
+    }
     if (updated) {
       this.emitter.emit('did-update-style-element', styleElement)
     } else {
@@ -163,6 +173,14 @@ module.exports = class StyleManager {
     }
   }
 
+  getDeprecations () {
+    return this.deprecationsBySourcePath
+  }
+
+  clearDeprecations () {
+    this.deprecationsBySourcePath = {}
+  }
+
   getSnapshot () {
     return this.styleElements.slice()
   }
@@ -210,9 +228,10 @@ module.exports = class StyleManager {
 }
 
 function transformDeprecatedShadowDOMSelectors (css, context) {
-  const root = postcss.parse(css)
-  root.walkRules((rule) => {
-    rule.selector = selectorParser((selectors) => {
+  const transformedSelectors = []
+  const transformedSource = postcss.parse(css)
+  transformedSource.walkRules((rule) => {
+    const transformedSelector = selectorParser((selectors) => {
       selectors.each((selector) => {
         const firstNode = selector.nodes[0]
         if (context === 'atom-text-editor' && firstNode.type === 'pseudo' && firstNode.value === ':host') {
@@ -238,7 +257,23 @@ function transformDeprecatedShadowDOMSelectors (css, context) {
           previousNode = node
         })
       })
-    }).process(rule.selector).result
+    }).process(rule.selector, {lossless: true}).result
+    if (transformedSelector !== rule.selector) {
+      transformedSelectors.push({before: rule.selector, after: transformedSelector})
+      rule.selector = transformedSelector
+    }
   })
-  return root.toString()
+  let deprecationMessage
+  if (transformedSelectors.length > 0) {
+    deprecationMessage = 'Shadow DOM support for \`atom-text-editor\` elements has been deprecated. '
+    deprecationMessage += 'This means you should stop using \`:host\` and \`::shadow\` '
+    deprecationMessage += 'pseudo-selectors, and prepend all your syntax selectors with \`syntax--\`. '
+    deprecationMessage += 'To prevent breakage with existing stylesheets, Atom will automatically '
+    deprecationMessage += 'upgrade the following selectors:\n\n'
+    deprecationMessage += transformedSelectors
+      .map((selector) => `* \`${selector.before}\` => \`${selector.after}\``)
+      .join('\n\n') + '\n\n'
+    deprecationMessage += 'Please, make sure to upgrade these selectors as soon as possible.'
+  }
+  return {source: transformedSource.toString(), deprecationMessage}
 }