add stylelint (#601)

* remove sass-lint and sass-lint-auto-fix pckages

* add stylelint

- replaces sass-lint
- adds stylelint-config-prettier to ensure we don't conflict with
  prettier rules

* just run lint-css-fix in pre-commit hook

* run stylelint + prettier through all scss files

dashboard/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["stylelint-config-recommended-scss", "stylelint-config-prettier"]
+}

dashboard/package.json

@@ -56,13 +56,13 @@
     "prettier": "prettier --write 'src/**/*.{ts,tsx,css}'",
     "lint-js": "tslint -c ./tslint.ci.json 'src/**/*.{ts,tsx}'",
     "lint-js-fix": "tslint -c ./tslint.ci.json --fix 'src/**/*.{ts,tsx}'",
-    "lint-css": "sass-lint -c ./.sass-lint.yml -v",
-    "lint-css-fix": "sass-lint-auto-fix -c ./.sass-lint.yml",
+    "lint-css": "stylelint --config ./.stylelintrc.json 'src/**/*.scss'",
+    "lint-css-fix": "stylelint --config ./.stylelintrc.json --fix 'src/**/*.scss'",
     "lint": "npm-run-all lint-js lint-css"
   },
   "lint-staged": {
     "*.{ts,tsx}": ["yarn run lint-js-fix", "prettier --write", "git add"],
-    "*.scss": ["yarn run lint-css-fix", "yarn run lint-css", "prettier --write", "git add"],
+    "*.scss": ["yarn run lint-css-fix", "prettier --write", "git add"],
     "*.{js,json,md}": ["prettier --write", "git add"]
   },
   "devDependencies": {
@@ -89,8 +89,10 @@
     "prettier": "^1.10.2",
     "react-svg-loader": "^2.1.0",
     "redux-mock-store": "^1.5.3",
-    "sass-lint": "^1.12.1",
-    "sass-lint-auto-fix": "^0.11.6",
+    "stylelint": "^9.5.0",
+    "stylelint-config-prettier": "^4.0.0",
+    "stylelint-config-recommended-scss": "^3.2.0",
+    "stylelint-scss": "^3.3.0",
     "tslint": "^5.9.1",
     "tslint-config-prettier": "^1.6.0",
     "tslint-react": "^3.4.0",

dashboard/src/components/AppView/ServiceItem.scss

@@ -1,6 +1,6 @@
 .ServiceItem__url {
   display: inline-block;
-  color: #FFF;
+  color: #fff;
   border-radius: 16px;
-  background-color: #1598CB;
+  background-color: #1598cb;
 }

dashboard/src/components/ChartList/ChartListItem.scss

@@ -1,8 +1,5 @@
 .ChartListItem {
-  color: #1C2B39;
-}
-
-.ChartListItem__content {
+  color: #1c2b39;
 }
 
 .ChartListItem__content__title {
@@ -12,7 +9,7 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  color: #1C2B39;
+  color: #1c2b39;
 }
 
 .ChartListItem__content__info {
@@ -22,35 +19,35 @@
 
 .ChartListItem__content__info_repo {
   display: inline-block;
-  color: #FFF;
+  color: #fff;
   border-radius: 16px;
-  background-color: #1C2B39;
+  background-color: #1c2b39;
 }
 
 .ChartListItem__content__info_other {
   display: inline-block;
   color: rgb(0, 0, 0);
   margin-left: 0.3em;
   border-radius: 16px;
-  background-color: #1598CB;
+  background-color: #1598cb;
 }
 
 .DELETED {
-  background-color: #C5C5C5;
+  background-color: #c5c5c5;
 }
 
 .FAILED {
-  background-color: #CB1515;
+  background-color: #cb1515;
 }
 
 .DEPLOYED {
-  background-color: #15CB2D;
+  background-color: #15cb2d;
 }
 
 .ChartListItem__content__info_repo.stable {
-  background-color: #1598CB;
+  background-color: #1598cb;
 }
 
 .ChartListItem__content__info_repo.incubator {
-  background-color: #F58220;
+  background-color: #f58220;
 }

dashboard/src/components/ChartView/ChartReadme.scss

@@ -18,8 +18,8 @@
   text-align: left;
   font-size: 1em;
   border-radius: 5px;
-  border: 1px solid #DDD;
-  background-color: #F1F1F1;
+  border: 1px solid #ddd;
+  background-color: #f1f1f1;
   padding: 0.1em 1em;
   max-width: 100%;
 }
@@ -30,5 +30,5 @@
 }
 
 .ChartReadme tr {
-  border-bottom: 1px solid #EEE;
+  border-bottom: 1px solid #eee;
 }

dashboard/src/components/Config/ServiceBrokerList/ServiceBrokerList.scss

@@ -1,3 +1,3 @@
 .BrokerList__url {
-  color: #5F6369;
+  color: #5f6369;
 }

dashboard/src/components/DeploymentStatus/DeploymentStatus.scss

@@ -3,21 +3,21 @@
   font-size: 1em;
   line-height: 2.5em;
   padding: 0 0.875em;
-  background-color: #F1F1F1;
+  background-color: #f1f1f1;
   height: 2.5em;
 }
 
 .DeploymentStatus--success {
-  color: #FFF;
-  background-color: #1598CB;
+  color: #fff;
+  background-color: #1598cb;
 }
 
 .DeploymentStatus--pending {
-  background-color: #FDBA12;
+  background-color: #fdba12;
 }
 
 .DeploymentStatus--deleted {
-  background-color: #FDA5A5;
+  background-color: #fda5a5;
 }
 
 .DeploymentStatus--pending > .icon {

dashboard/src/components/ErrorAlert/ErrorAlertHeader.scss

@@ -1,6 +1,6 @@
 .error__icon {
   display: inline-block;
-  background: #C7C9C8;
+  background: #c7c9c8;
   vertical-align: bottom;
   border-radius: 50%;
   height: 30px;
@@ -11,6 +11,6 @@
   margin: auto;
   left: 3px;
   top: 3px;
-  color: #FFFFFF;
+  color: #ffffff;
   position: relative;
 }

dashboard/src/components/PageHeader/PageHeader.scss

@@ -1,5 +1,5 @@
 .PageHeader > .row {
-  border-bottom: 2px solid #F1F1F1;
+  border-bottom: 2px solid #f1f1f1;
 }
 
 .PageHeader h1 {