Apply stylesheets with atom-editor-context in text editor specs

spec/text-editor-component-spec.coffee

@@ -721,11 +721,11 @@ describe "TextEditorComponent", ->
       editor.setCursorScreenPosition([0, 16])
       nextAnimationFrame()
 
-      atom.themes.applyStylesheet 'test', """
+      atom.styles.addStyleSheet """
         .function.js {
           font-weight: bold;
         }
-      """
+      """, context: 'atom-text-editor'
       nextAnimationFrame() # update based on new measurements
 
       cursor = componentNode.querySelector('.cursor')
@@ -1667,12 +1667,13 @@ describe "TextEditorComponent", ->
       component.measureHeightAndWidth()
       nextAnimationFrame()
 
-      atom.themes.applyStylesheet "test", """
+      atom.styles.addStyleSheet """
         ::-webkit-scrollbar {
           width: 8px;
           height: 8px;
         }
-      """
+      """, context: 'atom-text-editor'
+
       nextAnimationFrame()
 
       scrollbarCornerNode = componentNode.querySelector('.scrollbar-corner')

src/text-editor-component.coffee

@@ -175,14 +175,14 @@ TextEditorComponent = React.createClass
     @setScrollSensitivity(atom.config.get('editor.scrollSensitivity'))
 
   componentDidMount: ->
-    {editor} = @props
+    {editor, stylesElement} = @props
 
     @observeEditor()
     @listenForDOMEvents()
 
-    @subscribe atom.themes.onDidAddStylesheet @onStylesheetsChanged
-    @subscribe atom.themes.onDidUpdateStylesheet @onStylesheetsChanged
-    @subscribe atom.themes.onDidRemoveStylesheet @onStylesheetsChanged
+    @subscribe stylesElement.onDidAddStyleElement @onStylesheetsChanged
+    @subscribe stylesElement.onDidUpdateStyleElement @onStylesheetsChanged
+    @subscribe stylesElement.onDidRemoveStyleElement @onStylesheetsChanged
     unless atom.themes.isInitialLoadComplete()
       @subscribe atom.themes.onDidReloadAll @onStylesheetsChanged
     @subscribe scrollbarStyle.changes, @refreshScrollbars
@@ -622,11 +622,11 @@ TextEditorComponent = React.createClass
       else
         editor.setSelectedScreenRange([tailPosition, [dragRow + 1, 0]], preserveFolds: true)
 
-  onStylesheetsChanged: (stylesheet) ->
+  onStylesheetsChanged: (styleElement) ->
     return unless @performedInitialMeasurement
     return unless atom.themes.isInitialLoadComplete()
 
-    @refreshScrollbars() if not stylesheet? or @containsScrollbarSelector(stylesheet)
+    @refreshScrollbars() if not styleElement? or @containsScrollbarSelector(styleElement.sheet)
     @sampleFontStyling()
     @sampleBackgroundColors()
     @remeasureCharacterWidths()

src/text-editor-element.coffee

@@ -24,12 +24,12 @@ class TextEditorElement extends HTMLElement
   initializeContent: (attributes) ->
     @classList.add('editor')
     @setAttribute('tabindex', -1)
-    @shadowRoot = @createShadowRoot()
+    @createShadowRoot()
 
-    stylesElement = document.createElement('atom-styles')
-    stylesElement.setAttribute('context', 'atom-text-editor')
-    stylesElement.initialize()
-    @shadowRoot.appendChild(stylesElement)
+    @stylesElement = document.createElement('atom-styles')
+    @stylesElement.setAttribute('context', 'atom-text-editor')
+    @stylesElement.initialize()
+    @shadowRoot.appendChild(@stylesElement)
 
     @rootElement = document.createElement('div')
     @rootElement.classList.add('editor', 'editor-colors')
@@ -76,6 +76,7 @@ class TextEditorElement extends HTMLElement
     @componentDescriptor ?= TextEditorComponent(
       hostElement: this
       rootElement: @rootElement
+      stylesElement: @stylesElement
       editor: @model
       mini: @model.mini
       lineOverdrawMargin: @lineOverdrawMargin