Moving the SVG styles out of the svg element

They are now processed with compass

src/index.html

@@ -26,71 +26,7 @@
 
   <!-- NOTE: Do not put anything in #regexp-render other than the <svg> element -->
   <div id="regexp-render">
-    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-      <style type="text/css">
-        text, tspan {
-          font: 12px Arial;
-        }
-
-        path {
-          fill-opacity: 0;
-          stroke-width: 2px;
-          stroke: #000;
-        }
-
-        circle.pin {
-          fill: #6b6659;
-          stroke-width: 2px;
-          stroke: #000;
-        }
-
-        .anchor text, .any-character text {
-          fill: #fff;
-        }
-
-        .anchor rect, .any-character rect {
-          fill: #6b6659;
-        }
-
-        .escape text, .charset-escape text, .literal text {
-          fill: #000;
-        }
-
-        .escape rect, .charset-escape rect {
-          fill: #bada55;
-        }
-
-        .literal rect {
-          fill: #dae9e5;
-        }
-
-        .charset .charset-box {
-          fill: #cbcbba;
-        }
-
-        .subexp .subexp-label,
-        .charset .charset-label,
-        .match-fragment .repeat-label {
-          font-size: 10px;
-        }
-
-        .subexp .subexp-label,
-        .charset .charset-label {
-          dominant-baseline: text-after-edge;
-        }
-
-        .subexp .subexp-box {
-          stroke: #a0a0a0;
-          stroke-dasharray: 6,2;
-          stroke-width: 2px;
-          fill-opacity: 0;
-        }
-
-        .quote {
-          fill: #a0a0a0;
-        }
-      </style>
-    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
   </div>
 </div>
 

src/js/regexper.js

@@ -141,6 +141,12 @@ export default class Regexper {
     this.state = 'is-loading';
     this._trackEvent('visualization', 'start');
 
+    this.svg.innerHTML = [
+      '<style type="text/css">',
+      this.root.querySelector('#svg-styles').innerHTML,
+      '</style>'
+    ].join('');
+
     this.runningParser = new Parser();
 
     return this.runningParser.parse(expression)

src/sass/_base.scss

@@ -2,8 +2,10 @@ $green: #bada55;
 $dark-green: shade($green, 25%);
 $light-green: tint($green, 25%);
 $gray: #6b6659;
+$light-gray: tint($gray, 25%);
 $tan: #cbcbba;
 $red: #b3151a;
+$blue: #dae9e5;
 $black: #000;
 $white: #fff;
 

src/sass/svg.scss

@@ -0,0 +1,63 @@
+@import 'base';
+
+text, tspan {
+  font: 12px Arial;
+}
+
+path {
+  fill-opacity: 0;
+  stroke-width: 2px;
+  stroke: $black;
+}
+
+circle.pin {
+  fill: $gray;
+  stroke-width: 2px;
+  stroke: $black;
+}
+
+.anchor text, .any-character text {
+  fill: $white;
+}
+
+.anchor rect, .any-character rect {
+  fill: $gray;
+}
+
+.escape text, .charset-escape text, .literal text {
+  fill: $black;
+}
+
+.escape rect, .charset-escape rect {
+  fill: $green;
+}
+
+.literal rect {
+  fill: $blue;
+}
+
+.charset .charset-box {
+  fill: $tan;
+}
+
+.subexp .subexp-label,
+.charset .charset-label,
+.match-fragment .repeat-label {
+  font-size: 10px;
+}
+
+.subexp .subexp-label,
+.charset .charset-label {
+  dominant-baseline: text-after-edge;
+}
+
+.subexp .subexp-box {
+  stroke: $light-gray;
+  stroke-dasharray: 6,2;
+  stroke-width: 2px;
+  fill-opacity: 0;
+}
+
+.quote {
+  fill: $light-gray;
+}