Update selectors for Atom v1.13 and newer

This fixes the following deprecation warning:

"Starting from Atom v1.13.0, the contents of atom-text-editor elements
are no longer encapsulated within a shadow DOM boundary. This means you
should stop using :host and ::shadow pseudo-selectors, and prepend all
your syntax selectors with syntax--."

diff --git a/index.less b/index.less
index e367da22b64430634291b94034d45fda2df812d3..95470c61fc96d94e531f1eb1e832163e43ba7d37 100644 (file)
--- a/index.less
+++ b/index.less
@@ -1,6 +1,6 @@
 @import './styles/syntax-variables';
 
-:host, atom-text-editor {
+atom-text-editor {
   background-color: @syntax-background-color;
   color: @syntax-text-color;
 
@@ -40,149 +40,119 @@
     background-color: @syntax-selection-color;
   }
 
-  .search-results .marker .region {
+  .search-results .syntax--marker .region {
     background-color: transparent;
     border: 1px solid @syntax-result-marker-color;
   }
 
-  .search-results .marker.current-result .region {
+  .search-results .syntax--marker.current-result .region {
     border: 1px solid @syntax-result-marker-color-selected;
   }
 
-  .comment {
+  .syntax--comment {
     color: #75715E;
   }
 
-  .string {
+  .syntax--string {
     color: #E6DB74;
   }
 
-  .constant.numeric {
+  .syntax--class.syntax--jade,
+  .syntax--constant.syntax--character,
+  .syntax--constant.syntax--language,
+  .syntax--constant.syntax--numeric,
+  .syntax--constant.syntax--other {
     color: #AE81FF;
   }
 
-  .constant.language {
-    color: #AE81FF;
-  }
-
-  .constant.character,
-  .constant.other {
-    color: #AE81FF;
-  }
-
-  .keyword {
-    color: #F92672;
-  }
-
-  .storage {
+  .syntax--keyword,
+  .syntax--storage {
     color: #F92672;
   }
 
-  .storage.type {
+  .syntax--storage.syntax--type,
+  .syntax--support.syntax--class,
+  .syntax--support.syntax--type {
     font-style: italic;
     color: #66D9EF;
   }
 
-  .entity.name.class {
+  .syntax--entity.syntax--name.syntax--class {
     text-decoration: underline;
     color: #A6E22E;
   }
 
-  .entity.other.inherited-class {
+  .syntax--entity.syntax--other.syntax--inherited-class {
     font-style: italic;
     text-decoration: underline;
     color: #A6E22E;
   }
 
-  .entity.name.function {
+  .syntax--entity.syntax--name.syntax--function,
+  .syntax--entity.syntax--other.syntax--attribute-name {
     color: #A6E22E;
   }
 
-  .entity.name.instance {
-    color: #66D9EF;
-  }
-
-  .variable.parameter {
+  .syntax--variable.syntax--parameter {
     font-style: italic;
     color: #FD971F;
   }
-  
-  // 'this' Javascript
-  .variable.language.js {
-    color: #F92672;
-  }
 
-  .entity.name.tag {
+  .syntax--entity.syntax--name.syntax--tag,
+  .syntax--variable.syntax--language.syntax--js {
     color: #F92672;
   }
 
-  .entity.other.attribute-name {
-    color: #A6E22E;
-  }
-
-  .support.function {
+  .syntax--entity.syntax--name.syntax--instance,
+  .syntax--support.syntax--constant,
+  .syntax--support.syntax--function {
     color: #66D9EF;
   }
 
-  .support.constant {
-    color: #66D9EF;
-  }
-
-  .support.type,
-  .support.class {
-    font-style: italic;
-    color: #66D9EF;
-  }
-
-  .invalid {
+  .syntax--invalid {
     color: #F8F8F0;
     background-color: #F92672;
   }
 
-  .invalid.deprecated {
+  .syntax--invalid.syntax--deprecated {
     color: #F8F8F0;
     background-color: #AE81FF;
   }
 
-  // Jade syntax
-  .class.jade {
-    color: #AE81FF;
-  }
-
-  .gfm {
-    .markup {
-      &.heading {
+  .syntax--gfm {
+    .syntax--markup {
+      &.syntax--heading {
         color: #A6E22E;
         font-weight: bold;
       }
 
-      &.underline {
+      &.syntax--underline {
         color: #E6DB74;
         text-decoration: underline;
       }
     }
 
-    .bold {
+    .syntax--bold {
       font-weight: bold;
     }
 
-    .italic {
+    .syntax--italic {
       font-style: italic;
     }
 
-    .raw {
+    .syntax--raw {
       color: #66D9EF;
     }
 
-    .variable.list {
+    .syntax--variable.syntax--list {
       color: #F92672;
       font-weight: bold;
     }
 
-    .link {
+    .syntax--link {
       color: #CCC;
 
-      .entity {
+      .syntax--entity {
         color: #AE81FF;
       }
     }