add stylelint

.gitignore

@@ -12,6 +12,7 @@ coverage/
 **/.vitepress/cache/
 **/.vitepress/.temp/
 .eslintcache
+.stylelintcache
 
 # Dotenv configs
 .env
@@ -26,6 +27,7 @@ debug
 .devcontainer/
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea/
 *.code-workspace
 .history/

.stylelintrc.json

@@ -0,0 +1,49 @@
+{
+	"extends": ["stylelint-config-standard"],
+
+	"plugins": ["stylelint-use-logical"],
+
+	"overrides": [
+		{
+			"files": ["**/*.scss"],
+			"extends": ["stylelint-config-standard-scss"]
+		},
+		{
+			"files": ["**/*.vue"],
+			"extends": ["stylelint-config-standard-scss", "stylelint-config-standard-vue/scss"],
+			"rules": {
+				"scss/double-slash-comment-empty-line-before": null,
+				"scss/double-slash-comment-whitespace-inside": null
+			}
+		}
+	],
+
+	"ignoreFiles": ["docs/**"],
+
+	"rules": {
+		"alpha-value-notation": null,
+		"at-rule-empty-line-before": null,
+		"color-function-alias-notation": null,
+		"color-function-notation": null,
+		"comment-empty-line-before": null,
+		"custom-property-empty-line-before": null,
+		"custom-property-pattern": null,
+		"declaration-block-no-redundant-longhand-properties": [true, { "ignoreShorthands": ["inset"] }],
+		"declaration-empty-line-before": null,
+		"font-family-name-quotes": "always-unless-keyword",
+		"font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": ["Material Symbols"] }],
+		"media-feature-range-notation": null,
+		"no-descending-specificity": null,
+		"property-no-vendor-prefix": [true, { "ignoreProperties": ["user-select", "appearance", "mask-image"] }],
+		"rule-empty-line-before": ["always", { "ignore": ["first-nested"] }],
+		"selector-class-pattern": null,
+		"selector-not-notation": null,
+		"selector-pseudo-element-no-unknown": [true, { "ignorePseudoElements": ["v-deep", "v-global", "v-slotted"] }],
+		"value-keyword-case": [
+			"lower",
+			{ "ignoreProperties": ["text-rendering"], "ignoreFunctions": ["v-bind"], "ignoreKeywords": ["currentColor"] }
+		],
+
+		"csstools/use-logical": "always"
+	}
+}

.vscode/extensions.json

@@ -1,3 +1,9 @@
 {
-	"recommendations": ["dbaeumer.vscode-eslint", "editorconfig.editorconfig", "esbenp.prettier-vscode", "vue.volar"]
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"stylelint.vscode-stylelint",
+		"editorconfig.editorconfig",
+		"esbenp.prettier-vscode",
+		"vue.volar"
+	]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"stylelint.validate": ["css", "scss", "vue"]
+}

package.json

@@ -7,6 +7,7 @@
 		"build": "pnpm --recursive --filter '!docs' run build",
 		"format": "prettier --cache --check .",
 		"lint": "eslint --cache .",
+		"lint:style": "stylelint '**/*.{css,scss,vue}' --ignore-path .gitignore --cache",
 		"test": "pnpm --recursive --filter '!tests-blackbox' test",
 		"test:blackbox": "rimraf ./dist && pnpm --filter directus deploy --prod dist && pnpm --filter tests-blackbox test"
 	},
@@ -18,8 +19,14 @@
 		"eslint-config-prettier": "9.1.0",
 		"eslint-plugin-vue": "9.32.0",
 		"globals": "15.15.0",
+		"postcss-html": "1.8.0",
 		"prettier": "3.1.0",
 		"rimraf": "6.0.1",
+		"stylelint": "16.21.0",
+		"stylelint-config-standard": "38.0.0",
+		"stylelint-config-standard-scss": "15.0.1",
+		"stylelint-config-standard-vue": "1.0.0",
+		"stylelint-use-logical": "2.1.2",
 		"typescript": "5.8.2",
 		"typescript-eslint": "8.25.0"
 	},