fix(build): partition IE-only CSS fixes during build

Media query with \0 causing parsing issues with node-sass and LESS.

*  Move all IE fixes to raw CSS. Append to generated CSS during builds.

Fixes #6304

Author: ThomasBurleson

gulp/config.js

@@ -40,6 +40,7 @@ module.exports = {
     'src/components/**/*.scss',
     'src/core/services/**/*.scss'
   ],
+  cssIEPaths : 'src/**/ie_fixes.css',
   paths: 'src/{components, services}/**',
   outputDir: 'dist/',
   demoFolder: 'demo-partials'

gulp/tasks/build-scss.js

@@ -12,6 +12,7 @@ var sassUtils = require('../../scripts/gulp-utils');
 var sass = require('gulp-sass');
 var minifyCss = require('gulp-minify-css');
 var insert = require('gulp-insert');
+var addsrc = require('gulp-add-src');
 var gulpif = require('gulp-if');
 var args = util.args;
 var IS_DEV = require('../const').IS_DEV;
@@ -31,6 +32,7 @@ exports.task = function() {
   streams.push(
     scssPipe = gulp.src(getPaths())
       .pipe(util.filterNonCodeFiles())
+      .pipe(filter(['**', '!**/*.css']))
       .pipe(filter(['**', '!**/*-theme.scss']))
       .pipe(filter(['**', '!**/*-print.scss']))
       .pipe(filter(['**', '!**/*-attributes.scss']))
@@ -41,11 +43,11 @@ exports.task = function() {
   streams.push(
     scssPipe
           .pipe(sass())
-          .pipe(rename({extname: '.css'}))              // unminified
-          .pipe(rename({ basename: filename }))
           .pipe(util.autoprefix())
           .pipe(insert.prepend(config.banner))
-          .pipe(gulp.dest(dest))
+          .pipe(addsrc.append(config.cssIEPaths))       // append raw CSS for IE Fixes
+          .pipe(concat('angular-material.css'))
+          .pipe(gulp.dest(dest))                        // unminified
           .pipe(gulpif(!IS_DEV, minifyCss()))
           .pipe(rename({extname: '.min.css'}))
           .pipe(gulp.dest(dest))                        // minified

package.json

@@ -35,6 +35,7 @@
     "esprima": "^1.2.2",
     "glob": "~4.0.2",
     "gulp": "^3.9.0",
+    "gulp-add-src": "^0.2.0",
     "gulp-autoprefixer": "^1.0.1",
     "gulp-concat": "^2.2.0",
     "gulp-connect": "^2.2.0",
@@ -80,4 +81,3 @@
     "squash": "git rebase -i $(npm run -s merge-base)"
   }
 }
-

src/core/services/layout/ie_fixes.css

@@ -0,0 +1,104 @@
+/*  IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values  */
+/*  Details:  */
+/*  Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.  */
+/*  Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).  */
+/*  Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px  */
+
+@media screen\0 {
+    .flex {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+@media screen\0 {
+    .flex {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+@media screen\0
+and (max-width: 599px) {
+    .flex-xs {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+@media screen\0
+and (min-width: 600px) {
+    .flex-gt-xs {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+@media screen\0
+and (min-width: 600px) and (max-width: 959px) {
+    .flex-sm {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+@media screen\0
+and (min-width: 960px) {
+    .flex-gt-sm {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+@media screen\0
+and (min-width: 960px) and (max-width: 1279px) {
+    .flex-md {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+@media screen\0
+and (min-width: 1280px) {
+    .flex-gt-md {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+@media screen\0
+and (min-width: 1280px) and (max-width: 1919px) {
+    .flex-lg {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+@media screen\0
+and (min-width: 1920px) {
+    .flex-gt-lg {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+@media screen\0
+and (min-width: 1920px) {
+    .flex-xl {
+        -webkit-flex: 1 1 0%;
+        -ms-flex: 1 1 0%;
+        flex: 1 1 0%;
+    }
+}
+
+

src/core/style/layout.scss

@@ -117,20 +117,6 @@
 
   .#{$flexName}             { flex: 1;         box-sizing: border-box; }  // === flex: 1 1 0%;
 
-  // IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values
-  // Details:
-  // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.
-  // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).
-  // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px
-  @if $name != '-print' {
-    @media screen\0 {
-        .#{$flexName} {
-          flex: 1 1 0%;
-        }
-    }
-  }
-
-
   .#{$flexName}-grow        { flex: 1 1 100%;  box-sizing: border-box; }
   .#{$flexName}-initial     { flex: 0 1 auto;  box-sizing: border-box; }
   .#{$flexName}-auto        { flex: 1 1 auto;  box-sizing: border-box; }