Stylelint added.

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["@atolye15/stylelint-config", "stylelint-prettier/recommended"]
+}

package.json

@@ -23,12 +23,16 @@
   },
   "devDependencies": {
     "@atolye15/eslint-config": "^1.1.1",
+    "@atolye15/stylelint-config": "^1.3.0",
     "@types/react-helmet": "^5.0.15",
     "@types/slug": "^0.9.1",
     "@types/unist": "^2.0.3",
     "eslint": "^6.8.0",
     "node-sass": "^4.13.1",
     "prettier": "^1.19.1",
+    "stylelint": "^13.2.0",
+    "stylelint-config-prettier": "^8.0.1",
+    "stylelint-prettier": "^1.1.2",
     "typescript": "^3.7.5",
     "vfile-message": "^2.0.2"
   },
@@ -39,14 +43,17 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop",
-    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
+    "format:ts": "prettier --write 'src/**/*.{ts,tsx,md}' && yarn lint:eslint --fix",
+    "format:css": "stylelint --fix --syntax scss \"src/**/*.scss\"",
+    "format": "yarn run format:ts && yarn run format:css",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
-    "lint": "yarn run lint:ts",
+    "lint": "yarn run lint:ts && yarn lint:css",
     "lint:ts": "tsc --noEmit && yarn lint:eslint",
-    "lint:eslint": "eslint 'src/**/*.{ts,tsx}'"
+    "lint:eslint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:css": "stylelint --syntax scss \"src/**/*.scss\""
   },
   "repository": {
     "type": "git",

src/styles/main.scss

@@ -1,4 +1,7 @@
+$color: #fff;
+$background: #181c27;
+
 body {
-  background-color: #181C27;
-  color: #fff;
-}
+  background-color: $background;
+  color: $color;
+}