use node-sass for building sass

Replaced compass for node sass and added autoprefixer for automated vendor prefixes This removes the ruby dependency remove compass from package.json remove gem install from travis config update contributing guide accordingly
harvesthq · Mar 24, 2016 · 53414d0 · 53414d0
1 parent a5135db
commit 53414d0
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 56 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -12,11 +12,7 @@ addons:
     packages:
       - git
 
-before_install:
-  - npm install -g grunt-cli
-  - gem install bundler
-  - bundle install
-
+before_install: npm install -g grunt-cli
 before_script: grunt build
 
 after_success: ./bower-publish.sh

diff --git a/Gemfile b/Gemfile
diff --git a/Gemfile.lock b/Gemfile.lock
diff --git a/Gruntfile.coffee b/Gruntfile.coffee
@@ -57,11 +57,18 @@ This file is generated by `grunt build`, do not edit it by hand.
           'public/chosen.jquery.min.js': ['public/chosen.jquery.js']
           'public/chosen.proto.min.js': ['public/chosen.proto.js']
 
-    compass:
+    sass:
       chosen_css:
-        options:
-          bundleExec: true
-          specify: ['sass/chosen.scss']
+        files:
+          'public/chosen.css': 'sass/chosen.scss'
+
+    postcss:
+      options:
+        processors: [
+          require('autoprefixer')(browsers: 'last 2 versions, IE 8')
+        ]
+      dist:
+        src: 'public/chosen.css'
 
     cssmin:
       minified_chosen_css:
@@ -110,7 +117,7 @@ This file is generated by `grunt build`, do not edit it by hand.
           specs: 'spec/public/proto_specs.js'
 
   grunt.registerTask 'default', ['build']
-  grunt.registerTask 'build', ['coffee', 'compass', 'concat', 'uglify', 'cssmin', 'package-bower']
+  grunt.registerTask 'build', ['coffee', 'sass', 'concat', 'uglify', 'postcss', 'cssmin', 'package-bower']
   grunt.registerTask 'prep-release', ['build', 'dom_munger:latest_version', 'zip:chosen','package-jquery']
   grunt.registerTask 'test',  ['coffee', 'jasmine']
 

diff --git a/config.rb b/config.rb
diff --git a/contributing.md b/contributing.md
@@ -180,7 +180,7 @@ license your work under the [MIT License](http://en.wikipedia.org/wiki/MIT_Licen
 
 To install all development dependencies, in the project's root directory, run
 
-    npm install && gem install bundler && bundle install
+    npm install
 
 Once you're configured, building the JavaScript from the command line is easy:
 

diff --git a/package.json b/package.json
@@ -15,17 +15,19 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "autoprefixer": "^6.1.2",
     "coffee-script": ">= 1.6",
     "grunt": "~0.4.1",
     "grunt-contrib-coffee": "~0.6.4",
-    "grunt-contrib-compass": "~0.5.0",
     "grunt-contrib-concat": "~0.1.3",
     "grunt-contrib-cssmin": "~0.6.1",
     "grunt-contrib-jasmine": "~0.5.1",
     "grunt-contrib-uglify": "~0.2.0",
     "grunt-contrib-watch": "~0.3.1",
     "grunt-dom-munger": "~2.0.1",
     "grunt-gh-pages": "~0.10.0",
+    "grunt-postcss": "^0.7.1",
+    "grunt-sass": "^1.1.0",
     "grunt-zip": "~0.9.2",
     "load-grunt-tasks": "^3.0.0"
   },
@@ -35,7 +37,7 @@
       "url": "https://github.com/harvesthq/chosen/blob/master/LICENSE.md"
     }
   ],
-  "bowerJSON":{
+  "bowerJSON": {
     "main": [
       "chosen.jquery.js",
       "chosen.css"

diff --git a/sass/chosen.scss b/sass/chosen.scss
@@ -1,19 +1,15 @@
-@import "compass/css3/box-sizing";
-@import "compass/css3/images";
-@import "compass/css3/user-interface";
-
-$chosen-sprite: image-url('chosen-sprite.png') !default;
-$chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
+$chosen-sprite: url('chosen-sprite.png') !default;
+$chosen-sprite-retina: url('chosen-sprite@2x.png') !default;
 
 /* @group Base */
 .chosen-container {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   font-size: 13px;
-  @include user-select(none);
+  user-select: none;
   * {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
   }
   .chosen-drop {
     position: absolute;
@@ -62,7 +58,7 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
     border: 1px solid #aaa;
     border-radius: 5px;
     background-color: #fff;
-    @include background(linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%));
+    background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
     background-clip: padding-box;
     box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1);
     color: #444;
@@ -127,7 +123,7 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
       outline: 0;
       border: 1px solid #aaa;
       background: #fff $chosen-sprite no-repeat 100% -20px;
-      @include background($chosen-sprite no-repeat 100% -20px);
+      background: $chosen-sprite no-repeat 100% -20px;
       font-size: 1em;
       font-family: sans-serif;
       line-height: normal;
@@ -175,7 +171,7 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
     }
     &.highlighted {
       background-color: #3875d7;
-      @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%));
+      background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
       color: #fff;
     }
     &.no-results {
@@ -210,7 +206,7 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
     height: auto;
     border: 1px solid #aaa;
     background-color: #fff;
-    @include background-image(linear-gradient(#eee 1%, #fff 15%));
+    background-image: linear-gradient(#eee 1%, #fff 15%);
     cursor: text;
   }
   .chosen-choices li {
@@ -243,7 +239,7 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
       max-width: 100%;
       border-radius: 3px;
       background-color: #eeeeee;
-      @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
+      background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
       background-size: 100% 19px;
       background-repeat: repeat-x;
       background-clip: padding-box;
@@ -272,7 +268,7 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
       padding-right: 5px;
       border: 1px solid #ccc;
       background-color: #e4e4e4;
-      @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
+      background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
       color: #666;
     }
     &.search-choice-focus {
@@ -307,7 +303,7 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
       border-bottom-right-radius: 0;
       -moz-border-radius-bottomleft: 0;
       border-bottom-left-radius: 0;
-      @include background-image(linear-gradient(#eee 20%, #fff 80%));
+      background-image: linear-gradient(#eee 20%, #fff 80%);
       box-shadow: 0 1px 0 #fff inset;
     }
     .chosen-single div {
@@ -396,7 +392,7 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
   .chosen-search input[type="text"] {
     padding: 4px 5px 4px 20px;
     background: #fff $chosen-sprite no-repeat -30px -20px;
-    @include background($chosen-sprite no-repeat -30px -20px);
+    background: $chosen-sprite no-repeat -30px -20px;
     direction: rtl;
   }
   &.chosen-container-single{