Task/setup stylelint

client/README.md

@@ -1,6 +1,7 @@
 # Poule-Poule frontend app
 
 ## Architecture
+
 ```sh
 .
 └── src/
@@ -15,21 +16,27 @@
 ## How to contribute
 
 ### Quick start
+
 ```sh
 yarn install
 yarn start
 ```
 
 ### Lint and format code before committing
+
 Normally, the code is automatically linted and formatted before commits.
+
 ```sh
 yarn lint
+yarn lint:style
 yarn format
 ```
 
 ### Tests
+
 ```sh
 yarn test
 ```
+
 By default, only test suites based on files changed since the last commit are run.
 To force `jest` to run every test suites, use the `--watchAll` option.

client/package.json

@@ -7,6 +7,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings 0",
+    "lint:style": "stylelint \"src/**/*.scss\"",
     "format": "prettier \"src/**/*.{ts,tsx,scss}\" --write"
   },
   "dependencies": {
@@ -34,6 +35,9 @@
     "node-sass": "^4.13.0",
     "prettier": "^1.19.1",
     "react-scripts": "3.2.0",
+    "stylelint": "^12.0.0",
+    "stylelint-config-recommended-scss": "^4.1.0",
+    "stylelint-scss": "^3.13.0",
     "typescript": "3.7.2"
   },
   "husky": {
@@ -47,7 +51,12 @@
       "eslint --max-warnings 0",
       "git add"
     ],
-    "src/**/*.{scss,md}": [
+    "src/**/*.scss": [
+      "prettier --write",
+      "stylelint --fix",
+      "git add"
+    ],
+    "src/**/*.md": [
       "prettier --write",
       "git add"
     ]

client/src/containers/Settings/Settings.scss

@@ -10,6 +10,10 @@
   }
 
   &__Field {
+    label + label {
+      margin-top: $spacing-small;
+    }
+
     & + & {
       display: flex;
       flex-wrap: wrap;
@@ -21,10 +25,6 @@
       }
     }
 
-    label + label {
-      margin-top: $spacing-small;
-    }
-
     [type='number'] {
       margin-right: $spacing-small;
     }

client/src/styles/_reset.scss

@@ -5,10 +5,11 @@
   box-sizing: border-box;
 }
 
-/* Remove default padding */
+/* Remove default padding and list styles.*/
 ul,
 ol {
   padding: 0;
+  list-style: none;
 }
 
 /* Remove default margin */
@@ -37,12 +38,6 @@ body {
   line-height: 1.5;
 }
 
-/* Remove list styles on ul and ol elements */
-ul,
-ol {
-  list-style: none;
-}
-
 /* a elements get default styles */
 a {
   text-decoration-skip-ink: auto;

client/stylelint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'stylelint-config-recommended-scss'
+}