Merge pull request #434 from wujekbogdan/Get-rid-of-border-radius-and-transition-mixins

replaced mixins with 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/mixins.scss

@@ -1,25 +1,9 @@
-// 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($theme) {
   display: none;
   position: absolute; /* please don't change 'position' */
-  @include border-radius(map_get($theme, border-radius));
+  border-radius: map_get($theme, border-radius);
   opacity: map_get($theme, rail-default-opacity);
-  @include transition(background-color .2s linear, opacity .2s linear);
+  transition: background-color .2s linear, opacity .2s linear;
 }
 
 @mixin scrollbar-rail-hover($theme) {
@@ -30,8 +14,8 @@
 @mixin scrollbar-default($theme) {
   position: absolute; /* please don't change 'position' */
   background-color: map_get($theme, bar-container-hover-bg);
-  @include border-radius(map_get($theme, border-radius));
-  @include transition(background-color .2s linear);
+  border-radius: map_get($theme, border-radius);
+  transition: background-color .2s linear;
 }
 
 @mixin scrollbar-hover($theme) {