Adds styelint linting for scss

.stylelintrc

@@ -0,0 +1,79 @@
+{
+	"plugins": [
+		"stylelint-scss"
+	],
+	"rules": {
+		"string-quotes": "double",
+		"color-hex-case": "lower",
+		"color-hex-length": "short",
+		"color-no-invalid-hex": true,
+		"number-leading-zero": never,
+		"number-no-trailing-zeros": true,
+		"function-calc-no-unspaced-operator": true,
+		"function-comma-newline-after": "always-multi-line",
+		"function-comma-space-after": "always-single-line",
+		"function-comma-space-before": "never",
+		"function-parentheses-newline-inside": "always-multi-line",
+		"function-parentheses-space-inside": "never-single-line",
+		"function-whitespace-after": "always",
+		"value-no-vendor-prefix": true,
+		"value-list-comma-newline-after": "always-multi-line",
+		"value-list-comma-space-after": "always-single-line",
+		"value-list-comma-space-before": "never",
+		"declaration-bang-space-after": "never",
+		"declaration-bang-space-before": "always",
+		"declaration-block-semicolon-newline-after": "always-multi-line",
+		"declaration-block-semicolon-space-after": "always-single-line",
+		"declaration-block-semicolon-space-before": "never",
+		"declaration-block-single-line-max-declarations": 1,
+		"declaration-colon-space-after": "always-single-line",
+		"declaration-colon-space-before": "never",
+		"block-closing-brace-newline-after": [
+			"always", {
+			"ignoreAtRules": [ "if", "else", "elseif" ]
+			}
+		],
+		"block-closing-brace-newline-before": "always-multi-line",
+		"block-closing-brace-space-before": "always-single-line",
+		"block-no-empty": true,
+		"block-opening-brace-newline-after": "always-multi-line",
+		"block-opening-brace-space-after": "always-single-line",
+		"block-opening-brace-space-before": "always",
+		"selector-combinator-space-after": "always",
+		"selector-combinator-space-before": "always",
+		"selector-list-comma-space-before": "never",
+		"selector-pseudo-element-colon-notation": "double",
+		"declaration-block-no-shorthand-property-overrides": true,
+		"declaration-block-trailing-semicolon": "always",
+		"declaration-block-no-duplicate-properties": true,
+		"media-feature-colon-space-after": "always",
+		"media-feature-colon-space-before": "never",
+		"media-feature-range-operator-space-after": "always",
+		"media-feature-range-operator-space-before": "always",
+		"media-query-list-comma-newline-after": "always-multi-line",
+		"media-query-list-comma-space-after": "always-single-line",
+		"media-query-list-comma-space-before": "never",
+		"media-feature-parentheses-space-inside": "never",
+		"at-rule-empty-line-before": [ "always", {
+			except: [
+				"blockless-after-blockless",
+				"blockless-after-same-name-blockless",
+				"first-nested",
+			],
+			ignore: ["after-comment"],
+			"ignoreAtRules": [ "else", "elseif" ]
+		} ],
+		"indentation": 2,
+		"max-empty-lines": 1,
+		"no-missing-end-of-source-newline": true,
+		"comment-empty-line-before": [ "always", {
+			ignore: ["stylelint-commands"]
+		} ],
+		"comment-whitespace-inside": "always",
+		"scss/at-else-closing-brace-newline-after": "always-last-in-chain",
+		"scss/at-else-closing-brace-space-after": "always-intermediate",
+		"scss/at-else-empty-line-before": "never",
+		"scss/at-if-closing-brace-newline-after": "always-last-in-chain",
+		"scss/at-if-closing-brace-space-after": "always-intermediate"
+	}
+}

.travis.yml

@@ -68,3 +68,4 @@ script:
     - phpunit
 	# Run linting
 	- npm run lint-scripts
+	- npm run lint-styles

package.json

@@ -54,6 +54,8 @@
     "sass-module-importer": "^1.4.0",
     "sass-mq": "^3.3.2",
     "style-loader": "^0.18.2",
+    "stylelint": "^8.2.0",
+    "stylelint-scss": "^2.1.0",
     "webpack": "^3.3.0"
   },
   "scripts": {

src/styles/core.scss

@@ -1,8 +1,8 @@
 // Utils
-@import 'core/utils/defaults';
-@import 'core/utils/colors';
+@import "core/utils/defaults";
+@import "core/utils/colors";
 @import "~sass-mq/mq";
 // Core Styles
-@import 'core/utils/animations';
-@import 'core/app/all';
-@import 'core/editor/all';
+@import "core/utils/animations";
+@import "core/app/all";
+@import "core/editor/all";

src/styles/core/app/_all.scss

@@ -1,9 +1,5 @@
-@import './buttons';
-@import './feed';
-@import './event';
-@import './pagination';
-@import './entry';
-
-
-
-
+@import "./buttons";
+@import "./feed";
+@import "./event";
+@import "./pagination";
+@import "./entry";

src/styles/core/app/_buttons.scss

@@ -7,14 +7,14 @@
  * 4. Prevent button text from being selectable.
  * 5. Make sure `input` will wrap text across multiple lines.
  */
- .liveblog-btn {
+.liveblog-btn {
   -webkit-appearance: none; /* 1 */
   box-sizing: border-box; /* 2 */
   display: inline-block;
   vertical-align: middle;
+  font: inherit;
   line-height: normal; /* 3 */
   text-align: center;
-  font: inherit;
   text-decoration: none;
   border: none;
   cursor: pointer;

src/styles/core/app/_entry.scss

@@ -5,8 +5,8 @@
 }
 
 .liveblog-meta {
-	display: flex;
-	flex-wrap: nowrap;
+  display: flex;
+  flex-wrap: nowrap;
   align-items: flex-start;
 }
 
@@ -21,7 +21,7 @@
 }
 
 .liveblog-meta-author-avatar img {
-	width: 30px;
+  width: 30px;
   height: 30px;
 }
 

src/styles/core/app/_feed.scss

@@ -1,6 +1,6 @@
 .liveblog-feed {
   min-height: 200px;
-	position: relative;
+  position: relative;
 }
 
 .liveblog-feed.is-loading::after {

src/styles/core/app/_pagination.scss

@@ -18,5 +18,5 @@
 
 .liveblog-pagination-pages {
   font-size: 13px;
-	line-height: 12px;
+  line-height: 12px;
 }

src/styles/core/editor/_all.scss

@@ -1,15 +1,9 @@
-@import './buttons';
-@import './container';
-@import './input';
-@import './toolbar';
-@import './popover';
-@import './tabs';
-@import './loader';
-@import './placeholder';
-@import './emoji';
-
-
-
-
-
-
+@import "./buttons";
+@import "./container";
+@import "./input";
+@import "./toolbar";
+@import "./popover";
+@import "./tabs";
+@import "./loader";
+@import "./placeholder";
+@import "./emoji";

src/styles/core/editor/_input.scss

@@ -19,7 +19,7 @@
 
 .liveblog-editor-input-container::after {
   content: "";
-  position : absolute;
+  position: absolute;
   left: 12%;
   top: -5px;
   width: 0;
@@ -30,7 +30,7 @@
   transform: rotate(-45deg);
 
   @include mq($until: small) {
-   left: 67%;
+    left: 67%;
   }
 }
 

src/styles/core/editor/_loader.scss

@@ -1,9 +1,6 @@
-// Spinner....
-
 .spinner {
   width: 15px;
   height: 15px;
-
   position: relative;
 }
 
@@ -12,31 +9,31 @@
   height: 100%;
   border-radius: 50%;
   background-color: $color-grey-light;
-  opacity: 0.6;
+  opacity: .6;
   position: absolute;
   top: 0;
   left: 0;
-
-  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
-  animation: sk-bounce 2.0s infinite ease-in-out;
+  -webkit-animation: sk-bounce 2s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
 }
 
 .double-bounce2 {
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
 }
 
 @-webkit-keyframes sk-bounce {
-  0%, 100% { -webkit-transform: scale(0.0) }
-  50% { -webkit-transform: scale(1.0) }
+  0%, 100% { -webkit-transform: scale(0); }
+  50% { -webkit-transform: scale(1); }
 }
 
 @keyframes sk-bounce {
   0%, 100% {
-    transform: scale(0.0);
-    -webkit-transform: scale(0.0);
-  } 50% {
-    transform: scale(1.0);
-    -webkit-transform: scale(1.0);
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
   }
 }

src/styles/core/editor/_tabs.scss

@@ -23,7 +23,7 @@
 }
 
 .liveblog-editor-tab.is-active::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 100%;
   left: 0;

src/styles/core/utils/_colors.scss

@@ -1,9 +1,7 @@
 // Main colors
-
-$color-primary: #21759B;
+$color-primary: #21759b;
 $color-secondary: #2196f3;
 $color-accent: #2196f3;
-
 $color-warning: #bc0b0b;
 
 // Grey colors

src/styles/theme.scss

@@ -1,6 +1,6 @@
 // Utils
-@import 'core/utils/defaults';
-@import 'core/utils/colors';
+@import "core/utils/defaults";
+@import "core/utils/colors";
 @import "~sass-mq/mq";
 
 /**
@@ -49,7 +49,7 @@
 }
 
 .liveblog-meta-author-name {
-	font-size: 13px;
+  font-size: 13px;
   margin-left: 8px;
 }
 
@@ -82,7 +82,7 @@
 
 .liveblog-event::before,
 .liveblog-event:only-child::before, {
-  content: '';
+  content: "";
   position: absolute;
   z-index: 1;
   left: -4.5px;
@@ -94,7 +94,7 @@
 }
 
 .liveblog-event::after {
-  content: '';
+  content: "";
   position: absolute;
   z-index: 0;
   left: 0;