install stylelint

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+    "extends": [
+        "stylelint-config-standard",
+        "stylelint-config-standard-scss",
+        "stylelint-config-recommended-vue",
+        "stylelint-config-recess-order",
+        "stylelint-config-css-modules"
+    ]
+}

README.md

@@ -9,6 +9,7 @@
 [![vue-i18n][badge-vue-i18n-img]][badge-vue-i18n-href]
 [![eslint][badge-eslint-img]][badge-eslint-href]
 [![remark-cli][badge-remark-cli-img]][badge-remark-cli-href]
+[![stylelint][badge-stylelint-img]][badge-stylelint-href]
 [![vitest][badge-vitest-img]][badge-vitest-href]
 [![storybook][badge-storybook-img]][badge-storybook-href]
 [![vuepress][badge-vuepress-img]][badge-vuepress-href]
@@ -21,7 +22,7 @@ To be able to build this project you need `nodejs`, `npm` and optional `docker`.
 
 The project uses `vite` as builder, `vike` to do the SSR. The design framework is `vuetify` which requires the frontend framework `vue3`. For localization `vue-i18n` is used; Session storage is handled with `pinia`.
 
-Testing is done with `vitest` and code style is enforced with `eslint` and `remark-cli`.
+Testing is done with `vitest` and code style is enforced with `eslint`, `remark-cli` and `stylelint`.
 
 This projects utilizes `storybook` to develop frontend components and `vuepress` for static documentation generation.
 
@@ -41,6 +42,7 @@ The following commands are available:
 | `npm run test:lint`        | Run all linters                                 |
 | `npm run test:lint:eslint` | Run linter eslint                               |
 | `npm run test:lint:remark` | Run linter remark                               |
+| `npm run test:lint:style`  | Run linter stylelint                            |
 | `npm run test:unit`        | Run all unit tests and generate coverage report |
 | `npm run test:unit:dev`    | Run all unit tests in watch mode                |
 | `npm test`                 | Run all tests & linters                         |
@@ -122,6 +124,9 @@ Currently none
 [badge-remark-cli-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies%5B%27remark-cli%27%5D&label=remark-cli&color=yellow
 [badge-remark-cli-href]: https://remark.js.org/
 
+[badge-stylelint-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.stylelint&label=stylelint&color=yellow
+[badge-stylelint-href]: https://stylelint.io/
+
 [badge-vitest-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.vitest&label=vitest&color=yellow
 [badge-vitest-href]: https://vitest.dev/
 

package.json

@@ -40,9 +40,10 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -o build/storybook",
     "storybook:test": "test-storybook",
-    "test:lint": "npm run test:lint:eslint && npm run test:lint:remark",
+    "test:lint": "npm run test:lint:eslint && npm run test:lint:remark && npm run test:lint:style",
     "test:lint:eslint": "eslint --ext .vue,.ts,.tsx,.js,.jsx,.json,.yml,.yaml --max-warnings 0 --ignore-path .gitignore .",
     "test:lint:remark": "remark . --quiet --frail",
+    "test:lint:style": "stylelint --max-warnings 0 --ignore-path .gitignore **/*.{css,scss,vue,vuex}",
     "test:unit": "npm run test:unit:dev -- run --coverage",
     "test:unit:dev": "vitest",
     "test": "npm run test:lint && npm run test:unit",
@@ -112,6 +113,12 @@
     "remark-preset-lint-markdown-style-guide": "^5.1.3",
     "remark-preset-lint-recommended": "^6.1.3",
     "storybook": "^7.5.3",
+    "stylelint": "^15.11.0",
+    "stylelint-config-css-modules": "^4.3.0",
+    "stylelint-config-recess-order": "^4.4.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^11.1.0",
     "vitest": "^0.34.6",
     "vuepress": "^2.0.0-rc.0"
   }

renderer/PageShell.vue

@@ -24,9 +24,11 @@ body {
   margin: 0;
   font-family: sans-serif;
 }
+
 * {
   box-sizing: border-box;
 }
+
 a {
   text-decoration: none;
 }
@@ -38,20 +40,23 @@ a {
   max-width: 900px;
   margin: auto;
 }
+
 .content {
-  padding: 20px;
-  border-left: 2px solid #eee;
-  padding-bottom: 50px;
   min-height: 100vh;
-}
-.navigation {
   padding: 20px;
-  flex-shrink: 0;
+  padding-bottom: 50px;
+  border-left: 2px solid #eee;
+}
+
+.navigation {
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
   align-items: center;
+  padding: 20px;
   line-height: 1.8em;
 }
+
 .logo {
   margin-top: 20px;
   margin-bottom: 10px;

renderer/VikeLink.vue

@@ -12,6 +12,7 @@ const pageContext = usePageContext()
 a {
   padding: 3px 10px;
 }
+
 a.active {
   background-color: #eee;
 }