Added linter for styled-components

.stylelintrc

@@ -3,8 +3,10 @@
         "stylelint-processor-styled-components"
     ],
     "extends": [
-        "stylelint-config-standard",
+        "stylelint-config-recommended",
         "stylelint-config-styled-components"
     ],
-    "syntax": "scss"
+    "rules": {
+        "indentation": 4
+    }
 }

package.json

@@ -19,8 +19,11 @@
         "dev:local": "webpack-dev-server --config ./webpack/config.dev.local.babel.js --mode development",
         "build": "rm -rf build && webpack --config ./webpack/config.prod.babel.js --progress",
         "flow": "flow check src/js",
-        "lint": "npx eslint ./src ./webpack",
+        "lint": "run-p lint:*",
-        "test-unit": "jest",
+        "lint:js": "eslint ./src/js ./webpack",
+        "lint:css": "stylelint './src/js/**/*.js'",
+        "test:*": "run-p test:*",
+        "test:unit": "jest",
         "test-unit:watch": "jest -o --watch"
     },
     "dependencies": {
@@ -35,6 +38,7 @@
         "hdkey": "^0.8.0",
         "html-webpack-plugin": "^3.2.0",
         "mini-css-extract-plugin": "^0.4.1",
+        "npm-run-all": "^4.1.3",
         "prop-types": "^15.6.2",
         "raf": "^3.4.0",
         "raven-js": "^3.22.3",
@@ -66,7 +70,7 @@
         "babel-cli": "^6.24.1",
         "babel-eslint": "^8.2.6",
         "babel-loader": "^7.1.5",
-        "babel-plugin-root-import": "^6.1.0",
+        "babel-plugin-root-import": "5",
         "babel-plugin-styled-components": "^1.5.1",
         "babel-plugin-transform-class-properties": "^6.24.1",
         "babel-plugin-transform-flow-strip-types": "^6.22.0",
@@ -90,6 +94,7 @@
         "jest": "^23.4.2",
         "less": "^3.0.1",
         "less-loader": "4.1.0",
+        "styled-components-stylefmt": "^0.1.5",
         "stylelint": "^9.4.0",
         "stylelint-config-standard": "^18.2.0",
         "stylelint-config-styled-components": "^0.1.1",

src/js/components/common/Button.js

@@ -27,10 +27,6 @@ const Wrapper = styled.button`
         color: ${colors.TEXT_SECONDARY};
         background: ${colors.GRAY_LIGHT};
     `}
-
-    ${props => props.blue && css``}
-
-    ${props => props.white && css``}
 `;
 
 const Button = ({

src/js/components/common/Footer.js

@@ -18,7 +18,7 @@ const Wrapper = styled.div`
 `;
 
 const A = styled.a`
-    margin: 0px 6px;
+    margin: 0 6px;
     margin-right: 20px;
 `;
 

src/js/components/common/Header.js

@@ -10,7 +10,7 @@ const Wrapper = styled.header`
 
     svg {
         fill: ${colors.WHITE};
-        height: 28px;         
+        height: 28px;
         width: 100px;
         flex: 1;
     }

src/js/components/common/Heading.js

@@ -9,28 +9,28 @@ const baseStyles = css`
 `;
 
 const H1 = styled.h1`
-    ${baseStyles}
+    ${baseStyles};
     font-size: 18px;
 `;
 
 const H2 = styled.h2`
     ${baseStyles};
     font-size: 16px;
-
+ 
     ${props => props.claim && css`
         font-size: 36px;
-        padding-bottom: 24px;
+        padding-bottom: 24px
     `}
 `;
 
 const H3 = styled.h3`
-  ${baseStyles};
+    ${baseStyles};
-  font-size: 14px;
+    font-size: 14px;
 `;
 
 const H4 = styled.h4`
-  ${baseStyles};
+    ${baseStyles};
-  font-size: 12px;
+    font-size: 12px;
 `;
 
 export {