Adds stylelinting

Author: jedrzejchalubek

.stylelintrc

@@ -0,0 +1,7 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "rules": {
+    "indentation": 4,
+    "no-missing-end-of-source-newline": null
+  }
+}

build/app.config.js

@@ -52,6 +52,7 @@ module.exports = merge({
      */
     settings: {
         sourceMaps: true,
+        styleLint: true,
         browserSync: {
             host: 'localhost',
             port: 3000,

build/rules/sass.js

@@ -1,4 +1,5 @@
 const isdev = require('isdev')
+const stylelint = require("stylelint")
 const autoprefixer = require('autoprefixer')
 
 const ExtractTextPlugin = require("extract-text-webpack-plugin")

build/webpack.config.js

@@ -4,6 +4,7 @@ const webpack = require('webpack')
 const autoprefixer = require('autoprefixer')
 
 const CleanWebpackPlugin = require('clean-webpack-plugin')
+const StyleLintPlugin = require('stylelint-webpack-plugin')
 const ExtractTextPlugin = require("extract-text-webpack-plugin")
 const BrowserSyncPlugin = require("browser-sync-webpack-plugin")
 
@@ -46,6 +47,12 @@ module.exports = {
     ]
 }
 
+if (config.settings.styleLint) {
+    module.exports.plugins.push(
+        new StyleLintPlugin()
+    )
+}
+
 if (config.settings.browserSync) {
     module.exports.plugins.push(
         new BrowserSyncPlugin(config.settings.browserSync)

package.json

@@ -29,6 +29,8 @@
     "postcss-loader": "^1.3.3",
     "sass-loader": "^6.0.3",
     "style-loader": "^0.16.1",
+    "stylelint-config-sass-guidelines": "^2.1.0",
+    "stylelint-webpack-plugin": "^0.7.0",
     "webpack": "^2.3.3",
     "webpack-dev-server": "^2.4.4",
     "webpack-merge": "^4.1.0"

resources/assets/sass/_settings.scss

@@ -50,11 +50,11 @@ $global-font-size: 100%;
 $global-width: rem-calc(1200);
 $global-lineheight: 1.5;
 $foundation-palette: (
-  primary: #1779ba,
-  secondary: #767676,
-  success: #3adb76,
-  warning: #ffae00,
-  alert: #cc4b37,
+    primary: #1779ba,
+    secondary: #767676,
+    success: #3adb76,
+    warning: #ffae00,
+    alert: #cc4b37,
 );
 $light-gray: #e6e6e6;
 $medium-gray: #cacaca;
@@ -80,11 +80,11 @@ $print-transparent-backgrounds: true;
 // --------------
 
 $breakpoints: (
-  small: 0,
-  medium: 640px,
-  large: 1024px,
-  xlarge: 1200px,
-  xxlarge: 1440px,
+    small: 0,
+    medium: 640px,
+    large: 1024px,
+    xlarge: 1200px,
+    xxlarge: 1440px,
 );
 $print-breakpoint: large;
 $breakpoint-classes: (small medium large);
@@ -95,8 +95,8 @@ $breakpoint-classes: (small medium large);
 $grid-row-width: $global-width;
 $grid-column-count: 12;
 $grid-column-gutter: (
-  small: 20px,
-  medium: 30px,
+    small: 20px,
+    medium: 30px,
 );
 $grid-column-align-edge: true;
 $block-grid-max: 8;
@@ -112,22 +112,22 @@ $header-color: inherit;
 $header-lineheight: 1.4;
 $header-margin-bottom: 0.5rem;
 $header-styles: (
-  small: (
-    'h1': ('font-size': 24),
-    'h2': ('font-size': 20),
-    'h3': ('font-size': 19),
-    'h4': ('font-size': 18),
-    'h5': ('font-size': 17),
-    'h6': ('font-size': 16),
-  ),
-  medium: (
-    'h1': ('font-size': 48),
-    'h2': ('font-size': 40),
-    'h3': ('font-size': 31),
-    'h4': ('font-size': 25),
-    'h5': ('font-size': 20),
-    'h6': ('font-size': 16),
-  ),
+    small: (
+        'h1': ('font-size': 24),
+        'h2': ('font-size': 20),
+        'h3': ('font-size': 19),
+        'h4': ('font-size': 18),
+        'h5': ('font-size': 17),
+        'h6': ('font-size': 16),
+    ),
+    medium: (
+        'h1': ('font-size': 48),
+        'h2': ('font-size': 40),
+        'h3': ('font-size': 31),
+        'h4': ('font-size': 25),
+        'h5': ('font-size': 20),
+        'h6': ('font-size': 16),
+    ),
 );
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
@@ -249,10 +249,10 @@ $button-color: $white;
 $button-color-alt: $black;
 $button-radius: $global-radius;
 $button-sizes: (
-  tiny: 0.6rem,
-  small: 0.75rem,
-  default: 0.9rem,
-  large: 1.25rem,
+    tiny: 0.6rem,
+    small: 0.75rem,
+    default: 0.9rem,
+    large: 1.25rem,
 );
 $button-palette: $foundation-palette;
 $button-opacity-disabled: 0.25;
@@ -299,16 +299,16 @@ $card-margin: $global-margin;
 
 $closebutton-position: right top;
 $closebutton-offset-horizontal: (
-  small: 0.66rem,
-  medium: 1rem,
+    small: 0.66rem,
+    medium: 1rem,
 );
 $closebutton-offset-vertical: (
-  small: 0.33em,
-  medium: 0.5rem,
+    small: 0.33em,
+    medium: 0.5rem,
 );
 $closebutton-size: (
-  small: 1.5em,
-  medium: 2em,
+    small: 1.5em,
+    medium: 2em,
 );
 $closebutton-lineheight: 1;
 $closebutton-color: $dark-gray;
@@ -333,9 +333,9 @@ $dropdown-font-size: 1rem;
 $dropdown-width: 300px;
 $dropdown-radius: $global-radius;
 $dropdown-sizes: (
-  tiny: 100px,
-  small: 200px,
-  large: 400px,
+    tiny: 100px,
+    small: 200px,
+    large: 400px,
 );
 
 // 18. Dropdown Menu
@@ -491,8 +491,8 @@ $progress-radius: $global-radius;
 
 $responsive-embed-margin-bottom: rem-calc(16);
 $responsive-embed-ratios: (
-  default: 4 by 3,
-  widescreen: 16 by 9,
+    default: 4 by 3,
+    widescreen: 16 by 9,
 );
 
 // 29. Reveal

resources/assets/sass/app.scss

@@ -1,7 +1,7 @@
 // Fonts
 
 // Variables, Mixins and Utilities
-@import "variables";
-@import "settings";
+@import 'settings';
+@import 'variables';
 
 // Theme components