Add StyleElement

This will be used to handle stylesheet rendering when we move management
of loading stylesheets to the StyleManager instead of the theme manager.
This sets us up for being able to render specific stylesheets in shadow
roots in addition to just having global stylesheets.

spec/spec-helper.coffee

@@ -74,6 +74,7 @@ beforeEach ->
   atom.workspace = new Workspace()
   atom.keymaps.keyBindings = _.clone(keyBindingsToRestore)
   atom.commands.restoreSnapshot(commandsToRestore)
+  atom.styles.clear()
 
   window.resetTimeouts()
   atom.packages.packageStates = {}

spec/styles-element-spec.coffee

@@ -0,0 +1,35 @@
+StylesElement = require '../src/styles-element'
+StyleManager = require '../src/style-manager'
+
+describe "StylesElement", ->
+  element = null
+
+  beforeEach ->
+    element = new StylesElement
+    document.querySelector('#jasmine-content').appendChild(element)
+
+  it "renders a style tag for all currently active stylesheets in the style manager", ->
+    expect(element.children.length).toBe 0
+
+    disposable1 = atom.styles.addStyleSheet("a {color: red;}")
+    expect(element.children.length).toBe 1
+    expect(element.children[0].textContent).toBe "a {color: red;}"
+
+    disposable2 = atom.styles.addStyleSheet("a {color: blue;}")
+    expect(element.children.length).toBe 2
+    expect(element.children[1].textContent).toBe "a {color: blue;}"
+
+    disposable1.dispose()
+    expect(element.children.length).toBe 1
+    expect(element.children[0].textContent).toBe "a {color: blue;}"
+
+  it "orders style elements by group", ->
+    expect(element.children.length).toBe 0
+
+    atom.styles.addStyleSheet("a {color: red}", group: 'a')
+    atom.styles.addStyleSheet("a {color: blue}", group: 'b')
+    atom.styles.addStyleSheet("a {color: green}", group: 'a')
+
+    expect(element.children[0].textContent).toBe "a {color: red}"
+    expect(element.children[1].textContent).toBe "a {color: green}"
+    expect(element.children[2].textContent).toBe "a {color: blue}"

src/atom.coffee

@@ -182,6 +182,7 @@ class Atom extends Model
     Clipboard = require './clipboard'
     Syntax = require './syntax'
     ThemeManager = require './theme-manager'
+    StyleManager = require './style-manager'
     ContextMenuManager = require './context-menu-manager'
     MenuManager = require './menu-manager'
     {devMode, safeMode, resourcePath} = @getLoadSettings()
@@ -202,6 +203,7 @@ class Atom extends Model
     @commands = new CommandRegistry
     @packages = new PackageManager({devMode, configDirPath, resourcePath, safeMode})
     @themes = new ThemeManager({packageManager: @packages, configDirPath, resourcePath, safeMode})
+    @styles = new StyleManager({resourcePath})
     @contextMenu = new ContextMenuManager({resourcePath, devMode})
     @menu = new MenuManager({resourcePath})
     @clipboard = new Clipboard()

src/style-manager.coffee

@@ -61,3 +61,7 @@ class StyleManager
       sourcePath = params?.sourcePath
       delete @styleElementsBySourcePath[sourcePath] if sourcePath?
       @emitter.emit 'did-remove-style-element', styleElement
+
+  clear: ->
+    @styleElements = []
+    @styleElementsBySourcePath = {}

src/styles-element.coffee

@@ -0,0 +1,30 @@
+{CompositeDisposable} = require 'event-kit'
+
+class StylesElement extends HTMLElement
+  attachedCallback: ->
+    @subscriptions = new CompositeDisposable
+    @styleElementClonesByOriginalElement = new WeakMap
+    @subscriptions.add atom.styles.observeStyleElements(@styleElementAdded.bind(this))
+    @subscriptions.add atom.styles.onDidRemoveStyleElement(@styleElementRemoved.bind(this))
+
+  styleElementAdded: (styleElement) ->
+    {group} = styleElement
+    styleElementClone = styleElement.cloneNode(true)
+    styleElementClone.group = group
+    @styleElementClonesByOriginalElement.set(styleElement, styleElementClone)
+
+    if group?
+      for child in @children
+        if child.group is group and child.nextSibling?.group isnt group
+          insertBefore = child.nextSibling
+          break
+
+    @insertBefore(styleElementClone, insertBefore)
+
+  styleElementRemoved: (styleElement) ->
+    @styleElementClonesByOriginalElement.get(styleElement).remove()
+
+  detachedCallback: ->
+    @subscriptions.dispose()
+
+module.exports = StylesElement = document.registerElement 'atom-styles', prototype: StylesElement.prototype