Added stylelint for styled-components (#36)

Author: rstaib

.circleci/config.yml

@@ -58,20 +58,20 @@ workflows:
             branches:
               ignore: master
             tags:
-              ignore: /^\d+\.\d+\.\d+(\-\w*?\.\d+)?$/
+              ignore: /^(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(\-\w*?\.[1-9]\d*)?$/
   build_and_cover:
     jobs:
       - cover:
           filters:
             branches:
               only: master
             tags:
-              ignore: /^\d+\.\d+\.\d+(\-\w*?\.\d+)?$/
+              ignore: /^(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(\-\w*?\.[1-9]\d*)?$/
   build_and_deploy:
     jobs:
       - deploy:
           filters:
             branches:
               ignore: /.*/
             tags:
-              only: /^\d+\.\d+\.\d+(\-\w*?\.\d+)?$/
+              only: /^(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(\-\w*?\.[1-9]\d*)?$/

.stylelintrc.json

@@ -0,0 +1,7 @@
+{
+  "processors": ["stylelint-processor-styled-components"],
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-styled-components"
+  ]
+}

package.json

@@ -16,7 +16,9 @@
     "build": "yarn prettier && yarn lint && yarn test:coverage && tsc",
     "build-storybook": "build-storybook",
     "cover": "coveralls < coverage/lcov.info",
-    "lint": "tslint -c tslint.json 'src/**/*.ts*'",
+    "lint": "yarn lint:code && yarn lint:style",
+    "lint:code": "tslint -c tslint.json \"./src/**/*.ts*\"",
+    "lint:style": "stylelint \"./src/**/*.ts*\"",
     "precommit": "pretty-quick --staged",
     "prettier": "prettier \"./*.+(js|json|md)\" \"./src/**/*.*\" --write",
     "storybook": "start-storybook -p 6006",
@@ -41,6 +43,7 @@
     "@types/storybook__react": "^3.0.7",
     "awesome-typescript-loader": "^4.0.1",
     "babel-core": "^6.26.0",
+    "babel-runtime": "^6.26.0",
     "coveralls": "^3.0.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
@@ -53,12 +56,16 @@
     "pretty-quick": "^1.4.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "styled-components": "^3.2.3",
+    "styled-components": "^3.3.2",
+    "stylelint": "^9.2.1",
+    "stylelint-config-recommended": "^2.1.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.3.1",
     "ts-jest": "^22.0.1",
     "tslint": "^5.9.1",
     "tslint-react": "^3.3.3",
     "tslint-sonarts": "^1.6.0",
-    "typescript": "^2.8.1"
+    "typescript": "^2.9.1"
   },
   "dependencies": {}
 }

src/__utils__/Story.tsx

@@ -10,16 +10,16 @@ const Story = styled.div`
     "Segoe UI Symbol";
   ${(props: StoryProperties) => (props.fullscreen ? "height: 100%;" : "")}
 
-  ${Container},
-  ${Row} {
+  ${/*sc-selector*/ Container},
+  ${/*sc-selector*/ Row} {
     background: #ccc;
     ${(props: StoryProperties) => (props.fullscreen ? "" : "height: 300px;")}
   }
 
-  ${Row} > ${Column} {
+  ${/*sc-selector*/ Row} > ${/*sc-selector*/ Column} {
     background: #0a5991;
     border: 5px solid #ccc;
-    color #fff;
+    color: #fff;
     font-size: 2em;
     line-height: 65px;
     text-align: center;

src/row/renderGutter.ts

@@ -8,7 +8,7 @@ export default (noGutter?: boolean, theme?: Theme): string => {
       margin-right: 0;
       margin-left: 0;
 
-      > ${Column} {
+      > ${/* sc-selector */ Column} {
         padding-right: 0;
         padding-left: 0;
       }
@@ -20,7 +20,7 @@ export default (noGutter?: boolean, theme?: Theme): string => {
       margin-right: -${width}px;
       margin-left: -${width}px;
 
-      > ${Column} {
+      > ${/* sc-selector */ Column} {
         padding-right: ${width}px;
         padding-left: ${width}px;
       }