chore: add autoprefixer to gulp (#1505)

* chore: add autoprefixer to gulp

* At the time of moving to gulp, the autoprefixer is no longer running against the CSS.

* Re-introducing the autoprefixer for the "latest two versions" as in the README stated, does make sure that each properties are working within the supported browsers.

* Explicitly exclude IE 10 and lower browsers.

Author: devversion

package.json

@@ -55,6 +55,7 @@
     "fs-extra": "^0.26.5",
     "glob": "^6.0.4",
     "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.1",
     "gulp-clean": "^0.3.2",
     "gulp-sass": "^2.3.2",
     "gulp-server-livereload": "^1.8.2",

src/lib/slide-toggle/slide-toggle.scss

@@ -25,11 +25,8 @@ $md-slide-toggle-margin: 16px !default;
 
   white-space: nowrap;
 
-  // Disable user selection to ensure that dragging is smooth without grabbing some elements
-  // accidentally. Manually prefixing here, because the un-prefixed property is not supported yet.
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+  // Disable user selection to ensure that dragging is smooth without grabbing
+  // some elements accidentally.
   user-select: none;
 
   outline: none;

tools/gulp/constants.ts

@@ -6,6 +6,14 @@ export const SOURCE_ROOT = join(PROJECT_ROOT, 'src');
 export const DIST_ROOT = join(PROJECT_ROOT, 'dist');
 export const DIST_COMPONENTS_ROOT = join(DIST_ROOT, '@angular/material');
 
+export const SASS_AUTOPREFIXER_OPTIONS = {
+  browsers: [
+    'last 2 versions',
+    'not ie <= 10',
+    'not ie_mob <= 10',
+  ],
+  cascade: false,
+};
 
 export const NPM_VENDOR_FILES = [
   '@angular', 'core-js/client', 'hammerjs', 'rxjs', 'systemjs/dist', 'zone.js/dist'

tools/gulp/task_helpers.ts

@@ -4,7 +4,7 @@ import * as gulp from 'gulp';
 import * as gulpTs from 'gulp-typescript';
 import * as path from 'path';
 
-import {NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT} from './constants';
+import {NPM_VENDOR_FILES, PROJECT_ROOT, DIST_ROOT, SASS_AUTOPREFIXER_OPTIONS} from './constants';
 
 
 /** Those imports lack typings. */
@@ -14,6 +14,7 @@ const gulpRunSequence = require('run-sequence');
 const gulpSass = require('gulp-sass');
 const gulpServer = require('gulp-server-livereload');
 const gulpSourcemaps = require('gulp-sourcemaps');
+const gulpAutoprefixer = require('gulp-autoprefixer');
 const resolveBin = require('resolve-bin');
 
 
@@ -73,6 +74,7 @@ export function sassBuildTask(dest: string, root: string, includePaths: string[]
     return gulp.src(_globify(root, '**/*.scss'))
       .pipe(gulpSourcemaps.init())
       .pipe(gulpSass(sassOptions).on('error', gulpSass.logError))
+      .pipe(gulpAutoprefixer(SASS_AUTOPREFIXER_OPTIONS))
       .pipe(gulpSourcemaps.write('.'))
       .pipe(gulp.dest(dest));
   };