chore: add stylelint with recess-order and enable it in CI

.github/actions/ci/action.yml

@@ -25,10 +25,9 @@ runs:
           shell: bash
           run: pnpm lint-ts
 
-        #        TODO: Add Stylelint
-        #        - name: Run Stylelint
-        #          shell: bash
-        #          run: pnpm lint-css
+        - name: Run Stylelint
+          shell: bash
+          run: pnpm lint-css
 
         - name: Run Markdownlint
           shell: bash

.lintstagedrc.json

@@ -1,5 +1,6 @@
 {
     "*.md": "markdownlint-cli2 --fix",
-    "*.{yml,yaml,json,html,scss}": "prettier -w",
+    "*.{yml,yaml,json,html}": "prettier -w",
+    "*.scss": ["prettier -w", "stylelint --fix"],
     "*.{mjs,ts}": ["prettier -w", "eslint --fix"]
 }

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": ["stylelint-config-standard-scss", "stylelint-config-recess-order"]
+}

.vscode/extensions.json

@@ -3,6 +3,7 @@
         "angular.ng-template",
         "esbenp.prettier-vscode",
         "dbaeumer.vscode-eslint",
+        "stylelint.vscode-stylelint",
         "editorconfig.editorconfig",
         "davidanson.vscode-markdownlint",
         "vitest.explorer",

.vscode/tasks.json

@@ -61,6 +61,13 @@
             "detail": "ng lint",
             "problemMatcher": []
         },
+        {
+            "type": "npm",
+            "script": "lint-css",
+            "label": "lint-css",
+            "detail": "stylelint \"**/*.scss\"",
+            "problemMatcher": []
+        },
         {
             "type": "npm",
             "script": "lint-md",

README.md

@@ -51,6 +51,22 @@ This repo also lints `.ts` and `.html` files with ESLint (`eslint.config.mjs`, v
 
 Run `pnpm lint-ts` to check the whole project from the command line.
 
+This repo also lints `.scss` files with Stylelint (`.stylelintrc.json`), using `stylelint-config-standard-scss` and `stylelint-config-recess-order` to enforce a consistent property order. Configure your editor to surface lint errors inline, and optionally fix them on save:
+
+- **VS Code**: install the recommended [Stylelint extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) (also prompted via `.vscode/extensions.json`). It picks up `.stylelintrc.json` and shows lint errors inline automatically; to also fix them on save, add to your `settings.json`:
+
+  ```json
+  {
+      "editor.codeActionsOnSave": {
+          "source.fixAll.stylelint": "explicit"
+      }
+  }
+  ```
+
+- **WebStorm**: open Settings → Languages & Frameworks → Style Sheets → Stylelint, check **Enable**, select **Automatic Stylelint configuration**, and check **Run Stylelint --fix on save**.
+
+Run `pnpm lint-css` to check the whole project from the command line.
+
 ## Usage
 
 ```bash
@@ -61,6 +77,7 @@ pnpm test-ci       # Run tests headless, as CI does
 pnpm format        # Format all files with Prettier
 pnpm format-check  # Check formatting without writing changes
 pnpm lint-ts       # Lint TypeScript and HTML files with ESLint
+pnpm lint-css      # Lint SCSS files with Stylelint
 pnpm lint-md       # Lint Markdown files with markdownlint-cli2
 ```
 

package.json

@@ -11,6 +11,7 @@
     "test": "ng test",
     "test-ci": "ng test -c ci",
     "lint-ts": "ng lint",
+    "lint-css": "stylelint \"**/*.scss\"",
     "lint-md": "markdownlint-cli2",
     "format": "prettier -w .",
     "format-check": "prettier -l ."
@@ -58,6 +59,10 @@
     "playwright": "~1.62.0",
     "prettier": "~3.9.6",
     "prettier-plugin-organize-imports": "~4.3.0",
+    "stylelint": "~17.14.1",
+    "stylelint-config-recess-order": "~7.7.0",
+    "stylelint-config-standard-scss": "~17.0.0",
+    "stylelint-order": "~8.1.1",
     "typescript": "~6.0.3",
     "typescript-eslint": "~8.65.0",
     "vitest": "~4.1.10"