chore(style): Added style lint

.github/workflows/main.yml

@@ -21,6 +21,7 @@ jobs:
       run: |
         yarn install --frozen-lockfile --check-files
         yarn lint
+        yarn lint:style
         yarn test
       env:
         CI: true

.github/workflows/pull-request.yml

@@ -24,6 +24,7 @@ jobs:
       run: |
         yarn install --frozen-lockfile --check-files
         yarn lint
+        yarn lint:style
         yarn test
       env:
         CI: true

.stylelintrc

@@ -0,0 +1,35 @@
+{
+    "extends": [
+        "stylelint-config-prettier"
+    ],
+    "rules": {
+        "block-no-empty": null,
+        "comment-empty-line-before": [
+            "always",
+            {
+                "ignore": [
+                    "stylelint-commands",
+                    "after-comment"
+                ]
+            }
+        ],
+        "max-empty-lines": 2,
+        "unit-allowed-list": [
+            "em",
+            "rem",
+            "%",
+            "s",
+            "px",
+            "deg"
+        ],
+        "indentation": [
+            2,
+            {
+                "except": [
+                    "value"
+                ],
+                "severity": "error"
+            }
+        ]
+    }
+}

package.json

@@ -11,7 +11,8 @@
     "debug": "yarn start --inspect --inspect-port 9230",
     "test": "razzle test --env=jsdom",
     "start:prod": "NODE_ENV=production node build/server.js",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint:style": "stylelint ./src/**/*.css ./public/**/*.css"
   },
   "dependencies": {
     "compression": "^1.7.4",
@@ -39,6 +40,8 @@
     "prettier": "^2.3.2",
     "razzle": "^4.0.6",
     "razzle-dev-utils": "^4.0.6",
+    "stylelint": "^13.13.1",
+    "stylelint-config-prettier": "^8.0.2",
     "webpack": "^4.44.1",
     "webpack-dev-server": "^3.11.2"
   }

public/css/brands.css

@@ -108,14 +108,14 @@ button:hover,
 .button.button-messenger {
   color: #ffffff;
   background-image: linear-gradient(
-    25deg,
-    #0099ff,
-    #5f5dff,
-    #a033ff,
-    #c740cc,
-    #ff5280,
-    #ff7061
-  );
+  25deg,
+  #0099ff,
+  #5f5dff,
+  #a033ff,
+  #c740cc,
+  #ff5280,
+  #ff7061
+);
 }
 .button.button-messenger:hover,
 .button.button-messenger:focus {

public/css/dark.css

@@ -176,6 +176,7 @@ hr {
   border-radius: 50%;
 }
 
+
 .footer {
   margin-top: 36px;
   padding-bottom: 36px;

src/components/Avatar/Avatar.css

@@ -1,6 +1,6 @@
 .avatar {
-    vertical-align: middle;
-    width: 128px;
-    height: 128px;
-    border-radius: 50%;
-  }
+  vertical-align: middle;
+  width: 128px;
+  height: 128px;
+  border-radius: 50%;
+}