@erikyuzwa reworked build to separate out IE8-specific CSS

build/grunt.js

@@ -182,11 +182,9 @@ module.exports = function(grunt) {
     },
     cssmin: {
       minify: {
-        expand: true,
-        cwd: 'build/temp/',
-        src: ['video-js.css', 'alt/video-js-cdn.css'],
-        dest: 'build/temp/',
-        ext: '.min.css'
+        files: {
+          'build/temp/video-js.min.css': ['build/temp/video-js.css', 'build/temp/alt/video-js-cdn.css', 'src/css/ie8.css']
+        }
       }
     },
     sass: {
@@ -382,20 +380,17 @@ module.exports = function(grunt) {
       }
     },
     concat: {
+      options: {
+        separator: '\n'
+      },
       novtt: {
-        options: {
-          separator: '\n'
-        },
         src: ['build/temp/video.js'],
         dest: 'build/temp/alt/video.novtt.js'
       },
       vtt: {
-        options: {
-          separator: '\n',
-        },
         src: ['build/temp/video.js', 'node_modules/videojs-vtt.js/dist/vtt.js'],
-        dest: 'build/temp/video.js',
-      },
+        dest: 'build/temp/video.js'
+      }
     },
     concurrent: {
       options: {

src/css/components/_control-bar.scss

@@ -20,9 +20,6 @@
   @include transition($trans);
 }
 
-// IE 8 hack for media queries
-$ie8screen: "\\0screen";
-
 // Video has started playing AND user is inactive
 .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
   // Remain visible for screen reader and keyboard users
@@ -32,10 +29,6 @@ $ie8screen: "\\0screen";
   $trans: visibility 1.0s, opacity 1.0s;
   @include transition($trans);
 
-  // Make controls hidden in IE8 for now
-  @media #{$ie8screen} {
-    visibility: hidden;
-  }
 }
 
 .vjs-controls-disabled .vjs-control-bar,
@@ -51,15 +44,6 @@ $ie8screen: "\\0screen";
   visibility: visible;
 }
 
-
-// IE8 is flakey with fonts, and you have to change the actual content to force
-// fonts to show/hide properly.
-// - "\9" IE8 hack didn't work for this
-// Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
-.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
-  @media #{$ie8screen} { content: ""; }
-}
-
 // IE 8 + 9 Support
 .vjs-has-started.vjs-no-flex .vjs-control-bar {
   display: table;

src/css/ie8.css

@@ -0,0 +1,30 @@
+/**
+// IE 8 hack for media queries which the sass parser can encounter problems with
+$ie8screen: "\\0screen";
+
+// original home: css/components/_control-bar.scss
+// IE8 is flakey with fonts, and you have to change the actual content to force
+// fonts to show/hide properly.
+// - "\9" IE8 hack didn't work for this
+// Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
+.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
+  @media #{$ie8screen} { content: ""; }
+}
+
+// Video has started playing AND user is inactive
+.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+
+  // Make controls hidden in IE8 for now
+  @media #{$ie8screen} {
+    visibility: hidden;
+  }
+}
+*/
+
+@media \0screen {
+  .vjs-user-inactive.vjs-playing .vjs-control-bar :before {
+    content: ""; } }
+
+@media \0screen {
+  .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+    visibility: hidden; } }