Prep for compass-free

HubSpot · May 12, 2015 · b2dd866 · b2dd866
1 parent 9ac2bad
commit b2dd866
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 46 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -3,14 +3,14 @@ var gulp        = require('gulp');
 var babel       = require('gulp-babel');
 var bump        = require('gulp-bump');
 var filter      = require('gulp-filter');
-var sass        = require('gulp-ruby-sass');
 var header      = require('gulp-header');
+var prefixer    = require('gulp-autoprefixer');
 var rename      = require('gulp-rename');
 var uglify      = require('gulp-uglify');
+var sass        = require('gulp-sass');
 var tagVersion  = require('gulp-tag-version');
 var umd         = require('gulp-wrap-umd');
 
-
 // Variables
 var distDir = './dist';
 var pkg = require('./package.json');
@@ -53,11 +53,12 @@ gulp.task('js', ['clean'], function() {
 
 // CSS
 gulp.task('css', function() {
-  sass('./src/css', {
-    loadPath: './bower_components',
-    compass: true
-  })
-  .pipe(gulp.dest(distDir + '/css'));
+  gulp.src('./src/css/**/*.sass')
+    .pipe(sass({
+      includePaths: ['./bower_components']
+    }))
+    .pipe(prefixer())
+    .pipe(gulp.dest(distDir + '/css'));
 });
 
 

diff --git a/package.json b/package.json
@@ -18,12 +18,13 @@
   "devDependencies": {
     "del": "^1.1.1",
     "gulp": "^3.8.11",
+    "gulp-autoprefixer": "^2.2.0",
     "gulp-babel": "^5.1.0",
     "gulp-bump": "^0.3.0",
     "gulp-filter": "^2.0.2",
     "gulp-header": "^1.2.2",
     "gulp-rename": "^1.2.2",
-    "gulp-ruby-sass": "^1.0.5",
+    "gulp-sass": "^2.0.0",
     "gulp-tag-version": "^1.2.1",
     "gulp-uglify": "^1.2.0",
     "gulp-wrap-umd": "^0.2.1"

diff --git a/src/css/drop-theme-arrows-bounce-dark.sass b/src/css/drop-theme-arrows-bounce-dark.sass
@@ -1,6 +1,3 @@
-@import compass/css3
-@import compass/utilities/general/clearfix
-
 @import ../bower_components/tether/sass/mixins/pointer-events
 
 @import ../bower_components/tether/sass/helpers/tether

diff --git a/src/css/drop-theme-arrows-bounce.sass b/src/css/drop-theme-arrows-bounce.sass
@@ -1,6 +1,3 @@
-@import compass/css3
-@import compass/utilities/general/clearfix
-
 @import ../bower_components/tether/sass/mixins/pointer-events
 
 @import ../bower_components/tether/sass/helpers/tether

diff --git a/src/css/drop-theme-arrows.sass b/src/css/drop-theme-arrows.sass
@@ -1,6 +1,3 @@
-@import compass/css3
-@import compass/utilities/general/clearfix
-
 @import ../bower_components/tether/sass/mixins/pointer-events
 
 @import ../bower_components/tether/sass/helpers/tether

diff --git a/src/css/drop-theme-basic.sass b/src/css/drop-theme-basic.sass
@@ -1,6 +1,3 @@
-@import compass/css3
-@import compass/utilities/general/clearfix
-
 @import ../bower_components/tether/sass/helpers/tether
 @import ../bower_components/tether/sass/helpers/tether-theme-basic
 

diff --git a/src/css/drop-theme-hubspot-popovers.sass b/src/css/drop-theme-hubspot-popovers.sass
@@ -1,6 +1,3 @@
-@import compass/css3
-@import compass/utilities/general/clearfix
-
 @import ../bower_components/tether/sass/mixins/pointer-events
 
 @import ../bower_components/tether/sass/helpers/tether
@@ -19,8 +16,8 @@ $useDropShadow: false
 .drop-element.drop-theme-hubspot-popovers
 
     .drop-content
-        +box-shadow(0 3px 7px rgba(0, 0, 0, .2))
-        +border-radius(2px)
+        box-shadow: 0 3px 7px rgba(0, 0, 0, .2)
+        border-radius: 2px
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
         //border: 1px solid #b3b3b3
         padding: 3px
@@ -41,4 +38,4 @@ $useDropShadow: false
                 line-height: 1
 
             p:last-child
-                margin-bottom: 0
+                margin-bottom: 0
diff --git a/src/css/helpers/_drop-animation-scale.sass b/src/css/helpers/_drop-animation-scale.sass
@@ -1,14 +1,12 @@
-@import compass/css3
-
 =drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear")
     .#{ $themePrefix }-element.#{ $themePrefix }-theme-#{ $themeName }
-        +transform(translateZ(0))
-        +transition(opacity .1s)
+        transform: translateZ(0)
+        transition: opacity 100ms
         opacity: 0
 
         .#{ $themePrefix }-content
-            +transition(transform .3s $easing)
-            +transform(scale(0) translateZ(0))
+            transition: transform .3s $easing
+            transform: scale(0) translateZ(0)
 
         &.#{ $themePrefix }-open
             display: none
@@ -17,50 +15,50 @@
             display: block
 
         &.#{ $themePrefix }-after-open
-            +transition(none)
+            transition: none
             opacity: 1
 
             .#{ $themePrefix }-content
-                +transform(scale(1) translateZ(0))
+                transform: scale(1) translateZ(0)
 
         // Centers and middles
 
         &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content
-            +transform-origin(50%, #{ "calc(100% + " }#{ $attachmentOffset }#{ ")"})
+            transform-origin: 50%, #{ "calc(100% + " }#{ $attachmentOffset }#{ ")"}
 
         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content
-            +transform-origin(50%, -$attachmentOffset)
+            transform-origin: 50%, -$attachmentOffset
 
         &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content
-            +transform-origin(#{ "calc(100% + " }#{ $attachmentOffset }#{ ")"}, 50%)
+            transform-origin: #{ "calc(100% + " }#{ $attachmentOffset }#{ ")"}, 50%
 
         &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content
-            +transform-origin(-$attachmentOffset, 50%)
+            transform-origin: -$attachmentOffset, 50%
 
         // Top and bottom corners
 
         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content
-            +transform-origin(0, -$attachmentOffset)
+            transform-origin: 0, -$attachmentOffset
 
         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content
-            +transform-origin(100%, -$attachmentOffset)
+            transform-origin: 100%, -$attachmentOffset
 
         &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content
-            +transform-origin(0, #{ "calc(100% + " }#{ $attachmentOffset }#{ ")"})
+            transform-origin: 0, #{ "calc(100% + " }#{ $attachmentOffset }#{ ")"}
 
         &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content
-            +transform-origin(100%, #{ "calc(100% + " }#{ $attachmentOffset }#{ ")"})
+            transform-origin: 100%, #{ "calc(100% + " }#{ $attachmentOffset }#{ ")"}
 
         // Side corners
 
         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content
-            +transform-origin(#{ "calc(100% + " }#{ $attachmentOffset }#{ ")"}, 0)
+            transform-origin: #{ "calc(100% + " }#{ $attachmentOffset }#{ ")"}, 0
 
         &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content
-            +transform-origin(-$attachmentOffset, 0)
+            transform-origin: -$attachmentOffset, 0
 
         &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content
-            +transform-origin(#{ "calc(100% + " }#{ $attachmentOffset }#{ ")"}, 100%)
+            transform-origin: #{ "calc(100% + " }#{ $attachmentOffset }#{ ")"}, 100%
 
         &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content
-            +transform-origin(-$attachmentOffset, 100%)
+            transform-origin: -$attachmentOffset, 100%