Merge pull request #8 from edx/andya/sass-linter

Add Sass linting using rules from stylelint-config-edx

Author: andy-armstrong

Makefile

@@ -29,8 +29,13 @@ preview: samples ## build the preview site
 	aws s3 sync samples s3://${S3_PREVIEW_DOMAIN}/$(shell git rev-parse --abbrev-ref HEAD)
 	@echo Preview generated to http://${S3_PREVIEW_DOMAIN}/$(shell git rev-parse --abbrev-ref HEAD)
 
-test: clean samples ## run tests
+quality:
+	./node_modules/stylelint/bin/stylelint.js sass/**/*.scss samples/**/*.scss
+
+fix:
+	./node_modules/stylelint/bin/stylelint.js sass/**/*.scss samples/**/*.scss --fix
+
+test: clean quality samples ## run tests
 
 xxx:
 	echo $(shell git rev-parse --abbrev-ref HEAD)
-

package.json

@@ -22,6 +22,7 @@
     "node-sass": "^4.5.3",
     "postcss": "^6.0.1",
     "postcss-cli": "^4.0.0",
-    "postcss-rtlcss-combined": "^0.0.0"
+    "postcss-rtlcss-combined": "^0.0.0",
+    "stylelint-config-edx": "^1.0.0"
   }
 }

sass/edx/_variables.scss

@@ -160,6 +160,7 @@ $grid-breakpoints: (
   lg: 992px,
   xl: 1200px
 ) !default;
+
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints);
 
@@ -174,6 +175,7 @@ $container-max-widths: (
   lg: 960px,
   xl: 1140px
 ) !default;
+
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 
 
@@ -189,7 +191,7 @@ $container-max-widths: (
 // Define common padding and border radius sizes and more.
 
 $line-height-lg:         1.5 !default;
-$line-height-sm:         1.0 !default;
+$line-height-sm:         1 !default;
 
 $border-width: 1px !default;
 $border-color: theme-color("light") !default;
@@ -318,9 +320,9 @@ $input-btn-padding-x-lg:    1rem !default;
 $input-btn-line-height-lg:  1.5 !default;
 
 $btn-font-weight:                $font-weight-normal !default;
-$btn-box-shadow:                 inset 0 1px 0 rgba($theme-color-inverse,.15), 0 1px 1px rgba($theme-color-darkest,.075) !default;
+$btn-box-shadow:                 inset 0 1px 0 rgba($theme-color-inverse, .15), 0 1px 1px rgba($theme-color-darkest, .075) !default;
 $btn-focus-box-shadow:           0 0 0 3px rgba($theme-color-primary, .25) !default;
-$btn-active-box-shadow:          inset 0 3px 5px rgba($theme-color-darkest,.125) !default;
+$btn-active-box-shadow:          inset 0 3px 5px rgba($theme-color-darkest, .125) !default;
 
 $btn-link-disabled-color:        theme-colors("disabled") !default;
 
@@ -340,9 +342,9 @@ $input-bg:                       theme-color("inverse") !default;
 $input-disabled-bg:              theme-color("light") !default;
 
 $input-color:                    theme-color("secondary") !default;
-$input-border-color:             rgba($theme-color-darkest,.15) !default;
+$input-border-color:             rgba($theme-color-darkest, .15) !default;
 $input-btn-border-width:         $border-width !default; // For form controls and buttons
-$input-box-shadow:               inset 0 1px 1px rgba($theme-color-darkest,.075) !default;
+$input-box-shadow:               inset 0 1px 1px rgba($theme-color-darkest, .075) !default;
 
 $input-border-radius:            $border-radius !default;
 $input-border-radius-lg:         $border-radius-lg !default;
@@ -477,10 +479,10 @@ $dropdown-min-width:             10rem !default;
 $dropdown-padding-y:             .5rem !default;
 $dropdown-spacer:                .125rem !default;
 $dropdown-bg:                    theme-color("inverse") !default;
-$dropdown-border-color:          rgba($theme-color-darkest,.15) !default;
+$dropdown-border-color:          rgba($theme-color-darkest, .15) !default;
 $dropdown-border-width:          $border-width !default;
 $dropdown-divider-bg:            theme-color("light") !default;
-$dropdown-box-shadow:            0 .5rem 1rem rgba($theme-color-darkest,.175) !default;
+$dropdown-box-shadow:            0 .5rem 1rem rgba($theme-color-darkest, .175) !default;
 
 $dropdown-link-color:            theme-color("darker") !default;
 $dropdown-link-hover-color:      darken($theme-color-darker, 5%) !default;

sass/open-edx/_variables.scss

@@ -3,7 +3,6 @@
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
-
 //
 // Color system
 //
@@ -159,6 +158,7 @@ $grid-breakpoints: (
   lg: 992px,
   xl: 1200px
 ) !default;
+
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints);
 
@@ -173,6 +173,7 @@ $container-max-widths: (
   lg: 960px,
   xl: 1140px
 ) !default;
+
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 
 
@@ -188,7 +189,7 @@ $container-max-widths: (
 // Define common padding and border radius sizes and more.
 
 $line-height-lg:         1.5 !default;
-$line-height-sm:         1.0 !default;
+$line-height-sm:         1 !default;
 
 $border-width: 1px !default;
 $border-color: theme-color("light") !default;
@@ -317,9 +318,9 @@ $input-btn-padding-x-lg:    1rem !default;
 $input-btn-line-height-lg:  1.5 !default;
 
 $btn-font-weight:                $font-weight-normal !default;
-$btn-box-shadow:                 inset 0 1px 0 rgba($theme-color-inverse,.15), 0 1px 1px rgba($theme-color-darkest,.075) !default;
+$btn-box-shadow:                 inset 0 1px 0 rgba($theme-color-inverse, .15), 0 1px 1px rgba($theme-color-darkest, .075) !default;
 $btn-focus-box-shadow:           0 0 0 3px rgba($theme-color-primary, .25) !default;
-$btn-active-box-shadow:          inset 0 3px 5px rgba($theme-color-darkest,.125) !default;
+$btn-active-box-shadow:          inset 0 3px 5px rgba($theme-color-darkest, .125) !default;
 
 $btn-link-disabled-color:        theme-colors("disabled") !default;
 
@@ -339,9 +340,9 @@ $input-bg:                       $white !default;
 $input-disabled-bg:              theme-color("light") !default;
 
 $input-color:                    $gray-700 !default;
-$input-border-color:             rgba($theme-color-darkest,.15) !default;
+$input-border-color:             rgba($theme-color-darkest, .15) !default;
 $input-btn-border-width:         $border-width !default; // For form controls and buttons
-$input-box-shadow:               inset 0 1px 1px rgba($theme-color-darkest,.075) !default;
+$input-box-shadow:               inset 0 1px 1px rgba($theme-color-darkest, .075) !default;
 
 $input-border-radius:            $border-radius !default;
 $input-border-radius-lg:         $border-radius-lg !default;
@@ -476,10 +477,10 @@ $dropdown-min-width:             10rem !default;
 $dropdown-padding-y:             .5rem !default;
 $dropdown-spacer:                .125rem !default;
 $dropdown-bg:                    $white !default;
-$dropdown-border-color:          rgba($theme-color-darkest,.15) !default;
+$dropdown-border-color:          rgba($theme-color-darkest, .15) !default;
 $dropdown-border-width:          $border-width !default;
 $dropdown-divider-bg:            theme-color("light") !default;
-$dropdown-box-shadow:            0 .5rem 1rem rgba($theme-color-darkest,.175) !default;
+$dropdown-box-shadow:            0 .5rem 1rem rgba($theme-color-darkest, .175) !default;
 
 $dropdown-link-color:            theme-color("darkest") !default;
 $dropdown-link-hover-color:      darken($theme-color-darkest, 5%) !default;

stylelint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'stylelint-config-edx'
+};