- removed transition() and border-radius() mixins

- added gulp-autoprefixer

gulpfile.js

@@ -13,6 +13,7 @@ var gulp = require('gulp')
   , source = require('vinyl-source-stream')
   , stream = require('event-stream')
   , uglify = require('gulp-uglify')
+  , autoprefixer = require('gulp-autoprefixer')
   , zip = require('gulp-zip');
 
 var version = '/* perfect-scrollbar v' + require('./package').version + ' */\n';
@@ -37,6 +38,11 @@ var jsEntries = [
   './src/js/adaptor/jquery.js'
 ];
 
+var autoPrefixerConfig = {
+  browsers: ['> 0%'], // '> 0%' forces autoprefixer to use all the possible prefixes. See https://github.com/ai/browserslist#queries for more details. IMO 'last 3 versions' would be good enough.
+  cascade: false
+};
+
 gulp.task('js', ['clean:js'], function () {
   var tasks = jsEntries.map(function (src) {
     return browserify([src]).bundle()
@@ -87,6 +93,7 @@ gulp.task('clean:css:min', function () {
 gulp.task('css', ['clean:css'], function () {
   return gulp.src('./src/css/main.scss')
     .pipe(sass())
+    .pipe(autoprefixer(autoPrefixerConfig))
     .pipe(insert.prepend(version))
     .pipe(rename('perfect-scrollbar.css'))
     .pipe(gulp.dest('./dist/css'))
@@ -96,6 +103,7 @@ gulp.task('css', ['clean:css'], function () {
 gulp.task('css:min', ['clean:css:min'], function () {
   return gulp.src('./src/css/main.scss')
     .pipe(sass({outputStyle: 'compressed'}))
+    .pipe(autoprefixer(autoPrefixerConfig))
     .pipe(insert.prepend(version))
     .pipe(rename('perfect-scrollbar.min.css'))
     .pipe(gulp.dest('./dist/css'));

package.json

@@ -31,6 +31,7 @@
     "del": "^2.0.2",
     "event-stream": "^3.3.1",
     "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^3.1.0",
     "gulp-connect": "^2.2.0",
     "gulp-eslint": "^1.0.0",
     "gulp-insert": "^0.5.0",

src/css/main.scss

@@ -3,28 +3,13 @@ $ps-rail-hover: #eee;
 $ps-bar-default: #aaa;
 $ps-bar-hover: #999;
 
-// Helper mixins
-@mixin border-radius($r) {
-  -webkit-border-radius: $r;
-     -moz-border-radius: $r;
-      -ms-border-radius: $r;
-          border-radius: $r;
-}
-
-@mixin transition($t...) {
-  -webkit-transition: $t;
-     -moz-transition: $t;
-       -o-transition: $t;
-          transition: $t;
-}
-
 // Scrollbar mixins
 @mixin scrollbar-rail-default {
   display: none;
   position: absolute; /* please don't change 'position' */
-  @include border-radius(4px);
+  border-radius: 4px;
   opacity: 0;
-  @include transition(background-color .2s linear, opacity .2s linear);
+  transition: background-color .2s linear, opacity .2s linear;
 }
 
 @mixin scrollbar-rail-hover {
@@ -35,8 +20,8 @@ $ps-bar-hover: #999;
 @mixin scrollbar-default {
   position: absolute; /* please don't change 'position' */
   background-color: $ps-bar-default;
-  @include border-radius(4px);
+  border-radius: 4px;
-  @include transition(background-color .2s linear);
+  transition: background-color .2s linear;
 }
 
 @mixin scrollbar-hover {