Lint styles

.stylelintrc.yml

@@ -0,0 +1,6 @@
+extends:
+  - stylelint-config-standard
+  - stylelint-config-sass-guidelines
+
+rules:
+  order/declaration-block-properties-alphabetical-order: null

gulp/tasks/lint.js

@@ -0,0 +1,26 @@
+const merge = require('merge-stream');
+
+module.exports = (gulp, $, config) => {
+  const toolingGlob = config.entryGlobs.tooling;
+  const scriptsGlobs = config.watchGlobs.scripts;
+  const stylesGlobs = config.watchGlobs.styles;
+
+  const task = () => {
+    const scriptsStream = gulp.src(toolingGlob.concat(scriptsGlobs))
+      .pipe($.eslint())
+      .pipe($.eslint.format())
+      ;
+
+    const stylesStream = gulp.src(stylesGlobs)
+      .pipe($.stylelint({
+        reporters: [
+          { formatter: 'string', console: true }
+        ]
+      }));
+
+    return merge(scriptsStream, stylesStream);
+  };
+
+  task.description = 'Lints script and styles.';
+  return task;
+};

gulpfile.js

@@ -63,8 +63,8 @@ gulp.task('test', gulp.parallel('test:unit'));
 // Serve the build folder
 gulp.task('serve', t.getTask('serve'));
 
-// Lints the tooling files.
-gulp.task('tooling', t.getTask('tooling'));
+// Lints scripts and styles.
+gulp.task('lint', t.getTask('lint'));
 
 // What happens when just running 'gulp'
 gulp.task(

package.json

@@ -9,6 +9,7 @@
     "build": "NODE_ENV=production gulp build",
     "test": "gulp test",
     "test:watch": "npm run test -- --watchAll",
+    "lint": "gulp lint",
     "serve": "gulp serve"
   },
   "dependencies": {
@@ -44,6 +45,7 @@
     "gulp-sass": "^3.1.0",
     "gulp-sass-glob": "^1.0.8",
     "gulp-sourcemaps": "^2.4.1",
+    "gulp-stylelint": "^3.9.0",
     "gulp-svg-sprite": "^1.3.6",
     "gulp-sync": "^0.1.4",
     "jade-inline-file": "^0.1.0",
@@ -54,6 +56,8 @@
     "merge-stream": "^1.0.1",
     "pug": "^2.0.0-beta11",
     "pug-include-glob": "^0.3.2",
+    "stylelint-config-sass-guidelines": "^2.0.0",
+    "stylelint-config-standard": "^16.0.0",
     "uuid": "^3.0.1",
     "webpack": "^2.2.1",
     "webpack-stream": "^3.2.0",

src/elements/base/style.scss

@@ -1,11 +1,10 @@
-body, html {
+body,
+html {
   margin: 0;
   padding: 0;
-
   color: $c-white;
   text-align: center;
   line-height: 1.5;
-
   background: $c-eigengrau;
 
   /**

src/elements/card/style.scss

@@ -20,16 +20,15 @@
   }
 }
 
-
 .card-background {
   display: block;
   position: absolute;
   width: 100%;
-  top: 50%; left: 0;
+  top: 50%;
+  left: 0;
   transform: translate(0, -50%);
 }
 
-
 @include breakpoint(mobile) {
   .card {
     &--right-mobile {

src/elements/layout/style.scss

@@ -26,32 +26,30 @@
 .l-panorama,
 .l-square,
 .l-landscape {
-  &:before {
-    content: "";
+  &::before {
+    content: '';
     display: block;
   }
 }
 
 .l-panorama {
-  &:before {
+  &::before {
     padding-top: 50%;
   }
 }
 
 .l-square {
-  &:before {
+  &::before {
     padding-top: 100%;
   }
 }
 
 .l-landscape {
-  &:before {
+  &::before {
     padding-top: 75%;
   }
 }
 
-
-
 @include breakpoint(mobile) {
   .l-one-whole-mobile {
     width: 100%;
@@ -70,27 +68,29 @@
   }
 
   .l-panorama-mobile {
-    &:before{
+    &::before {
       padding-top: 50%;
     }
   }
 
   .l-square-mobile {
-    &:before {
+    &::before {
       padding-top: 100%;
     }
   }
 
   .l-landscape-mobile {
-    &:before {
+    &::before {
       padding-top: 75%;
     }
   }
 }
 
 .l-absolute-centered {
   position: absolute;
-  top: 50%; left: 10%; right: 10%;
+  top: 50%;
+  left: 10%;
+  right: 10%;
   max-height: 80%;
   transform: translate(0, -50%);
 }

src/elements/typography/style.scss

@@ -4,6 +4,7 @@
 
 .t-title {
   @include base-font;
+
   font-size: 5rem;
   line-height: 1.25;
   margin: 0;

src/layouts/default/style.scss

@@ -1,3 +1,3 @@
-@import "../../materials/**/*.scss";
-@import "../../elements/**/*.scss";
-@import "../../components/**/*.scss";
+@import '../../materials/**/*';
+@import '../../elements/**/*';
+@import '../../components/**/*';

src/materials/breakpoints/style.scss

@@ -1,13 +1,13 @@
-@import "sensible/mediaqueries";
+@import 'sensible/mediaqueries';
 
 /**
  * Define the breakpoints for vendor/sensible/mediaqueries
  * They are defined the mobile first way
  */
 
 $breakpoints: (
-    "mobile"              : "only screen and (max-width:740px)",
-    "tablet"              : "only screen and (max-width:1050px)",
-    "desktop"             : "only screen and (min-width:1051px)",
-    "print"               : "print"
+  'mobile' : 'only screen and (max-width:740px)',
+  'tablet' : 'only screen and (max-width:1050px)',
+  'desktop' : 'only screen and (min-width:1051px)',
+  'print' : 'print'
 );

src/materials/colors/style.scss

@@ -2,10 +2,10 @@
  * Color variables
  */
 
-$c-eigengrau:      #16161D;
-$c-graphite:       #666;
-$c-silver:         #eee;
-$c-white:          #fff;
-$c-red:            #E00202;
+$c-eigengrau: #16161d;
+$c-graphite: #666;
+$c-silver: #eee;
+$c-white: #fff;
+$c-red: #e00202;
 
-$c-cover:          rgba(0,0,0,0.5);
+$c-cover: rgba(0, 0, 0, 0.5);

src/materials/fonts/style.scss

@@ -1,14 +1,14 @@
 /**
  * Typography settings
  */
-$base-font-size   : 1em;
-$base-font-family : sans-serif;
-$base-font-weight : 300;
-$base-font-style  : normal;
-$base-line-height : 1.5;
+$base-font-size: 1em;
+$base-font-family: sans-serif;
+$base-font-weight: 300;
+$base-font-style: normal;
+$base-line-height: 1.5;
 
 @mixin base-font() {
   font-family: $base-font-family;
   font-weight: $base-font-weight;
-  font-style : $base-font-style;
+  font-style: $base-font-style;
 }