From d41e8786f11b247a0c3d0f726a9b4e8c20031000 Mon Sep 17 00:00:00 2001 From: Marcin Kwiatkowski Date: Mon, 20 Mar 2017 12:16:13 +0100 Subject: [PATCH] Add sasslint --- .sass-lint.yml | 49 +++++++++++++++++++++++ package.json | 4 +- src/assets/styles/atoms/_buttons.scss | 2 +- src/assets/styles/base/_variables.scss | 2 +- src/assets/styles/organisms/_header.scss | 2 +- src/assets/styles/vendor/_burger.scss | 51 +++++++----------------- 6 files changed, 69 insertions(+), 41 deletions(-) create mode 100644 .sass-lint.yml diff --git a/.sass-lint.yml b/.sass-lint.yml new file mode 100644 index 0000000..d4123bc --- /dev/null +++ b/.sass-lint.yml @@ -0,0 +1,49 @@ +files: + include: + - 'src/**/*.s+(a|c)ss' + +# Linter Options +options: + merge-default-rules: false + +# Rule Configuration +rules: + brace-style: + - 2 + - + style: 'stroustrup' + clean-import-paths: 2 + extends-before-declarations: 2 + extends-before-mixins: 2 + final-newline: 2 + indentation: + - 2 + - + size: 4 + leading-zero: + - 2 + - + include: true + no-css-comments: 2 + no-debug: 1 + no-empty-rulesets: 2 + no-ids: 1 + no-important: 1 + no-invalid-hex: 2 + no-misspelled-properties: + - 2 + - + extra-properties: + - 'touch-callout' + - 'overflow-scrolling' + no-vendor-prefixes: 1 + no-warn: 1 + one-declaration-per-line: 2 + single-line-per-selector: 2 + space-after-colon: 2 + space-after-comma: 2 + space-around-operator: 2 + space-before-bang: 2 + space-before-brace: 2 + trailing-semicolon: 2 + zero-unit: 2 diff --git a/package.json b/package.json index ec58657..db17748 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "eslint": "./node_modules/.bin/eslint src/*.js", "accessibility": "node ./dev/accessibility-validation.js", "htmllint": "node ./dev/html-validator.js", - "test": "npm run build && karma start && npm run eslint && npm run accessibility && npm run htmllint", + "sasslint": "node ./node_modules/sass-lint/bin/sass-lint.js -v -q", + "test": "npm run build && karma start && npm run eslint && npm run accessibility && npm run htmllint && npm run sasslint", "build": "rm -rf dist/ && webpack -p" }, "keywords": [ @@ -41,6 +42,7 @@ "karma-webpack": "^2.0.3", "node-sass": "^4.5.0", "postcss-loader": "^1.3.3", + "sass-lint": "^1.10.2", "sass-loader": "^6.0.3", "style-loader": "^0.13.2", "url-loader": "^0.5.8", diff --git a/src/assets/styles/atoms/_buttons.scss b/src/assets/styles/atoms/_buttons.scss index 86697ea..2e29a5c 100644 --- a/src/assets/styles/atoms/_buttons.scss +++ b/src/assets/styles/atoms/_buttons.scss @@ -6,7 +6,7 @@ font-weight: $action-default-font-weight; padding: $indent-base $indent-xl; text-decoration: none; - transition: all .3s; + transition: all 0.3s; &.primary { border-color: $action-primary-border; diff --git a/src/assets/styles/base/_variables.scss b/src/assets/styles/base/_variables.scss index ab4153c..90765ef 100644 --- a/src/assets/styles/base/_variables.scss +++ b/src/assets/styles/base/_variables.scss @@ -40,4 +40,4 @@ $action-primary-border: $color-primary; $action-secondary-color: $color-white; $action-secondary-bg: $color-secondary; -$action-secondary-border: $color-secondary; \ No newline at end of file +$action-secondary-border: $color-secondary; diff --git a/src/assets/styles/organisms/_header.scss b/src/assets/styles/organisms/_header.scss index 259edf6..f5485b0 100644 --- a/src/assets/styles/organisms/_header.scss +++ b/src/assets/styles/organisms/_header.scss @@ -8,4 +8,4 @@ display: flex; justify-content: space-around; } -} \ No newline at end of file +} diff --git a/src/assets/styles/vendor/_burger.scss b/src/assets/styles/vendor/_burger.scss index e44a447..d3e045f 100644 --- a/src/assets/styles/vendor/_burger.scss +++ b/src/assets/styles/vendor/_burger.scss @@ -5,27 +5,21 @@ // (---) bottom -> &::after -// Vendor prefixes -$sass-burger-add-vendor-prefixes: true !default; // Burger -@mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: .3s) { +@mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: 0.3s) { $burger-height: $height !global; $burger-gutter: $gutter !global; position: relative; margin-top: $height + $gutter; margin-bottom: $height + $gutter; - - @if $sass-burger-add-vendor-prefixes { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - } user-select: none; // 1. Fixes jagged edges in Firefox, see issue #10. - &, &::before, &::after { + &, + &::before, + &::after { display: block; width: $width; height: $height; @@ -34,23 +28,12 @@ $sass-burger-add-vendor-prefixes: true !default; @if $border-radius != 0 { border-radius: $border-radius; } - - @if $sass-burger-add-vendor-prefixes { - -webkit-transition-property: background-color, -webkit-transform; - -moz-transition-property: background-color, -moz-transform; - -o-transition-property: background-color, -o-transform; - } transition-property: background-color, transform; - - @if $sass-burger-add-vendor-prefixes { - -webkit-transition-duration: $transition-duration; - -moz-transition-duration: $transition-duration; - -o-transition-duration: $transition-duration; - } transition-duration: $transition-duration; } - &::before, &::after { + &::before, + &::after { position: absolute; content: ""; } @@ -67,7 +50,9 @@ $sass-burger-add-vendor-prefixes: true !default; // Select parts of the burger @mixin burger-parts { - &, &::before, &::after { + &, + &::before, + &::after { @content; } } @@ -96,27 +81,19 @@ $sass-burger-add-vendor-prefixes: true !default; & { background-color: transparent; } + @if ($color != auto) { - &::before, &::after { + &::before, + &::after { background-color: $color; } } + &::before { - @if $sass-burger-add-vendor-prefixes { - -webkit-transform: translateY($burger-gutter + $burger-height) rotate(45deg); - -moz-transform: translateY($burger-gutter + $burger-height) rotate(45deg); - -ms-transform: translateY($burger-gutter + $burger-height) rotate(45deg); - -o-transform: translateY($burger-gutter + $burger-height) rotate(45deg); - } transform: translateY($burger-gutter + $burger-height) rotate(45deg); } + &::after { - @if $sass-burger-add-vendor-prefixes { - -webkit-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); - -moz-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); - -ms-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); - -o-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); - } transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); } }