From 358ade58d7f03109e12ab6aa352f52143cb1cf25 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Mon, 19 Sep 2016 15:55:01 +0200 Subject: [PATCH] use node-sass for building sass (#2483) * 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 * set outputStyle to expanded --- .travis.yml | 6 +----- Gemfile | 3 --- Gemfile.lock | 16 ---------------- Gruntfile.coffee | 19 ++++++++++++++----- config.rb | 8 -------- contributing.md | 2 +- package.json | 8 ++++---- sass/chosen.scss | 28 ++++++++++++---------------- 8 files changed, 32 insertions(+), 58 deletions(-) delete mode 100644 Gemfile delete mode 100644 Gemfile.lock delete mode 100644 config.rb diff --git a/.travis.yml b/.travis.yml index 5d860284f67..a1f3e2132cb 100644 --- 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 package-npm package-bower after_success: ./publish-package.sh diff --git a/Gemfile b/Gemfile deleted file mode 100644 index e85f28cbaff..00000000000 --- a/Gemfile +++ /dev/null @@ -1,3 +0,0 @@ -source "https://rubygems.org" - -gem 'compass' diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index b82fc3554b4..00000000000 --- a/Gemfile.lock +++ /dev/null @@ -1,16 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - chunky_png (1.2.8) - compass (0.12.2) - chunky_png (~> 1.2) - fssm (>= 0.2.7) - sass (~> 3.1) - fssm (0.2.10) - sass (3.2.9) - -PLATFORMS - ruby - -DEPENDENCIES - compass diff --git a/Gruntfile.coffee b/Gruntfile.coffee index 2c032e1ded3..3efbb0ebf1b 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -53,11 +53,20 @@ 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: + options: + outputStyle: 'expanded' 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: @@ -90,7 +99,7 @@ This file is generated by `grunt build`, do not edit it by hand. grunt.loadTasks 'tasks' grunt.registerTask 'default', ['build'] - grunt.registerTask 'build', ['coffee', 'compass', 'concat', 'uglify', 'cssmin'] + grunt.registerTask 'build', ['coffee', 'sass', 'concat', 'uglify', 'postcss', 'cssmin', 'package-bower'] grunt.registerTask 'test', ['coffee', 'jasmine'] diff --git a/config.rb b/config.rb deleted file mode 100644 index a9f6692151e..00000000000 --- a/config.rb +++ /dev/null @@ -1,8 +0,0 @@ -http_path = "/" -css_dir = "public" -sass_dir = "sass" -images_dir = "public" - -relative_assets = true -line_comments = false -asset_cache_buster :none \ No newline at end of file diff --git a/contributing.md b/contributing.md index d9e5a36d906..7c661dd9374 100644 --- 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 index 2c4e3fc9e7f..c5eed4ad0a8 100644 --- a/package.json +++ b/package.json @@ -21,14 +21,12 @@ "scripts": { "test": "grunt test" }, - "dependencies": { - "jquery": ">=1.4.4" - }, + "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", @@ -36,6 +34,8 @@ "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" }, diff --git a/sass/chosen.scss b/sass/chosen.scss index 8298039021e..368230a3fd3 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -1,9 +1,5 @@ -@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 { @@ -11,9 +7,9 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default; 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{