feat: install stylelint

.github/workflows/test.yml

@@ -253,6 +253,15 @@ jobs:
         working-directory: frontend
         run: pnpm lint
 
+  frontend-stylelint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+      - uses: ./.github/actions/setup-frontend
+      - name: Lint styles
+        working-directory: frontend
+        run: pnpm lint:styles
+
   frontend-typecheck:
     runs-on: ubuntu-latest
     steps:

AGENTS.md

@@ -39,6 +39,8 @@ Navigate to `frontend/` directory:
 - **Build Dev**: `pnpm build:dev` - Development build  
 - **Lint**: `pnpm lint` - ESLint check
 - **Lint Fix**: `pnpm lint:fix` - ESLint with auto-fix
+- **Lint Styles**: `pnpm lint:styles` - Stylelint check for CSS/SCSS
+- **Lint Styles Fix**: `pnpm lint:styles:fix` - Stylelint with auto-fix
 - **Type Check**: `pnpm typecheck` - Vue TypeScript checking
 - **Test Unit**: `pnpm test:unit` - Vitest unit tests
 - **Test E2E**: `pnpm test:e2e` - Cypress end-to-end tests
@@ -51,12 +53,12 @@ Always run both lint before committing:
 mage lint:fix
 
 # Frontend  
-cd frontend && pnpm lint:fix
+cd frontend && pnpm lint:fix && pnpm lint:styles:fix
 ```
 
 Fix any errors the lint commands report, then try comitting again.
 
-You only need to run the lint for the backend when changing backend code, and the lint for the frontend only when changing frontend code.
+You only need to run the lint for the backend when changing backend code, and the lint for the frontend only when changing frontend code. Similarly, only run style linting when modifying CSS/SCSS files or Vue component styles.
 
 ## Architecture Overview
 

frontend/.stylelintrc.json

@@ -0,0 +1,91 @@
+{
+	"extends": [
+		"stylelint-config-standard-scss",
+		"stylelint-config-recommended-vue"
+	],
+	"customSyntax": "postcss-html",
+	"plugins": [
+		"stylelint-use-logical"
+	],
+	"rules": {
+		"alpha-value-notation": null,
+		"at-rule-empty-line-before": null,
+		"at-rule-no-unknown": [
+			true,
+			{
+				"ignoreAtRules": [
+					"tailwind",
+					"apply",
+					"variants",
+					"responsive",
+					"screen",
+					"use",
+					"forward",
+					"import",
+					"each"
+				]
+			}
+		],
+		"color-function-alias-notation": null,
+		"color-function-notation": null,
+		"color-hex-length": "long",
+		"csstools/use-logical": true,
+		"declaration-block-no-redundant-longhand-properties": null,
+		"declaration-empty-line-before": null,
+		"declaration-property-value-keyword-no-deprecated": null,
+		"declaration-property-value-no-unknown": null,
+		"hue-degree-notation": null,
+		"media-query-no-invalid": null,
+		"no-descending-specificity": null,
+		"no-invalid-position-declaration": null,
+		"property-no-deprecated": null,
+		"property-no-vendor-prefix": [
+			true,
+			{
+				"ignoreProperties": ["appearance"]
+			}
+		],
+		"rule-empty-line-before": null,
+		"scss/at-rule-no-unknown": null,
+		"scss/dollar-variable-colon-space-after": "always",
+		"scss/dollar-variable-colon-space-before": "never",
+		"scss/double-slash-comment-empty-line-before": null,
+		"scss/double-slash-comment-whitespace-inside": null,
+		"scss/no-global-function-names": null,
+		"selector-class-pattern": null,
+		"selector-pseudo-element-colon-notation": null,
+		"selector-pseudo-element-no-unknown": [
+			true,
+			{
+				"ignorePseudoElements": ["v-deep", "last-child"]
+			}
+		],
+		"value-keyword-case": null
+	},
+	"overrides": [
+		{
+			"files": ["*.vue", "**/*.vue"],
+			"rules": {
+				"selector-pseudo-class-no-unknown": [
+					true,
+					{
+						"ignorePseudoClasses": ["deep", "global"]
+					}
+				],
+				"selector-pseudo-element-no-unknown": [
+					true,
+					{
+						"ignorePseudoElements": ["v-deep", "v-global", "v-slotted"]
+					}
+				]
+			}
+		}
+	],
+	"ignoreFiles": [
+		"node_modules/**/*",
+		"dist/**/*",
+		"cypress/**/*",
+		"**/*.js",
+		"**/*.ts"
+	]
+}

frontend/package.json

@@ -33,6 +33,8 @@
     "build:dev": "vite build --mode development --outDir dist-dev/",
     "lint": "eslint 'src/**/*.{js,ts,vue}'",
     "lint:fix": "pnpm run lint --fix",
+    "lint:styles": "stylelint 'src/**/*.{css,scss,vue}'",
+    "lint:styles:fix": "pnpm run lint:styles --fix",
     "test:e2e": "start-server-and-test preview http://127.0.0.1:4173 'cypress run --e2e --browser chrome'",
     "test:e2e-nix": "CYPRESS_RUN_BINARY=`which Cypress` start-server-and-test preview http://127.0.0.1:4173 'cypress run --e2e --browser chromium'",
     "test:e2e-record-test": "start-server-and-test preview:test http://127.0.0.1:4173 'cypress run --e2e --browser chrome --record'",
@@ -48,6 +50,7 @@
     "story:preview": "histoire preview"
   },
   "dependencies": {
+    "@floating-ui/dom": "1.7.3",
     "@fortawesome/fontawesome-svg-core": "7.0.0",
     "@fortawesome/free-regular-svg-icons": "7.0.0",
     "@fortawesome/free-solid-svg-icons": "7.0.0",
@@ -58,7 +61,6 @@
     "@kyvg/vue3-notification": "3.4.1",
     "@sentry/tracing": "7.120.4",
     "@sentry/vue": "10.1.0",
-    "@floating-ui/dom": "1.7.3",
     "@tiptap/core": "3.0.9",
     "@tiptap/extension-code-block-lowlight": "3.0.9",
     "@tiptap/extension-hard-break": "3.0.9",
@@ -138,6 +140,11 @@
     "rollup-plugin-visualizer": "6.0.3",
     "sass-embedded": "1.90.0",
     "start-server-and-test": "2.0.13",
+    "stylelint": "^16.23.0",
+    "stylelint-config-property-sort-order-smacss": "^10.0.0",
+    "stylelint-config-recommended-vue": "^1.6.1",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-use-logical": "^2.1.2",
     "typescript": "5.9.2",
     "unplugin-inject-preload": "3.0.0",
     "vite": "7.0.6",