Add CSS linting with Stylelint

Author: DiogoRibeiro7

.github/workflows/jekyll.yml

@@ -39,6 +39,14 @@ jobs:
           ruby-version: '3.3' # Not needed with a .ruby-version file
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
           cache-version: 0 # Increment this number if you need to re-download cached gems
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install Node dependencies
+        run: npm ci
+      - name: Lint CSS
+        run: npm run lint:css
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v5

.stylelintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "stylelint-config-standard"
+}
+

README.md

@@ -39,6 +39,14 @@ npm run build:js   # minify and add banner
 npm run watch:js   # optional: automatically rebuild on changes
 ```
 
+## CSS linting
+
+Lint all SCSS files with [Stylelint](https://stylelint.io/):
+
+```bash
+npm run lint:css
+```
+
 ## Local development
 
 Install Ruby gems specified in the `Gemfile` with:

package.json

@@ -24,13 +24,16 @@
   "devDependencies": {
     "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
-    "uglify-js": "^3.13.6"
+    "uglify-js": "^3.13.6",
+    "stylelint": "^15.0.0",
+    "stylelint-config-standard": "^34.0.0"
   },
   "scripts": {
     "uglify": "uglifyjs assets/js/vendor/jquery/jquery-3.6.0.js assets/js/plugins/jquery.fitvids.js assets/js/plugins/jquery.greedy-navigation.js assets/js/plugins/jquery.magnific-popup.js assets/js/plugins/jquery.ba-throttle-debounce.js assets/js/plugins/smooth-scroll.js assets/js/plugins/gumshoe.js assets/js/_main.js -c -m -o assets/js/main.min.js",
     "add-banner": "node banner.js",
     "watch:js": "onchange \"assets/js/**/*.js\" -e \"assets/js/main.min.js\" -- npm run build:js",
     "build:js": "npm run uglify && npm run add-banner",
+    "lint:css": "stylelint 'assets/css/**/*.scss' '_sass/**/*.scss'",
     "test": "node test.js"
   }
 }