Style non-shadow DOM editor with it’s own style sheet

Trying to style both modes of the text editor with the same style sheet
is proving to be more trouble than it’s worth. This prepares the shadow
DOM style sheet to diverge more radically to enable the background color
to be overridden from the outside more easily.

src/text-editor-element.coffee

@@ -1,11 +1,14 @@
 {View, $, callRemoveHooks} = require 'space-pen'
 React = require 'react-atom-fork'
+Path = require 'path'
 {defaults} = require 'underscore-plus'
 TextBuffer = require 'text-buffer'
 TextEditor = require './text-editor'
 TextEditorComponent = require './text-editor-component'
 TextEditorView = null
 
+ShadowStyleSheet = null
+
 class TextEditorElement extends HTMLElement
   model: null
   componentDescriptor: null
@@ -25,8 +28,13 @@ class TextEditorElement extends HTMLElement
     @setAttribute('tabindex', -1)
 
     if atom.config.get('editor.useShadowDOM')
+      unless ShadowStyleSheet?
+        ShadowStyleSheet = document.createElement('style')
+        ShadowStyleSheet.textContent = atom.themes.loadLessStylesheet(require.resolve('../static/text-editor-shadow.less'))
+
       @createShadowRoot()
 
+      @shadowRoot.appendChild(ShadowStyleSheet.cloneNode(true))
       @stylesElement = document.createElement('atom-styles')
       @stylesElement.setAttribute('context', 'atom-text-editor')
       @stylesElement.initialize()
@@ -42,7 +50,6 @@ class TextEditorElement extends HTMLElement
 
     @rootElement.classList.add('editor', 'editor-colors')
 
-
   createSpacePenShim: ->
     TextEditorView ?= require './text-editor-view'
     @__spacePenView = new TextEditorView(this)

src/theme-manager.coffee

@@ -249,9 +249,6 @@ class ThemeManager
     if nativeStylesheetPath = fs.resolveOnLoadPath(process.platform, ['css', 'less'])
       @requireStylesheet(nativeStylesheetPath)
 
-    textEditorStylesPath = path.join(@resourcePath, 'static', 'text-editor-shadow.less')
-    atom.styles.addStyleSheet(@loadLessStylesheet(textEditorStylesPath), sourcePath: textEditorStylesPath, context: 'atom-text-editor')
-
   stylesheetElementForId: (id) ->
     document.head.querySelector("atom-styles style[source-path=\"#{id}\"]")
 

static/text-editor-light.less

@@ -18,8 +18,206 @@ atom-overlay {
   z-index: 4;
 }
 
-// TODO: remove this when the shadow DOM is the default
+// TODO: Remove the following styles when the editor shadow DOM can no longer be disabled
-atom-text-editor .highlight {
+atom-text-editor {
-  background: none;
+  display: -webkit-flex;
-  padding: 0;
+
+  .editor-contents {
+    width: 100%;
+    overflow: hidden;
+    cursor: text;
+    display: -webkit-flex;
+    -webkit-user-select: none;
+    position: relative;
+  }
+
+  .gutter {
+    overflow: hidden;
+    text-align: right;
+    cursor: default;
+    min-width: 1em;
+    box-sizing: border-box;
+  }
+
+  .line-numbers {
+    position: relative;
+  }
+
+  .line-number {
+    white-space: nowrap;
+    padding-left: .5em;
+    opacity: 0.6;
+
+    &.cursor-line {
+      opacity: 1;
+    }
+
+    .icon-right {
+      .octicon(chevron-down, 0.8em);
+      display: inline-block;
+      visibility: hidden;
+      opacity: .6;
+      padding: 0 .4em;
+
+      &:before {
+        text-align: center;
+      }
+    }
+  }
+
+  .gutter:hover {
+    .line-number.foldable .icon-right {
+      visibility: visible;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .gutter, .gutter:hover {
+    .line-number.folded .icon-right {
+      .octicon(chevron-right, 0.8em);
+
+      visibility: visible;
+
+      &:before {
+        position: relative;
+        left: -.1em;
+      }
+    }
+  }
+
+  .scroll-view {
+    position: relative;
+    z-index: 0;
+
+    overflow: hidden;
+    -webkit-flex: 1;
+    min-width: 0;
+  }
+
+  .underlayer {
+    position: absolute;
+    z-index: -2;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .highlight {
+    background: none;
+    padding: 0;
+  }
+
+  .highlight .region {
+    position: absolute;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .lines {
+    min-width: 100%;
+    position: relative;
+    z-index: 1;
+  }
+
+  .line {
+    white-space: pre;
+
+    &.cursor-line .fold-marker:after {
+      opacity: 1;
+    }
+  }
+
+  .fold-marker {
+    cursor: default;
+
+    &:after {
+      .icon(0.8em, inline);
+
+      content: @ellipsis;
+      padding-left: 0.2em;
+    }
+  }
+
+  .placeholder-text {
+    position: absolute;
+    color: @text-color-subtle;
+  }
+
+  .invisible-character {
+    font-weight: normal !important;
+    font-style: normal !important;
+  }
+
+  .indent-guide {
+    box-shadow: inset 1px 0;
+  }
+
+  .hidden-input {
+    padding: 0;
+    border: 0;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    width: 1px;
+  }
+
+  .cursor {
+    z-index: 4;
+    pointer-events: none;
+    box-sizing: border-box;
+    position: absolute;
+    border-left: 1px solid;
+    opacity: 0;
+  }
+
+  &.is-focused .cursor {
+    opacity: 1;
+  }
+
+  .cursors.blink-off .cursor {
+    opacity: 0;
+  }
+
+  .horizontal-scrollbar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    height: 15px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    z-index: 3;
+    cursor: default;
+
+    .scrollbar-content {
+      height: 15px;
+    }
+  }
+
+  .vertical-scrollbar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    width: 15px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 3;
+    cursor: default;
+  }
+
+  .scrollbar-corner {
+    position: absolute;
+    overflow: auto;
+    bottom: 0;
+    right: 0;
+  }
 }