Add Stylelint

Author: zalmoxisus

.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "processors": ["stylelint-processor-styled-components"],
+  "extends": "stylelint-config-standard",
+  "syntax": "scss"
+}

package.json

@@ -16,6 +16,7 @@
     "prepublish": "babel ./src --out-dir ./lib --ignore tests,stories",
     "lint": "eslint src",
     "lintfix": "eslint src --fix",
+    "lint:css": "stylelint './src/**/styles.js'",
     "jest": "jest --no-cache",
     "test:update": "npm run jest -- -u",
     "test": "npm run lint && npm run jest",
@@ -61,7 +62,10 @@
     "react-addons-test-utils": "^15.0.0",
     "react-dom": "^15.0.0",
     "sass-loader": "^4.0.2",
-    "storybook-addon-specifications": "^1.0.15"
+    "storybook-addon-specifications": "^1.0.15",
+    "stylelint": "^7.6.0",
+    "stylelint-config-standard": "^15.0.0",
+    "stylelint-processor-styled-components": "^0.0.4"
   },
   "peerDependencies": {
     "react": "^0.14.7 || ^15.0.0"

src/Editor/styles.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const EditorContainer = styled.div`
   height: 100%;
 
-  >div {
+  > div {
     height: 100%;
   }
 `;

src/Tabs/styles.js

@@ -7,13 +7,13 @@ export const TabsContainer = styled.div`
   height: 100%;
   overflow-y: hidden;
 
-  >div:first-child {
+  > div:first-child {
     display: flex;
     flex: 0 0 3em;
-  
-    >div:first-child {
-     display: flex;
-      alignItems: flex-end;
+
+    > div:first-child {
+      display: flex;
+      align-items: flex-end;
       flex-wrap: nowrap;
       overflow-x: auto;
 
@@ -25,34 +25,35 @@ export const TabsContainer = styled.div`
         text-align: center;
         overflow: hidden;
         outline: 0;
-        transition: all .5s;
+        transition: all 0.5s;
         color: inherit;
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           background-color: rgba(190, 190, 190, 0.4);
         }
       }
 
-      >[data-selected] {
+      > [data-selected] {
         background-color: transparent;
       }
     }
-  
-    >div:last-child {
+
+    > div:last-child {
       flex: 1;
       display: flex;
       justify-content: flex-end;
       align-items: center;
       padding: 0 1em;
-      background-color: rgba(190, 190 ,190, 0.2);
+      background-color: rgba(190, 190, 190, 0.2);
 
       button {
         margin-left: 0.2em;
       }
     }
   }
 
-  >div:last-child {
+  > div:last-child {
     flex: 1;
     overflow-y: auto;
     position: relative;