[NO TICKER] Fix precommit hooks (#640)

* Upgrade husky and lint-staged

* Add eslint-config-prettier to remove eslint rules that conflict with prettier

* Use prettier with stylelint, update scss files

* PR feedback

* PR feedback

.eslintrc

@@ -4,6 +4,7 @@
 // applied to.
 {
   "extends": [
-    "./packages/eslint-config-design-system/index.js"
+    "./packages/eslint-config-design-system/index.js",
+    "prettier"
   ]
 }

package.json

@@ -52,6 +52,7 @@
     "enzyme-to-json": "3.3.5",
     "eslint": "^4.18.1",
     "eslint-config-nava": "^2.1.0",
+    "eslint-config-prettier": "^6.10.0",
     "front-matter": "^2.3.0",
     "generator-cmsgov": "file:./packages/generator-cmsgov",
     "glob": "7.1.4",
@@ -68,12 +69,12 @@
     "gulp-stylelint": "^6.0.0",
     "gulp-util": "^3.0.8",
     "gulp4-run-sequence": "^1.0.1",
-    "husky": "^0.14.3",
+    "husky": "^4.2.3",
     "jest": "^22.4.2",
     "jest-environment-selenium": "2.1.1",
     "kss": "^3.0.0-beta.18",
     "lerna": "^2.5.1",
-    "lint-staged": "^7.0.0",
+    "lint-staged": "^10.0.8",
     "marked": "^0.3.17",
     "memory-fs": "^0.4.1",
     "mkdir-recursive": "^0.4.0",
@@ -107,18 +108,21 @@
   "lint-staged": {
     "*.{js,jsx}": [
       "prettier --write",
-      "eslint --fix",
-      "git add"
+      "eslint --fix"
     ],
     "*.{md,html}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ],
     "*.scss": [
-      "stylelint",
-      "stylelint --syntax=scss"
+      "prettier --write",
+      "stylelint --fix"
     ]
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "resolutions": {
     "gulp-sass/node-sass": ">=4.7.2",
     "kss/nunjucks": ">=3.2.0"

packages/core/src/base/typography/link.scss

@@ -9,7 +9,7 @@
   &:visited {
     color: $color-visited;
   }
-  
+
   &:hover {
     color: $color-primary-darker;
   }
@@ -34,7 +34,7 @@
   &:visited {
     color: $color-visited;
   }
-  
+
   &:hover {
     color: $color-primary-darkest;
   }
@@ -96,10 +96,10 @@
   }
 
   // Change color of links that are descendants of '.ds-base--inverse'
-  // 
+  //
   // Fix TODO: Because this selector's specificity is higher than most components,
   // changing inverse links will require unusually specific selectors
-  // 
+  //
   // Specifically exclude '.ds-c-button' because this is most likely case where
   // a inverse link element will have other styles applied
   .ds-base--inverse a:not(.ds-c-button) {

packages/core/src/components/Alert/Alert.scss

@@ -22,7 +22,8 @@ $alert-icon-size: $spacer-5;
     background-image: none;
   }
 
-  a, .ds-c-link {
+  a,
+  .ds-c-link {
     @extend %link-darker;
   }
 

packages/core/src/components/Button/Button.scss

@@ -153,10 +153,10 @@
   }
 
   // Make sure active overrides focus styles
-  &:active:focus,	
-  &.ds-c-button--active:focus {	
-    background-color: $color-background-inverse;	
-    color: rgba($color-base-inverse, 0.6);	
+  &:active:focus,
+  &.ds-c-button--active:focus {
+    background-color: $color-background-inverse;
+    color: rgba($color-base-inverse, 0.6);
   }
 }
 
@@ -224,7 +224,7 @@
 $button-color-variants: (
   primary: $button-primary-bg $button-primary-bg--hover $button-primary-bg--active $focus-color,
   success: $color-success $color-success-dark $color-success-darker $focus-color,
-  danger: $color-error $color-error-dark $color-error-darkest $focus-color,
+  danger: $color-error $color-error-dark $color-error-darkest $focus-color
 );
 
 @each $colors in map-keys($button-color-variants) {

packages/core/src/components/Dropdown/Dropdown.scss

@@ -19,6 +19,6 @@ select.ds-c-field {
   &:-moz-focusring {
     color: transparent;
     text-shadow: 0 0 0 #000;
-}
+  }
 }
 // stylelint-enable selector-no-qualifying-type

packages/core/src/components/HelpDrawer/HelpDrawer.scss

@@ -39,7 +39,7 @@
 }
 
 .ds-c-help-drawer__header {
-  flex-shrink:0;
+  flex-shrink: 0;
 }
 
 // This element is focusable via a tabindex attribute.
@@ -50,7 +50,7 @@
 .ds-c-help-drawer__body {
   display: flex;
   flex-direction: column;
-  height: 100%;   
+  height: 100%;
   overflow-y: scroll;
 }
 

packages/core/src/utilities/background-color/background-color.scss

@@ -36,7 +36,7 @@
 }
 
 // gray
-.ds-u-fill--gray{
+.ds-u-fill--gray {
   background-color: $color-gray !important;
 }
 

packages/core/src/utilities/text-color/_text-color.docs.scss

@@ -12,8 +12,8 @@ The options below offer color palette combinations that fall within the range of
 Markup: text-color.example.html
   
 Style guide: utilities.text-color 
-*/ 
- 
+*/
+
 /*   
 Inherit a color
   

packages/core/src/utilities/text-color/text-color.scss

@@ -22,7 +22,7 @@
 .ds-u-color--primary-alt-light:not(:focus) {
   color: $color-primary-alt-light !important;
 }
- 
+
 .ds-u-color--primary-alt-lightest:not(:focus) {
   color: $color-primary-alt-lightest !important;
 }
@@ -54,8 +54,7 @@
 
 .ds-u-color--muted:not(:focus) {
   color: $color-muted !important;
-} 
-
+}
 
 // states
 .ds-u-color--error:not(:focus) {

packages/docs/src/styles/components/_UsaBanner.scss

@@ -43,7 +43,7 @@
   line-height: inherit;
   margin: 0;
   padding: 0;
-  
+
   &::after {
     background-image: url('../images/arrow-down.svg'), linear-gradient(transparent, transparent);
     background-position: 50%;

packages/layout/src/index.scss

@@ -1,4 +1,3 @@
-
 @import '@cmsgov/design-system-support/src/index';
 @import 'container';
 @import 'row';