Moving the SVG styles out of the svg element

They are now processed with compass

gulpfile.js

@@ -11,7 +11,7 @@ function errorHandler() {
 
 gulp.task('default', ['server'], function() {
   gulp.watch(config.globs.other, ['static']);
-  gulp.watch([config.globs.html, config.templateFile], ['markup']);
+  gulp.watch([config.globs.html, config.templateFile, config.globs.sass], ['markup']);
   gulp.watch(config.globs.sass, ['compass']);
   gulp.watch(config.globs.js, ['browserify']);
 });
@@ -37,9 +37,10 @@ gulp.task('static', function() {
     .pipe(gulp.dest(config.buildRoot));
 });
 
-gulp.task('markup', function() {
+gulp.task('markup', ['compass'], function() {
   var wrap = require('gulp-wrap'),
-      path = require('path');
+      path = require('path'),
+      fs = require('fs');
 
   return gulp.src(config.globs.html, { base: './src' })
     .pipe(errorHandler())
@@ -49,7 +50,10 @@ gulp.task('markup', function() {
             file = path.relative(root, this.file.history[0]);
 
         return config.titles[file] || config.titles['_'];
-      }
+      },
+      svgStyles: fs.readFileSync(path.join(config.compass.css, 'svg.css'), {
+        encoding: 'utf-8'
+      })
     }))
     .pipe(gulp.dest(config.buildRoot));
 });

spec/regexper_spec.js

@@ -14,7 +14,8 @@ describe('regexper.js', function() {
       '<div><a href="#" data-glyph="link-intact"></a></div>',
       '<div><a href="#" data-glyph="data-transfer-download"></a></div>',
       '<div id="progress"><div></div></div>',
-      '<div id="regexp-render"><svg></svg></div>'
+      '<div id="regexp-render"><svg></svg></div>',
+      '<div id="svg-styles">example styles</div>'
     ].join('');
 
     this.regexper = new Regexper(this.root);
@@ -377,6 +378,10 @@ describe('regexper.js', function() {
       expect(this.regexper._trackEvent).toHaveBeenCalledWith('visualization', 'start');
     });
 
+    it('adds the svg styles to the svg element', function() {
+      expect(this.regexper.svg.innerHTML).toEqual('<style type="text/css">example styles</style>');
+    });
+
     it('keeps a copy of the running parser', function() {
       expect(this.regexper.runningParser).toBeTruthy();
     });

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">
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
-      <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>
   </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;
+}

template.html

@@ -15,6 +15,8 @@
     <link rel="stylesheet" href="/css/main.css" />
   </head>
   <body>
+    <script type="text/css" id="svg-styles">${svgStyles}</script>
+
     <header>
       <div class="logo">
         <h1><a href="/">Regexper</a></h1>