Chore: add SASS linter functionality (#46)

* Chore: add SASS linter functionality

* Fix broken actions change

.github/workflows/main.yml

@@ -23,7 +23,9 @@ jobs:
         node-version: ${{ matrix.node-version }}
     - name: Install dependencies
       run: yarn install    
-    - name: Run the linter
+    - name: Run the TypeScript linter
       run: yarn run lint
+    - name: Run the SASS linter
+      run: yarn run lint-style
     - name: Run the builder
       run: yarn run build

.stylelintrc.json

@@ -0,0 +1,15 @@
+{
+    "extends": [
+        "stylelint-config-sass-guidelines",
+        "stylelint-prettier/recommended"
+    ],
+    "rules": {
+        "prettier/prettier": true,
+        "selector-max-id": 1,
+        "selector-no-qualifying-type": [ 
+            true,
+            {"ignore": ["attribute", "class", "id"]}
+        ]
+    },
+    "ignoreFiles": "./dist/**"
+}

.vscode/settings.json

@@ -1,6 +1,10 @@
 {
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true,
+        "source.fixAll.stylelint": true, 
     },
     "eslint.validate": [
         "javascript",

package.json

@@ -17,6 +17,7 @@
         "@types/react-router-dom": "^5.1.6",
         "bulma": "^0.9.1",
         "node-sass": "^4.14.1",
+        "prettier-stylelint": "^0.4.2",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-router-dom": "^5.2.0",
@@ -26,6 +27,7 @@
     "scripts": {
         "start": "react-scripts start",
         "lint": "eslint src/**/*.ts{,x}",
+        "lint-style": "stylelint **/*.scss",
         "build": "react-scripts build",
         "test": "react-scripts test",
         "eject": "react-scripts eject"
@@ -50,6 +52,10 @@
         "@typescript-eslint/parser": "^4.5.0",
         "eslint-config-prettier": "^6.13.0",
         "eslint-plugin-prettier": "^3.1.4",
-        "prettier": "^2.1.2"
+        "prettier": "^2.1.2",
+        "stylelint": "^13.7.2",
+        "stylelint-config-prettier": "^8.0.2",
+        "stylelint-config-sass-guidelines": "^7.1.0",
+        "stylelint-prettier": "^1.1.2"
     }
 }

src/App.scss

@@ -1,8 +1,8 @@
 .view {
     background-color: #232946;
-    width: 100vw;
-    min-height: 100%;
     height: 100vh;
+    min-height: 100%;
+    width: 100vw;
     .columns {
         height: 100%;
     }

src/components/modals/Modals.scss

@@ -11,13 +11,13 @@
     }
 
     .decision-button {
-        border: none;
-        font-size: 17px;
-        color: #fffffe;
-        padding: 10px 16px;
-        margin: 15px;
+        border: 0;
         border-radius: 8px;
+        color: #fffffe;
         cursor: pointer;
+        font-size: 17px;
+        margin: 15px;
+        padding: 10px 16px;
     }
 
     .decision-button:hover {