Merge pull request Hacker0x01#61 from Hacker0x01/add-SCSS-linter-to-G…

…runt

Added scss-lint to grunt

.scss-lint.yml

@@ -0,0 +1,143 @@
+# Documentation about rules https://github.com/causes/scss-lint/blob/master/lib/scss_lint/linter/README.md
+
+linters:
+  BangFormat:
+    enabled: true
+
+  BorderZero:
+    enabled: false
+
+  ColorKeyword:
+    enabled: false
+
+  Comment:
+    enabled: false
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DuplicateProperty:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+
+  EmptyRule:
+    enabled: true
+
+  FinalNewline:
+    enabled: true
+
+  HexLength:
+    enaled: true
+
+  HexNotation:
+    enabled: true
+
+  HexValidation:
+    enabled: true
+
+  HexValidation:
+    enabled: false
+
+  IdSelector:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+
+  Indentation:
+    enabled: true
+    width: 2
+
+  LeadingZero:
+    enabled: true
+
+  MergeableSelector:
+    enabled: true
+    exclude:
+      - 'app/assets/stylesheets/email/client-fixes.scss'
+
+  NameFormat:
+    enabled: true
+    convention: BEM
+
+  NestingDepth:
+    enabled: true
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PropertySortOrder:
+    enabled: false
+
+  PropertySpelling:
+    enabled: true
+
+  QualifyingElement:
+    enabled: true
+
+  SelectorDepth:
+    enabled: true
+
+  SelectorFormat:
+    enalbed: true
+    convention: hyphenated_BEM
+
+  Shorthand:
+    enabled: true
+
+  SingleLinePerProperty:
+    enabled: true
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceBeforeBrace:
+    enabled: true
+
+  SpaceBetweenParens:
+    enabled: true
+
+  StringQuotes:
+    enabled: true
+    style: double_quotes # or single_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingZero:
+    enabled: true
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VendorPrefixes:
+    enabled: true
+
+  ZeroUnit:
+    enabled: true

.travis.yml

@@ -2,4 +2,8 @@ sudo: false
 language: node_js
 node_js:
   - "0.10"
-before_install: npm install -g grunt-cli
+rvm:
+  - 2.1.5
+before_install:
+  - npm install -g grunt-cli
+  - gem update --system && gem install scss-lint

gruntfile.js

@@ -34,6 +34,14 @@ module.exports = function(grunt) {
       }
     },
 
+    scsslint: {
+      files: 'src/stylesheets/*.scss',
+      options: {
+        config: '.scss-lint.yml',
+        colorizeOutput: true
+      },
+    },
+
     browserify: {
       all: {
         src: ['src/datepicker.js'],
@@ -56,11 +64,12 @@ module.exports = function(grunt) {
   });
 
   grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-scss-lint');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-browserify');
   grunt.loadNpmTasks('grunt-jsxhint');
   grunt.loadNpmTasks('grunt-jest');
 
-  grunt.registerTask('default', ['watch']);
-  grunt.registerTask('travis', ['jshint', 'jest']);
+  grunt.registerTask('default', ['watch', 'scsslint']);
+  grunt.registerTask('travis', ['jshint', 'jest', 'scsslint']);
 };

package.json

@@ -27,8 +27,9 @@
     "grunt-contrib-watch": "0.6.1",
     "grunt-jest": "0.1.1",
     "grunt-jsxhint": "0.3.0",
-    "react-tools": "0.11.1",
-    "jest-cli": "0.1.18"
+    "grunt-scss-lint": "^0.3.4",
+    "jest-cli": "0.1.18",
+    "react-tools": "0.11.1"
   },
   "dependencies": {
     "react": "^0.11",

src/stylesheets/datepicker.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
 .datepicker {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -41,7 +41,6 @@
 }
 
 .datepicker__navigation {
-  width: $item-size;
   line-height: $item-size;
   text-align: center;
   cursor: pointer;
@@ -127,6 +126,6 @@
   &:focus {
     outline: none;
     border-color: $border-color;
-    box-shadow: inset 0 2px 2px #e9e9e9, 0 0 10px 0 rgba(73, 107, 125, 0.3);
+    box-shadow: inset 0 2px 2px #e9e9e9, 0 0 10px 0 rgba(73, 107, 125, .3);
   }
 }

src/stylesheets/mixins.scss

@@ -1,11 +1,12 @@
 %triangle-arrow-up {
-  margin-top: -$triangleSize;
-  margin-left: -$triangleSize;
+  margin-top: -$triangle-size;
+  margin-left: -$triangle-size;
 
-  &, &:before {
+  &,
+  &:before {
     box-sizing: content-box;
     position: absolute;
-    border: $triangleSize solid transparent;
+    border: $triangle-size solid transparent;
 
     height: 0;
     width: 1px;
@@ -14,12 +15,12 @@
   }
 
   &:before {
-    content: '';
+    content: "";
     z-index: -1;
-    border-width: $triangleSize;
+    border-width: $triangle-size;
 
     top: -1px;
-    left: -$triangleSize;
+    left: -$triangle-size;
     border-bottom-color: $border-color;
   }
 }

src/stylesheets/variables.scss

@@ -7,6 +7,5 @@ $text-color: #000;
 $border-radius: 4px;
 $item-size: 24px;
 $day-margin: 2px;
-$triangleSize: 8px;
-
+$triangle-size: 8px;
 $datepicker__margin: 5px;