Apply Stylint to the codebase

.stylelintrc

@@ -0,0 +1,11 @@
+{
+  "processors": ["stylelint-processor-styled-components"],
+  "extends": "stylelint-config-standard",
+  "syntax": "scss",
+  "rules": {
+    "property-no-unknown": [true, { "ignoreProperties": ["resize-mode"] }],
+    "block-opening-brace-space-after": null,
+    "block-closing-brace-space-before": null,
+    "declaration-block-no-redundant-longhand-properties": null
+  }
+}

.vscode/extensions.json

@@ -9,6 +9,8 @@
 		"djabraham.vscode-yaml-validation",
 		"vsmobile.vscode-react-native",
 		"Orta.vscode-react-native-storybooks",
-		"esbenp.prettier-vscode"
+		"esbenp.prettier-vscode",
+		"mrmlnc.vscode-stylefmt",
+		"shinnn.stylelint"
 	]
 }

.vscode/settings.json

@@ -5,7 +5,8 @@
         "Podfile": "ruby",
         "*.h": "objective-c",
         "*.js": "javascriptreact",
-        "*.snap": "javascriptreact"
+        "*.snap": "javascriptreact",
+        ".stylelintrc": "json"
     },
     "eslint.enable": false,
     "flow.enabled": false,
@@ -61,7 +62,9 @@
         "iPad",
         "iPhone",
         "ListView",
-        "ARTemporaryAPIModule"
+        "ARTemporaryAPIModule",
+        "Inbox",
+        "matt"
     ],
     "stylelint.additionalDocumentSelectors": [
         "typescript",

CHANGELOG.md

@@ -1,8 +1,14 @@
+### Master
+
+###### Dev
+
+-   Adds stylelint to the dev-experience, not validated on CI yet - orta
+
 ### 1.4.0-beta.3
 
 ###### Messaging
 
--   Fix for bug in ArtworkPreview related to the falsiness of an empty string - sarah
+-   Fix for bug in `ArtworkPreview` related to the falsiness of an empty string - sarah
 -   Adds a banner on Conversations when network connectivity is lost - sarah
 -   Reload active bids on pull-to-refresh - alloy
 -   Make active bids link to their artworks - alloy

package.json

@@ -13,6 +13,8 @@
     "prettier": "prettier",
     "prettier-write": "npm run prettier -- --parser typescript --no-semi --trailing-comma es5 --write --print-width 120 ",
     "prettier-project": "npm run prettier-write -- 'src/**/*.{ts,tsx}'",
+    "stylelint": "stylelint",
+    "stylelint-project": "npm run stylelint -- 'src/**/*.{ts,tsx}'",
     "lint-staged": "lint-staged",
     "ci": "npm run type-check && npm run lint && npm run prettier-project -- -l && npm run test",
     "danger": "danger",
@@ -35,23 +37,14 @@
   },
   "jest": {
     "preset": "react-native",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ],
+    "moduleFileExtensions": ["ts", "tsx", "js"],
     "transform": {
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
       ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
     },
     "testRegex": "/__tests__/.*-tests.(ts|tsx|js)$",
-    "testPathIgnorePatterns": [
-      "\\.snap$",
-      "<rootDir>/node_modules/"
-    ],
-    "setupFiles": [
-      "./src/setupJest.ts"
-    ],
+    "testPathIgnorePatterns": ["\\.snap$", "<rootDir>/node_modules/"],
+    "setupFiles": ["./src/setupJest.ts"],
     "cacheDirectory": ".jest/cache"
   },
   "graphql": {
@@ -62,22 +55,14 @@
     "type": "git",
     "url": "git+https://github.com/artsy/emission.git"
   },
-  "keywords": [
-    "artsy",
-    "react",
-    "react-native"
-  ],
+  "keywords": ["artsy", "react", "react-native"],
   "author": "Eloy Durán",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/artsy/emission/issues"
   },
   "homepage": "https://github.com/artsy/emission#readme",
-  "files": [
-    "index.js",
-    "data",
-    "lib"
-  ],
+  "files": ["index.js", "data", "lib"],
   "dependencies": {
     "lodash": "^4.17.4",
     "moment": "latest",
@@ -111,12 +96,15 @@
     "jest-react-native": "18.0.0",
     "jest-snapshots-svg": "^0.0.14",
     "lint-staged": "^3.4.1",
-    "prettier": "^1.5.0",
+    "prettier": "^1.5.2",
     "react-dom": "16.0.0-alpha.12",
     "react-storybooks-relay-container": "^1.0.0",
     "react-test-renderer": "16.0.0-alpha.12",
     "recursive-readdir-sync": "^1.0.6",
     "relay2ts": "^0.2.0",
+    "stylelint": "^7.13.0",
+    "stylelint-config-standard": "^16.0.0",
+    "stylelint-processor-styled-components": "^0.1.2",
     "ts-jest": "^20.0.3",
     "tslint": "^5.4.3",
     "tslint-config-prettier": "^1.0.0",
@@ -126,10 +114,6 @@
     "babel-relay-plugin": "^0.9.0"
   },
   "lint-staged": {
-    "*.@(ts|tsx)": [
-      "tslint --fix",
-      "npm run prettier-write --",
-      "git add"
-    ]
+    "*.@(ts|tsx)": ["tslint --fix", "npm run prettier-write --", "git add"]
   }
 }

src/lib/Components/Consignments/Components/ArtworkConsignmentTodo.tsx

@@ -37,7 +37,7 @@ const Background = styled.View`
 `
 
 const Separator = styled.View`
-  background-color: ${colors["gray-regular"]}
+  background-color: ${colors["gray-regular"]};
   height: 1;
 `
 

src/lib/Components/Inbox/Bids/ActiveBid.tsx

@@ -11,14 +11,13 @@ import SwitchBoard from "../../../NativeModules/SwitchBoard"
 import OpaqueImageView from "../../OpaqueImageView"
 
 const Container = styled.View`
-  margin: 17px 20px 0px;
+  margin: 17px 20px 0;
   height: 80px;
 `
 
 const Content = styled.View`
   flex: 1;
   flex-direction: row;
-
   align-items: center;
 `
 

src/lib/Components/Inbox/Conversations/Composer.tsx

@@ -26,10 +26,10 @@ interface StyledSendButtonProps {
 }
 
 const SendButton = styled.Text`
-  fontFamily: ${fonts["avant-garde-regular"]}
-  fontSize: 12
-  marginRight: 10
-  color: ${(p: StyledSendButtonProps) => (p.containsText ? colors["purple-regular"] : colors["gray-regular"])}
+  font-family: ${fonts["avant-garde-regular"]};
+  font-size: 12;
+  margin-right: 10;
+  color: ${(p: StyledSendButtonProps) => (p.containsText ? colors["purple-regular"] : colors["gray-regular"])};
 `
 
 interface Props {

src/lib/Components/Inbox/Conversations/ConversationSnippet.tsx

@@ -13,7 +13,7 @@ import OpaqueImageView from "../../OpaqueImageView"
 
 const Card = styled.View`
   margin: 10px 20px 0;
-  minHeight: 80px;
+  min-height: 80px;
 `
 
 const VerticalLayout = styled.View`
@@ -44,8 +44,9 @@ const UnreadIndicator = styled.View`
   width: 8;
   border-radius: 4;
   background-color: ${colors["purple-regular"]};
-  marginLeft: 4;
-  marginVertical: 3;
+  margin-left: 4;
+  margin-top: 3;
+  margin-bottom: 3;
 `
 
 const Separator = styled.View`
@@ -71,7 +72,7 @@ const ArtworkTitle = styled(ArtworkSubtitle)`
 const ImageView = styled(OpaqueImageView)`
   width: 58px;
   height: 58px;
-  borderRadius: 4px;
+  border-radius: 4px;
 `
 
 export interface Conversation {

src/lib/Components/Inbox/Conversations/Message.tsx

@@ -14,39 +14,38 @@ import colors from "../../../../data/colors"
 import SwitchBoard from "../../../NativeModules/SwitchBoard"
 
 const VerticalLayout = styled.View`
-  flex-direction: column
-  flex: 1
+  flex-direction: column;
+  flex: 1;
 `
 
 const HorizontalLayout = styled.View`flex-direction: row;`
 
 const Container = styled(HorizontalLayout)`
-  alignSelf: stretch
-  marginTop: 15
-  marginBottom: 10
-  marginLeft: 20
-  marginRight: 20
-
+  align-self: stretch;
+  margin-top: 15;
+  margin-bottom: 10;
+  margin-left: 20;
+  margin-right: 20;
 `
 
 const Header = styled(HorizontalLayout)`
-  alignSelf: stretch
-  marginBottom: 10
+  align-self: stretch;
+  margin-bottom: 10;
 `
 
 const TextContainer = styled(VerticalLayout)`
-  marginLeft: 10
+  margin-left: 10;
 `
 
 const SenderName = styled(SmallHeadline)`
-  marginRight: 10
+  margin-right: 10;
 `
 
-const ArtworkPreviewContainer = styled.View`marginBottom: 10;`
+const ArtworkPreviewContainer = styled.View`margin-bottom: 10;`
 
-const ImagePreviewContainer = styled.View`marginBottom: 10;`
+const ImagePreviewContainer = styled.View`margin-bottom: 10;`
 
-const PDFPreviewContainer = styled.View`marginBottom: 10;`
+const PDFPreviewContainer = styled.View`margin-bottom: 10;`
 
 interface Props extends RelayProps {
   senderName: string

src/lib/Components/Inbox/Conversations/Preview/ArtworkPreview.tsx

@@ -11,46 +11,46 @@ import fonts from "../../../../../data/fonts"
 import OpaqueImageView from "../../../OpaqueImageView"
 
 const Container = styled.View`
-  borderWidth: 1;
-  borderColor: ${colors["gray-regular"]};
-  flexDirection: row;
+  border-width: 1;
+  border-color: ${colors["gray-regular"]};
+  flex-direction: row;
 `
 
 const VerticalLayout = styled.View`
-  flex: 1
-  flex-direction: column
+  flex: 1;
+  flex-direction: column;
 `
 
 const Image = styled(OpaqueImageView)`
-  marginTop: 12
-  marginLeft: 12
-  marginBottom: 12
-  width: 80
-  height: 55
+  margin-top: 12;
+  margin-left: 12;
+  margin-bottom: 12;
+  width: 80;
+  height: 55;
 `
 
 const TextContainer = styled(VerticalLayout)`
-  marginLeft: 25
-  alignSelf: center
+  margin-left: 25;
+  align-self: center;
 `
 
 const SerifText = styled(P)`
-  fontSize: 14
+  font-size: 14;
 `
 
 const TitleAndDate = styled.View`
-  marginTop: 3
-  flex-direction: row
+  margin-top: 3;
+  flex-direction: row;
 `
 
 const Title = styled.Text`
-  font-family: ${fonts["garamond-italic"]}
-  flex: 3
-  font-size: 14
+  font-family: ${fonts["garamond-italic"]};
+  flex: 3;
+  font-size: 14;
 `
 
 const Date = styled(SerifText)`
-  flex: 1
+  flex: 1;
 `
 
 interface Props extends RelayProps {

src/lib/Components/Inbox/Conversations/Preview/Attachment/PDFPreview.tsx

@@ -24,7 +24,7 @@ const TextContainer = styled.View`
 
 const Icon = styled(Image)`
   resize-mode: contain;
-  width:40;
+  width: 40;
   margin-top: 12;
   margin-left: 12;
   margin-bottom: 12;

src/lib/Components/Inbox/Conversations/ZeroStateInbox.tsx

@@ -46,7 +46,7 @@ const SmallHeadline = styled(LargeHeadline)`
 
 const Icon = styled(Image)`
   resize-mode: contain;
-  width:40;
+  width: 40;
 `
 
 export default () =>

src/lib/Components/Inbox/Conversations/__tests__/__snapshots__/ConversationSnippet-tests.tsx.snap

@@ -159,8 +159,9 @@ exports[`renders correctly 1`] = `
                   "backgroundColor": "#6e1fff",
                   "borderRadius": 4,
                   "height": 8,
+                  "marginBottom": 3,
                   "marginLeft": 4,
-                  "marginVertical": 3,
+                  "marginTop": 3,
                   "width": 8,
                 },
                 undefined,

src/lib/Components/Inbox/Conversations/__tests__/__snapshots__/Conversations-tests.tsx.snap

@@ -206,8 +206,9 @@ exports[`looks correct when rendered 1`] = `
                       "backgroundColor": "#6e1fff",
                       "borderRadius": 4,
                       "height": 8,
+                      "marginBottom": 3,
                       "marginLeft": 4,
-                      "marginVertical": 3,
+                      "marginTop": 3,
                       "width": 8,
                     },
                     undefined,
@@ -513,8 +514,9 @@ exports[`looks correct when rendered 1`] = `
                       "backgroundColor": "#6e1fff",
                       "borderRadius": 4,
                       "height": 8,
+                      "marginBottom": 3,
                       "marginLeft": 4,
-                      "marginVertical": 3,
+                      "marginTop": 3,
                       "width": 8,
                     },
                     undefined,