add css linter

package.json

@@ -10,6 +10,7 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
+    "lint:css": "stylelint \"src/**/*.{css,scss,vue}\" --fix",
     "format": "prettier --write src/",
     "proto:gen": "protoc --typescript-http_out=src/api/generated --proto_path=proto proto/main.proto"
   },
@@ -42,7 +43,10 @@
     "jiti": "^2.7.0",
     "naive-ui": "^2.44.1",
     "npm-run-all2": "^9.0.2",
+    "postcss-html": "^1.8.1",
     "prettier": "3.9.4",
+    "stylelint": "^17.14.1",
+    "stylelint-config-standard-scss": "^17.0.0",
     "ts-proto": "^2.12.0",
     "typescript": "~6.0.3",
     "vfonts": "^0.0.3",

src/assets/base.css

@@ -1,24 +1,20 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
-  --vt-c-white: #ffffff;
+  --vt-c-white: #fff;
   --vt-c-white-soft: #f8f8f8;
   --vt-c-white-mute: #f2f2f2;
-
   --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
+  --vt-c-black-soft: #222;
   --vt-c-black-mute: #282828;
-
   --vt-c-indigo: #2c3e50;
-
+  --vt-c-divider-light-1: rgb(60 60 60 / 29%);
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgb(60 60 60 / 12%);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgb(84 84 84 / 65%);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgb(84 84 84 / 48%);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
   --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-light-2: rgb(60 60 60 / 66%);
   --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+  --vt-c-text-dark-2: rgb(235 235 235 / 64%);
 }
 
 /* semantic color variables for this project */
@@ -26,13 +22,10 @@
   --color-background: var(--vt-c-white);
   --color-background-soft: var(--vt-c-white-soft);
   --color-background-mute: var(--vt-c-white-mute);
-
   --color-border: var(--vt-c-divider-light-2);
   --color-border-hover: var(--vt-c-divider-light-1);
-
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
-
   --section-gap: 160px;
 }
 
@@ -41,10 +34,8 @@
     --color-background: var(--vt-c-black);
     --color-background-soft: var(--vt-c-black-soft);
     --color-background-mute: var(--vt-c-black-mute);
-
     --color-border: var(--vt-c-divider-dark-2);
     --color-border-hover: var(--vt-c-divider-dark-1);
-
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
   }
@@ -80,7 +71,7 @@ body {
     'Helvetica Neue',
     sans-serif;
   font-size: 15px;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/assets/main.css

@@ -2,30 +2,34 @@
 
 body {
   overflow: hidden;
-  color: #eeeeee;
+  color: #eee;
-  background-color: #111111;
+  background-color: #111;
   scrollbar-width: none;
 }
 
 @font-face {
-  font-family: font_old_typer;
+  font-family: "font_old_typer";
   src: url('@/assets/fonts/a_OldTyper.ttf');
 }
 
 .center-message {
   display: flex;
   justify-content: center;
+
   /* горизонтальное центрирование */
   align-items: center;
+
   /* вертикальное центрирование */
   height: calc(100dvh - 100px);
   text-align: center;
+
   /* центрирование текста */
 }
 
 .content-block {
   margin-top: 70px;
   padding: 0;
+
   /* background-color: #553333; */
 }
 
@@ -33,15 +37,15 @@ body {
   height: 80vh;
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
   .center-block-custom {
     width: 700px;
-    margin: 70px auto 0 auto;
+    margin: 70px auto 0;
   }
 
   .center-block-custom-big {
     width: 1200px;
-    margin: 70px auto 0 auto;
+    margin: 70px auto 0;
   }
 
   .center-middle-block-custom {

src/components/HeaderMenu.vue

@@ -116,10 +116,10 @@ const goToLogout = () => {
     left: 0;
     width: 100%;
     height: 70px;
+
     /* background-color: brown; */
 
     padding: 20px;
-
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -129,7 +129,7 @@ const goToLogout = () => {
     display: inline-block;
     margin-left: 10px;
     cursor: pointer;
-    padding: 5px 5px;
+    padding: 5px;
     font-size: 1.1em;
 }
 

src/components/LoginPage.vue

@@ -117,7 +117,7 @@ async function signup() {
 
 <style scoped>
 .sign-card {
-  background-color: rgb(29, 29, 29);
+  background-color: rgb(29 29 29);
 }
 
 .form-label {
@@ -137,7 +137,7 @@ async function signup() {
   color: #63e2b7;
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
   .sign-card {
     width: 380px;
   }

src/components/PlaceBlock.vue

@@ -129,7 +129,7 @@ function onCreateKey(): Key {
     margin: 20px;
     padding: 20px;
     border-radius: 10px;
-    border: 1px solid #444444;
+    border: 1px solid #444;
 }
 
 .place-block:hover {
@@ -139,7 +139,7 @@ function onCreateKey(): Key {
 .place-block-plus {
     margin: 20px;
     border-radius: 10px;
-    border: 1px solid #444444;
+    border: 1px solid #444;
 }
 
 .place-block-plus:hover {

src/components/ScenariosEditorPage.vue

@@ -258,6 +258,7 @@ async function deletePlace(place: Place) {
 <style scoped>
 .settings-block {
     height: 40px;
+
     /* background-color: brown; */
 }
 
@@ -272,7 +273,7 @@ async function deletePlace(place: Place) {
 .name-text {
     padding: 3px;
     border-radius: 3px;
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgb(255 255 255 / 10%);
 }
 
 .settings-header {
@@ -285,15 +286,15 @@ async function deletePlace(place: Place) {
 
 .places-container {
     display: flex;
-    flex-direction: column;
+    flex-flow: column nowrap;
-    flex-wrap: nowrap;
     overflow-y: auto;
     padding: 20px 0;
     height: calc(100vh - 150px);
+
     /* border: 1px solid red; */
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
     .places-container {
         padding: 20px 250px;
         height: calc(100vh - 70px);

src/components/ScenariosPage.vue

@@ -87,12 +87,12 @@ getScenarios()
 <style scoped>
 .scenarios-container {
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
-    flex-wrap: wrap;
     justify-content: center;
     overflow-y: auto;
     padding: 40px 0;
     height: calc(100vh - 150px);
+
     /* border: 1px solid red; */
 }
 
@@ -100,6 +100,7 @@ getScenarios()
     margin: 10px;
     width: 150px;
     cursor: pointer;
+
     /* background-color: #553333; */
 }
 
@@ -122,7 +123,7 @@ getScenarios()
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #333333;
+    background-color: #333;
 }
 
 .scenario-image {
@@ -134,7 +135,7 @@ getScenarios()
     padding: 5px 0;
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
     .scenarios-container {
         height: calc(100vh - 70px);
     }

src/views/HomeView.vue

@@ -36,13 +36,13 @@ const keyColorClass = computed(() => {
 
 <style lang="css">
 .font-text {
-  font-family: font_old_typer;
+  font-family: "font_old_typer";
 }
 
 .content-text {
   position: relative;
   top: 100px;
-  right: 0px;
+  right: 0;
   float: right;
 }
 
@@ -56,7 +56,7 @@ const keyColorClass = computed(() => {
   color: gold;
 }
 
-@media (min-width: 1024px) {
+@media (width >= 1024px) {
   .font-text {
     position: relative;
     left: -50px;

stylelint.config.js

@@ -0,0 +1,17 @@
+export default {
+  extends: [
+    'stylelint-config-standard-scss', // Базовые правила для SCSS и CSS
+  ],
+  // Добавляем поддержку Vue файлов
+  overrides: [
+    {
+      files: ['**/*.vue'],
+      customSyntax: 'postcss-html',
+    },
+  ],
+  rules: {
+    // Здесь можно переопределить правила
+    'order/properties-alphabetical-order': true, // Сортировка свойств
+    // 'selector-class-pattern': '^[a-z][a-zA-Z0-9]+$', // Названия классов в camelCase
+  },
+};