Css linting (#66)

* creating css .stylelintrc file

(cherry picked from commit df0a573666151fb522cb203f82a7a6a979fc33cc)

* updating lintfile

(cherry picked from commit 623ad22d69566a912988239c05d2f803e735362f)

* ignore base bootstrap styles

(cherry picked from commit 0ea94926a004367a67983b08a8ea47c974ef6e49)

* Working on making css inline with css linting

(cherry picked from commit 259fdfcaf9ae280e664471c7d5278214d991168e)

* removing generic class names and nesting for clear names without nesting

(cherry picked from commit d0427c2c09771df049ed9ab4e7b5d2f2076106fd)

* making components compatable with new css lint

(cherry picked from commit b147f157c3b9b39708a750f281d8278211454137)

* updating csslint file

(cherry picked from commit 53b0480476b6e5c4d94763baeaef7d33e9c2342d)

* adding alphabetical ordering to stylelint and updating css files with this

(cherry picked from commit a6b7860efa01e673df20546bb5830587eeb140d6)

* integrate stylelint with webpack

this way we can integrate postcss plugins

# Conflicts:
#	ui/yarn.lock

* exit process with 1, when stylelint finds issues

* listen to unhandled rejection from stylelint

* use stylelintignore

* fix stylelint raised issues

ui/.stylelintignore

@@ -0,0 +1,8 @@
+/src/components/base/*.css
+/node_modules
+coverage
+.nyc_output
+docs/static
+static
+webpack/embed-markdown-loader
+

ui/.stylelintrc

@@ -0,0 +1,50 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "color-hex-case": "upper",
+    "color-hex-length": "long",
+    "font-family-name-quotes": "always-where-recommended",
+    "string-quotes": "double",
+    "value-list-comma-space-after": "always",
+    "custom-property-no-outside-root": true,
+    "property-no-unknown": [true, {
+      "ignoreProperties": [
+        "",
+        "composes"
+      ]
+    }],
+    "declaration-colon-space-after": "always",
+    "declaration-no-important": true,
+    "declaration-block-no-duplicate-properties": true,
+    "declaration-block-properties-order": "alphabetical",
+    "declaration-block-semicolon-newline-after": "always",
+    "block-closing-brace-newline-after": "always-single-line",
+    "block-closing-brace-newline-before": "always",
+    "block-no-single-line": true,
+    "block-opening-brace-newline-after": "always",
+    "selector-attribute-quotes": "always",
+    "selector-max-compound-selectors": 3,
+    "selector-no-attribute": true,
+    "selector-no-id": true,
+    "selector-no-universal": true,
+    "selector-pseudo-class-parentheses-space-inside": "always",
+    "selector-list-comma-newline-before": "never-multi-line",
+    "selector-list-comma-space-before": "always-single-line",
+    "media-feature-parentheses-space-inside": "always",
+    "at-rule-name-space-after": "always",
+    "at-rule-no-unknown": [true, {
+      "ignoreAtRules": [
+        "/mixin|for/",
+        ""
+      ]
+    }],
+    "max-nesting-depth": 3,
+    "no-descending-specificity": true,
+    "no-duplicate-selectors": true,
+    "no-unknown-animations": true,
+    "custom-property-empty-line-before": null,
+    "selector-pseudo-class-no-unknown": [true, {
+      "ignorePseudoClasses": ["global", "$"]
+    }]
+  }
+}

ui/Makefile

@@ -54,6 +54,7 @@ clean:
 .PHONY: lint
 lint:
 	$(bindir)/eslint .
+	./scripts/stylelint
 
 .PHONY: lint-ci
 lint-ci:

ui/package.json

@@ -53,6 +53,7 @@
     "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "json-loader": "^0.5.4",
     "lodash.get": "^4.4.2",
+    "memory-fs": "^0.3.0",
     "nyc": "^8.3.1",
     "param-case": "^2.1.0",
     "postcss-at-rules-variables": "0.0.25",
@@ -72,6 +73,9 @@
     "react-router": "^4.0.0-alpha.4",
     "st": "^1.2.0",
     "style-loader": "^0.13.1",
+    "stylelint": "^7.5.0",
+    "stylelint-config-standard": "^14.0.0",
+    "stylelint-webpack-plugin": "^0.4.0",
     "tap-xunit": "^1.4.0",
     "title-case": "^2.1.0",
     "webpack": "^2.1.0-beta.25",

ui/scripts/stylelint

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+
+const StyleLintPlugin = require('stylelint-webpack-plugin');
+const webpack = require('webpack');
+const MemoryFS = require('memory-fs');
+const config = require('../webpack');
+
+const mfs = new MemoryFS();
+const compiler = webpack(Object.assign(config, {
+  plugins: config.plugins.concat([
+    new StyleLintPlugin({
+      configFile: '.stylelintrc',
+      files: [
+        '**/*.css'
+      ],
+      failOnError: true
+    })
+  ])
+}));
+
+mfs.mkdirpSync(config.output.path);
+compiler.outputFileSystem = mfs;
+
+compiler.run((err, stats) => {
+  if (err) {
+    throw err;
+  }
+});
+
+process.on('unhandledRejection', () => {
+  process.exit(1);
+});

ui/src/components/avatar/style.css

@@ -1,10 +1,10 @@
 .avatar {
   border-radius: 50%;
-  height: remCalc(50);
+  height: remcalc(50);
   overflow: hidden;
-  text-align: center;
-  width: remCalc(50);
   position: relative;
+  text-align: center;
+  width: remcalc(50);
 }
 
 .letter {
@@ -12,7 +12,6 @@
 }
 
 .picture {
+  composes: verticle_align_center from "../../shared/composers.css";
   max-width: 60%;
-
-  composes: verticle_align_center from '../../shared/composers.css';
 }

ui/src/components/base/style.css

@@ -31,8 +31,8 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.5;
-  color: #373a3c;
+  color: #373A3C;
-  background-color: #fff;
+  background-color: #FFFFFF;
 
   & :global {
 
@@ -593,4 +593,3 @@
     }
   }
 }
-

ui/src/components/button/style.css

@@ -3,11 +3,11 @@
 
 :root {
   --primary-background: ~colors.brandPrimary;
-  --primary-border: #2532bb;
+  --primary-border: #2532BB;
-  --primary-color: #ffffff;
+  --primary-color: #FFFFFF;
 
-  --secondary-backgroud: #ffffff;
+  --secondary-backgroud: #FFFFFF;
-  --secondary-border: #d8d8d8;
+  --secondary-border: #D8D8D8;
   --secondary-color: #646464;
 
   --inactive-background: #F9F9F9;
@@ -22,12 +22,12 @@
 }
 
 .button {
-  border-radius: remCalc(~boxes.borderRadius);
+  border-radius: remcalc(~boxes.borderRadius);
   box-shadow: ~boxes.bottomShaddow;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-size: remCalc(16);
+  font-size: remcalc(16);
-  min-width: remCalc(120);
+  min-width: remcalc(120);
-  padding: remCalc(18 24);
+  padding: remcalc(18 24);
 
   &.primary {
     @add-mixin button var(--primary-background), var(--primary-border), var(--primary-color);

ui/src/components/checkbox/style.css

@@ -1,8 +1,3 @@
-input[type='checkbox'] {
-  &.checkbox {
-  }
-}
-
 .label {
   color: #646464;
 }

ui/src/components/column/style.css

@@ -17,8 +17,8 @@
 
 @define-mixin viewport $size {
   &.$(size) {
-    flex-grow: 1;
     flex-basis: 0;
+    flex-grow: 1;
     max-width: 100%;
   }
 
@@ -39,8 +39,8 @@
 .column {
   box-sizing: border-box;
   flex: 0 0 auto;
-  padding-right: var(--half-gutter-width, 0.5rem);
   padding-left: var(--half-gutter-width, 0.5rem);
+  padding-right: var(--half-gutter-width, 0.5rem);
 
   &.reverse {
     flex-direction: column-reverse;

ui/src/components/container/style.css

@@ -11,20 +11,19 @@
   --container-sm: ~sizes.containerSm;
 }
 
-
 @custom-media --sm-viewport ~breakpoints.sm;
 @custom-media --md-viewport ~breakpoints.md;
 @custom-media --lg-viewport ~breakpoints.lg;
 
-
+.container-fluid,
-.container-fluid, .container {
+.container {
-  margin-right: auto;
   margin-left: auto;
+  margin-right: auto;
 }
 
 .container-fluid {
-  padding-right: var(--outer-margin);
   padding-left: var(--outer-margin);
+  padding-right: var(--outer-margin);
 }
 
 .container {

ui/src/components/input/style.css

@@ -1,3 +1,5 @@
+@import "../../shared/mixins.css";
+
 ~boxes: "../../shared/constants.js";
 ~colors: "../../shared/constants.js";
 
@@ -5,21 +7,20 @@
   --background-color: ~colors.background;
   --border-color: ~colors.border;
   --border-selected-color: ~colors.borderSelected;
-  --border-radius: remCalc(~boxes.borderRadius);
+  --border-radius: remcalc(~boxes.borderRadius);
   --inset-box-shadow: ~boxes.insetShaddow;
 }
 
 .input {
   background: var(--background-color);
-  border: 1px solid var(--border-color);
-  box-shadow: var(--inset-box-shadow);
-  border-radius: var(--border-radius);
-  height: 50px;
-  width: 100%;
   display: block;
-  visibility: visible;
+  height: 50px;
   padding-left: 15px;
   padding-right: 15px;
+  visibility: visible;
+  width: 100%;
+
+  @add-mixin create-base-box-properties;
 
   &:focus {
     border-color: var(--border-selected-color);

ui/src/components/pagination/index.js

@@ -16,7 +16,7 @@ const Pagination = ({
     const cn = classNames(
       child.props.className,
       child.props.active ? styles.active : '',
-      styles.li
+      styles.pagination_item
     );
 
     return (
@@ -28,7 +28,7 @@ const Pagination = ({
 
   return (
     <nav aria-label={label} className={cn}>
-      <ul className={styles.ul}>
+      <ul className={styles.paginatation_list}>
         {pages}
       </ul>
     </nav>

ui/src/components/pagination/style.css

@@ -1,39 +1,36 @@
+@import "../../shared/mixins.css";
+
 ~boxes: "../../shared/constants.js";
 ~colors: "../../shared/constants.js";
 
 :root {
   --border-checked: ~boxes.border.checked;
   --border-unchecked: ~boxes.border.unchecked;
-   --border-radius: remCalc(~boxes.borderRadius);
+  --border-radius: remcalc(~boxes.borderRadius);
   --bottom-shaddow: ~boxes.bottomShaddow;
 }
 
-.pagination {
+.paginatation_list {
   display: inline-block;
-
-  & .ul {
-    display: inline;
   list-style: none;
+  margin: 0;
+  padding: 0;
+}
 
-    & .li {
+.pagination_item {
+  align-items: center;
   cursor: pointer;
-
+  display: flex;
+  float: left;
   height: 50px;
+  justify-content: center;
+  margin-right: 10px;
   min-width: 50px;
   padding-left: 15px;
   padding-right: 15px;
-      margin-right: 10px;
-
-      border: var(--border-unchecked);
-      box-shadow: var(--bottom-shaddow);
-      border-radius: var(--border-radius);
-
   position: relative;
-      float: left;
 
-      display: flex;
+  @add-mixin create-base-box-properties;
-      justify-content: center;
-      align-items: center;
 
   &:last-child {
     margin-right: inherit;
@@ -44,12 +41,10 @@
   }
 
   & a:hover {
-        text-decoration: none
+    text-decoration: none;
   }
 
   &.active {
     cursor: default;
   }
 }
-  }
-}

ui/src/components/radio-group/style.css

@@ -4,19 +4,18 @@
 :root {
   --border-checked: ~boxes.border.checked;
   --border-unchecked: ~boxes.border.unchecked;
-   --border-radius: remCalc(~boxes.borderRadius);
+  --border-radius: remcalc(~boxes.borderRadius);
   --bottom-shaddow: ~boxes.bottomShaddow;
 }
 
 .group {
   & .item {
-    cursor: pointer;
     background: #FFFFFF;
-    border: var(--border-unchecked);
+    cursor: pointer;
-    box-shadow: var(--bottom-shaddow);
+    margin-bottom: remcalc(15);
-    border-radius: 4pxvar(--border-radius);
+    padding: remcalc(25);
-    margin-bottom: remCalc(15);
+
-    padding: remCalc(25);
+    @add-mixin create-base-box-properties;
 
     &:last-child {
       margin-bottom: initial;

ui/src/components/radio/style.css

@@ -1,10 +1,10 @@
-@import '../../shared/mixins.css';
+@import "../../shared/mixins.css";
 
 :root {
   --radio-radius: 20px;
   --radio-border-size: calc(var(--radio-radius) / 4);
   --dot-color: #646464;
-  --border-color: #cfd1d1;
+  --border-color: #CFD1D1;
 }
 
 .radio {
@@ -15,8 +15,8 @@
   }
 
   & .span {
-    margin-left: remCalc(30);
+    margin-left: remcalc(30);
-    margin-right: remCalc(20);
+    margin-right: remcalc(20);
 
     @add-mixin pseduo-element before, var(--radio-radius), var(--radio-radius), -1px, auto, auto, -30px {
       border: var(--radio-border-size) solid white;
@@ -25,11 +25,11 @@
     }
   }
 
-  & .input[type="radio"] {
+  & .input {
     display: none;
     visibility: hidden;
 
-    &:checked ~ .span:before {
+    &:checked ~ .span::before {
       background: var(--dot-color);
     }
   }

ui/src/components/range-slider/index.js

@@ -10,7 +10,7 @@ const RangeSlider = ({
 
   const slider = classNames(
     className,
-    styles.input
+    styles.range_input
   );
 
   // TODO: Get rid of inline styles

ui/src/components/range-slider/style.css

@@ -1,4 +1,4 @@
-@import '../../shared/mixins.css';
+@import "../../shared/mixins.css";
 
 ~colors: "../../shared/constants.js";
 ~boxes: "../../shared/constants.js";
@@ -14,24 +14,22 @@
   MIXINS - Defining Mixins for slider
 */
 @define-mixin range-track {
-  animate: 0.2s;
   background: var(--primary-background);
   cursor: pointer;
-  height: remCalc(6);
+  height: remcalc(6);
   width: 100%;
 
-  @add-mixin create-base-box-properties remCalc(25)
+  @add-mixin create-base-box-properties remcalc(25);
 }
 
 @define-mixin range-thumb {
-  background: #ffffff;
+  -webkit-appearance: none;
-
+  background: #FFFFFF;
   cursor: pointer;
-  height: remCalc(24);
+  height: remcalc(24);
   position: relative;
   top: -10px;
-  width: remCalc(36);
+  width: remcalc(36);
-  -webkit-appearance: none;
 
   @add-mixin create-base-box-properties;
 }
@@ -39,13 +37,15 @@
 @define-mixin range-lower {
   background: var(--primary-background);
   height: 6px;
-  @add-mixin create-base-box-properties remCalc(50), none;
+
+  @add-mixin create-base-box-properties remcalc(50), none;
 }
 
 @define-mixin range-upper {
-  background: #e6e6e6;
+  background: #E6E6E6;
   height: 6px;
-  @add-mixin create-base-box-properties remCalc(50);
+
+  @add-mixin create-base-box-properties remcalc(50);
 }
 
 /*
@@ -53,20 +53,14 @@
 
   TODO: Complied incorrectly when selectors are in a comma seperated list
 */
-.input[type="range"] {
+.range_input {
+  -webkit-appearance: none;
   border: none;
   box-shadow: none;
-  margin: remCalc(10 0);
+  display: block; /* Try and figure out why display none is being set in doc.css */
-  width: 100%;
+  margin: remcalc(10 0);
-  -webkit-appearance: none;
-
-  // Try and figure out why display none is being set in doc.css
-  display: block;
   visibility: visible;
-
+  width: 100%;
-  &:focus {
-    outline: none;
-  }
 
   &::-moz-focus-outer {
     border: 0;
@@ -96,30 +90,30 @@
     @add-mixin range-thumb;
   }
 
-  &:focus::-webkit-slider-runnable-track {
-    background: var(--primary-background);
-  }
-
   &::-moz-range-progress {
-    @add-mixin range-lower
+    @add-mixin range-lower;
   }
 
   &::-ms-fill-lower {
-    @add-mixin range-lower
+    @add-mixin range-lower;
-  }
-
-  &:focus::-ms-fill-lower {
-    @add-mixin range-lower
-  }
-
-  &::-moz-range-track {
-    @add-mixin range-upper;
   }
 
   &::-ms-fill-upper {
     @add-mixin range-upper;
   }
 
+  &:focus {
+    outline: none;
+  }
+
+  &:focus::-webkit-slider-runnable-track {
+    background: var(--primary-background);
+  }
+
+  &:focus::-ms-fill-lower {
+    @add-mixin range-lower;
+  }
+
   &:focus::-ms-fill-upper {
     @add-mixin range-upper;
   }

ui/src/components/row/style.css

@@ -65,8 +65,8 @@
   flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-right: var(--gutter-compensation, -0.5rem);
   margin-left: var(--gutter-compensation, -0.5rem);
+  margin-right: var(--gutter-compensation, -0.5rem);
 
   &.reverse {
     flex-direction: row-reverse;

ui/src/components/select/style.css

@@ -1,7 +1,10 @@
 .select {
-  composes: input from '../input/style.css';
+  composes: input from "../input/style.css";
 
+  /* select[multiple] is valid CSS syntax - not added to lint library yet */
+  /* stylelint-disable */
   &[multiple] {
+  /* stylelint-enable */
     padding-left: 0;
     padding-right: 0;
 
@@ -21,5 +24,5 @@
 }
 
 .label {
-  composes: label from '../input/style.css';
+  composes: label from "../input/style.css";
 }

ui/src/components/tab/index.js

@@ -25,7 +25,7 @@ const Tab = ({
     <div className={cn}>
       <input
         checked={checked}
-        className={styles.input}
+        className={styles.radio_input}
         defaultChecked={defaultChecked}
         disabled={disabled}
         id={tabId}

ui/src/components/tab/style.css

@@ -1,11 +1,11 @@
-@import '../../shared/mixins.css';
+@import "../../shared/mixins.css";
 
 ~boxes: "../../shared/constants.js";
 ~colors: "../../shared/constants.js";
 
 :root {
   --border-unchecked: ~boxes.border.unchecked;
-   --border-radius: remCalc(~boxes.borderRadius);
+  --border-radius: remcalc(~boxes.borderRadius);
   --bottom-shaddow: ~boxes.bottomShaddow;
 }
 
@@ -17,52 +17,54 @@
     border: var(--border-unchecked);
     color: #646464;
     display: inline-block;
-    font-size: remCalc(20);
+    font-size: remcalc(20);
     left: 1px;
     margin-left: -1px;
-    padding: remCalc(10);
+    padding: remcalc(10);
     position: relative;
     vertical-align: bottom;
   }
 
-  & .input[type="radio"] {
+  & .panel {
+    display: inline-block;
+    height: 0;
+    overflow: hidden;
+    position: relative;
+    width: 0;
+  }
+
+  & .radio_input {
     clip: rect(0 0 0 0);
     height: 1px;
     opacity: 0;
     width: 1px;
+
     @add-mixin move-z -1, fixed;
-  }
 
-  & .panel {
+    &:checked {
-    display: inline;
+      & + .label {
-    display: inline-block;
-    overflow: hidden;
-    position: relative;
-    height: 0;
-    width: 0;
-  }
-
-  & .content {
-    box-sizing: border-box;
-    display: block;
-    background: white;
-    padding: remCalc(0 20);
-    border: var(--border-unchecked);
-    background: #FAFAFA;
-    float: left;
-    font-size: remCalc(16);
-    margin-top: remCalc(-9);
-    width: 100%;
-  }
-
-  & .input[type="radio"]:checked + .label {
         background: white;
         border-bottom-width: 0;
-    padding-bottom: remCalc(11);
+        padding-bottom: remcalc(11);
+
         @add-mixin move-z 1;
       }
 
-  & .input[type="radio"]:checked ~ .panel {
+      & ~ .panel {
         display: inline;
       }
     }
+  }
+
+  & .content {
+    background: #FAFAFA;
+    border: var(--border-unchecked);
+    box-sizing: border-box;
+    display: block;
+    float: left;
+    font-size: remcalc(16);
+    margin-top: remcalc(-9);
+    padding: remcalc(0 20);
+    width: 100%;
+  }
+}

ui/src/components/tabs/style.css

@@ -1,9 +1,9 @@
 .tabs {
   font-size: 0;
 
-  &:after {
+  &::after {
     clear: both;
-    content: '';
+    content: "";
     display: table;
   }
 }

ui/src/components/toggle/style.css

@@ -11,22 +11,22 @@
   --background-confirmed: ~colors.confirmation;
   --border-confirmed: ~boxes.border.confirmed;
   --border-unchecked: ~boxes.border.unchecked;
-   --border-radius: remCalc(~boxes.borderRadius);
+  --border-radius: remcalc(~boxes.borderRadius);
   --bottom-shaddow: ~boxes.bottomShaddow;
 }
 
 .toggle {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  color: #464646;
   border-radius: var(--border-radius);
-  width: 5rem;
+  color: #464646;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   height: 2.5rem;
+  width: 5rem;
 
   & .btn,
   & .label {
     height: 2.188rem;
-    width: 2.188rem;
     margin: 0.125rem;
+    width: 2.188rem;
   }
 
   & .label {
@@ -36,8 +36,8 @@
 
   & .btn {
     background: #FFFFFF;
-    box-shadow: var(--bottom-shaddow);
     border-radius: var(--border-radius);
+    box-shadow: var(--bottom-shaddow);
   }
 
   &.on {
@@ -45,8 +45,8 @@
     border: var(--border-confirmed);
 
     & .label {
-      float: right;
       color: #FFFFFF;
+      float: right;
     }
 
     & .btn {

ui/src/components/widget/style.css

@@ -6,10 +6,11 @@
 }
 
 .content {
-  cursor: pointer;
-  border-radius: 4px;
   border: var(--border-unchecked);
-  padding: remCalc(36);
+  border-radius: 4px;
+  cursor: pointer;
+  padding: remcalc(36);
+
   & img {
     max-width: 100%;
   }

ui/src/shared/composers.css

@@ -1,8 +1,7 @@
 .verticle_align_center {
   /* Need to palce position:relative on parent */
-
+  left: 50%;
   position: absolute;
   top: 50%;
-  left: 50%;
   transform: translate(-50%, -50%);
 }

ui/src/shared/functions.js

@@ -1,5 +1,5 @@
 module.exports = {
-  remCalc: function(values) {
+  remcalc: function(values) {
     values = values.replace('px', '').split(' ');
 
     let outputRems = '';

ui/src/shared/mixins.css

@@ -3,10 +3,9 @@
 @define-mixin pseduo-element $type, $width:auto, $height:auto, $top:auto, $right:auto, $bottom:auto, $left:auto {
   position: relative;
 
-  &::$(type) {
+  &:$( type ) {
-
     bottom: $bottom;
-    content: '';
+    content: "";
     display: inline-block;
     height: $height;
     left: $left;