Lint SCSS with sass-lint

Author: Marlow Payne

CHANGELOG

@@ -4,6 +4,7 @@
   - Migrate all dependencies to NPM, remove Bower
   - Migrate JS linting to eslint
   - Migrate SCSS compilation to libsass
+  - Lint SCSS with sass-lint
 5.1.2
   - Ensuring disabled items don't close on close
 5.0.1

Gruntfile.js

@@ -37,6 +37,7 @@ module.exports = function(grunt) {
         'grunt-eslint',
         'grunt-mocha-phantomjs',
         'grunt-sass',
+        'grunt-sass-lint',
         'grunt-shell',
         'grunt-version'
     ];
@@ -48,8 +49,8 @@ module.exports = function(grunt) {
     });
 
     grunt.registerTask('serve', ['build', 'connect:server', 'watch']);
-    grunt.registerTask('build', ['lint:prod', 'copy', 'uglify', 'version:all', 'sass', 'autoprefixer']);
-    grunt.registerTask('release', ['lint:prod', 'test', 'shell:tagRelease']);
+    grunt.registerTask('build', ['sasslint', 'lint:prod', 'copy', 'uglify', 'version:all', 'sass', 'autoprefixer']);
+    grunt.registerTask('release', ['test', 'shell:tagRelease']);
     grunt.registerTask('test', ['build', 'connect:test', 'mocha_phantomjs']);
     grunt.registerTask('test:browser', ['build', 'connect:test:keepalive']);
     grunt.registerTask('default', 'build');

dist/bellows-theme.css

@@ -28,9 +28,9 @@
   height: 4px;
   margin-top: -2px;
   background: white;
-  pointer-events: none;
   -webkit-transition: -webkit-transform 0.25s ease-in-out;
           transition: transform 0.25s ease-in-out;
+  pointer-events: none;
 }
 
 .bellows__header::before {

dist/bellows-theme.min.css

@@ -20,6 +20,7 @@
     "grunt-mocha-phantomjs": "0.3.2",
     "grunt-open": "0.2.3",
     "grunt-sass": "1.1.0",
+    "grunt-sass-lint": "git+https://github.com/mobify/grunt-sass-lint.git#toggle-rules-in-src",
     "grunt-shell": "0.2.2",
     "grunt-version": "0.3.3",
     "mobify-code-style": "^2.4.2",

package.json

@@ -11,36 +11,36 @@ $active-header-background: #2980b9;
     padding: 15px 20px;
     border: 1px solid $active-header-background;
     border-width: 0 0 1px;
-    
+
     background: $header-background;
-    
+
     color: white;
-    
+
     -webkit-tap-highlight-color: rgba(black, 0);
-    
+
     &:active {
         background: $active-header-background;
     }
 
     &::before,
     &::after {
         content: '';
-        
+
         position: absolute;
         top: 50%;
         right: 20px;
         z-index: 2;
-        
+
         display: block;
         width: 16px;
         height: 4px;
         margin-top: -2px;
-        
+
         background: white;
 
-        pointer-events: none;
-        
         transition: transform 0.25s ease-in-out;
+
+        pointer-events: none;
     }
 
     &::before {
@@ -55,18 +55,18 @@ $active-header-background: #2980b9;
 
     .bellows__item.bellows--is-open > &,
     .bellows__item.bellows--is-opening > & {
-        &::before {            
+        &::before {
             transform: rotate(180deg);
         }
 
         &::after {
             transform: rotate(360deg);
         }
-        
+
     }
 
     .bellows__item.bellows--is-closing > & {
-        
+
     }
 
     .bellows__item:last-child > & {
@@ -84,8 +84,8 @@ $active-header-background: #2980b9;
 .bellows__content {
     padding: 20px;
     border: 1px solid #ecf0f1;
-        
+
     .bellows {
         margin-top: 20px;
     }
-}
+}

src/style/bellows-theme.scss

@@ -9,10 +9,10 @@
 .bellows__item.bellows--is-closing {
     > .bellows__content-wrapper {
         // This declaration is necessary for items that are open by default
-        display: block
+        display: block;
     }
 }
 
 .bellows__content-wrapper {
     display: none;
-}
+}

src/style/bellows.scss

@@ -0,0 +1,12 @@
+module.exports = function(grunt) {
+    var targets = [
+        'src/**/*.scss'
+    ];
+
+    return {
+        options: {
+            configFile: require.resolve('mobify-code-style/css/.sass-lint.yml')
+        },
+        target: targets
+    };
+};