Atom Themes can be loaded

docs/configuring-and-extending.md

@@ -110,7 +110,7 @@ folder, which can contain multiple stylesheets along with an optional
 package.json:
 ```json
 {
-  "stylesheets": ["core", "editor", "tree-view"]
+  "stylesheets": ["core.css", "editor.less", "tree-view.css"]
 }
 ```
 

spec/app/theme-spec.coffee

@@ -0,0 +1,17 @@
+$ = require 'jquery'
+fs = require 'fs'
+Theme = require 'theme'
+
+describe "Theme", ->
+  describe "@load(name)", ->
+    it "Loads and applies css from package.json in the correct order", ->
+      themePath = require.resolve(fs.join('fixtures', 'test-atom-theme'))
+
+      expect($(document.body).css("padding-top")).not.toBe("101px")
+      expect($(document.body).css("padding-right")).not.toBe("102px")
+      expect($(document.body).css("padding-bottom")).not.toBe("103px")
+      theme = Theme.load(themePath)
+      expect($(document.body).css("padding-top")).toBe("101px")
+      expect($(document.body).css("padding-right")).toBe("102px")
+      expect($(document.body).css("padding-bottom")).toBe("103px")
+      theme.deactivate()

spec/fixtures/test-atom-theme/first.css

@@ -0,0 +1,5 @@
+body {
+  padding-top: 101px;
+  padding-right: 101px;
+  padding-bottom: 101px;
+}

spec/fixtures/test-atom-theme/last.css

@@ -0,0 +1,5 @@
+body {
+/*  padding-top: 103px;
+  padding-right: 103px;*/
+  padding-bottom: 103px;
+}

spec/fixtures/test-atom-theme/package.json

@@ -0,0 +1,3 @@
+{
+  "stylesheets": ["first.css", "second.css", "last.css"]
+}

spec/fixtures/test-atom-theme/second.css

@@ -0,0 +1,5 @@
+body {
+/*  padding-top: 102px;*/
+  padding-right: 102px;
+  padding-bottom: 102px;
+}

src/app/root-view.coffee

@@ -10,7 +10,7 @@ Project = require 'project'
 Pane = require 'pane'
 PaneColumn = require 'pane-column'
 PaneRow = require 'pane-row'
-TextMateTheme = require 'text-mate-theme'
+Theme = require 'theme'
 
 module.exports =
 class RootView extends View
@@ -41,7 +41,7 @@ class RootView extends View
 
     config.load()
 
-    TextMateTheme.activate(config.get("core.theme") ? 'IR_Black')
+    Theme.load(config.get("core.theme") ? 'IR_Black')
 
     @handleEvents()
 

src/app/text-mate-theme.coffee

@@ -1,17 +1,18 @@
 _ = require 'underscore'
 fs = require 'fs'
-
 Theme = require 'Theme'
 
 module.exports =
 class TextMateTheme extends Theme
   constructor: (@path, {settings}) ->
-    super
     @rulesets = []
     globalSettings = settings[0]
     @buildGlobalSettingsRulesets(settings[0])
     @buildScopeSelectorRulesets(settings[1..])
 
+    @stylesheets = {}
+    @stylesheets[@path] = @getStylesheet()
+
   getStylesheet: ->
     lines = []
     for {selector, properties} in @getRulesets()

src/app/theme.coffee

@@ -16,7 +16,7 @@ class Theme
     if @isTextMateTheme(path)
       theme = @loadTextMateTheme(path)
     else
-      throw new Error("I only know how to load textmate themes!")
+      theme = @loadAtomTheme(path)
 
     if theme
       theme.activate()
@@ -34,13 +34,25 @@ class Theme
       theme = new TextMateTheme(path, data[0])
     theme
 
+  @loadAtomTheme: (path) ->
+    new Theme(path)
+
   @isTextMateTheme: (path) ->
     /\.(tmTheme|plist)$/.test(path)
 
+  @stylesheets: null
+
   constructor: (@path) ->
+    json = fs.read(fs.join(path, "package.json"))
+    @stylesheets = {}
+    for stylesheetName in JSON.parse(json).stylesheets
+      stylesheetPath = fs.join(@path, stylesheetName)
+      @stylesheets[stylesheetPath] = fs.read(stylesheetPath)
 
   activate: ->
-    applyStylesheet(@path, @getStylesheet())
+    for stylesheetPath, stylesheetContent of @stylesheets
+      applyStylesheet(stylesheetPath, stylesheetContent)
 
-  getStylesheet: ->
-    fs.read(@path)
+  deactivate: ->
+    for stylesheetPath, stylesheetContent of @stylesheets
+      window.removeStylesheet(stylesheetPath)