Stylelint

BlueManCZ · Jan 5, 2025 · 47cf26e · 47cf26e
1 parent 3297507
commit 47cf26e
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 35 deletions.
diff --git a/src/client/.stylelintrc.json b/src/client/.stylelintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-prettier-scss",
+    "stylelint-config-property-sort-order-smacss"
+  ],
+  "plugins": [
+    "stylelint-order"
+  ],
+  "rules": {
+    "media-feature-range-notation": null
+  }
+}
diff --git a/src/client/packages/typescript-config/base.json b/src/client/packages/typescript-config/base.json
@@ -6,7 +6,7 @@
     "esModuleInterop": true,
     "incremental": false,
     "isolatedModules": true,
-    "lib": ["es2023", "DOM", "DOM.Iterable"],
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "module": "NodeNext",
     "moduleDetection": "force",
     "moduleResolution": "Bundler",

diff --git a/src/client/packages/ui/package.json b/src/client/packages/ui/package.json
@@ -21,6 +21,7 @@
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0 --cache",
+    "stylelint": "stylelint \"**/*.scss\"",
     "test": "jest",
     "generate:component": "turbo gen react-component"
   },

diff --git a/src/client/packages/ui/src/components/Icon/Icon.module.scss b/src/client/packages/ui/src/components/Icon/Icon.module.scss
@@ -1,8 +1,8 @@
 .icon {
+    display: inline-block;
     transform: var(--icon-transform);
     transition: var(--transition-default);
     opacity: var(--icon-opacity);
-    display: inline-block;
 
     $this: &;
 

diff --git a/src/client/packages/ui/src/components/Navbar/Navbar.module.scss b/src/client/packages/ui/src/components/Navbar/Navbar.module.scss
@@ -1,19 +1,19 @@
 .navbar {
+    box-sizing: border-box;
     flex-direction: column;
     align-items: center;
+    min-width: 300px;
     background: #fff;
-    box-sizing: border-box;
     gap: 5px;
-    min-width: 300px;
 
     @media (max-width: 1000px) {
         display: none;
-        width: 100%;
         position: fixed;
-        height: 100%;
-        left: 0;
-        top: 0;
         z-index: 100;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
     }
 
     &--visible {

diff --git a/src/client/packages/ui/src/components/Navbar/components/NavbarItem/NavbarItem.module.scss b/src/client/packages/ui/src/components/Navbar/components/NavbarItem/NavbarItem.module.scss
@@ -1,19 +1,19 @@
 .navbar-item {
-    background: transparent;
-    text-decoration: none;
-    color: inherit;
-    width: 80%;
+    display: flex;
     box-sizing: border-box;
-    gap: 15px;
+    align-items: center;
+    width: 80%;
     padding: 13px 15px;
-    display: flex;
     border-radius: 10px;
-    align-items: center;
+    background: transparent;
+    color: inherit;
+    text-decoration: none;
+    gap: 15px;
 
     &--active {
         background: var(--color-primary) !important;
-        color: var(--color-mono-light);
         box-shadow: var(--box-shadow-card);
+        color: var(--color-mono-light);
     }
 
     &:hover {

diff --git a/src/client/packages/ui/src/components/NavbarLayout/NavbarLayout.module.scss b/src/client/packages/ui/src/components/NavbarLayout/NavbarLayout.module.scss
@@ -3,22 +3,22 @@
     width: 100%;
 
     &__content {
-        padding: 2rem;
         box-sizing: border-box;
-        width: 0;
         flex-grow: 1;
+        width: 0;
+        padding: 2rem;
 
         @media (max-width: 1000px) {
-            padding: 1rem;
             width: 100%;
+            padding: 1rem;
         }
     }
 
     &__mobile-menu-button {
         display: none;
         position: absolute;
-        right: 1rem;
         top: .8rem;
+        right: 1rem;
 
         @media (max-width: 1000px) {
             display: block;

diff --git a/src/client/packages/ui/src/components/Text/Text.module.scss b/src/client/packages/ui/src/components/Text/Text.module.scss
@@ -86,7 +86,7 @@
         $steps: 20;
         @for $i from 0 through $steps {
             #{math.percentage(calc($i*(1/$steps)))} {
-                clip:rect(math.random(150) + px, 100vw, math.random(150) + px, 0)
+                clip: rect(math.random(150) + px, 100vw, math.random(150) + px, 0)
             }
         }
     }
@@ -95,17 +95,8 @@
         $steps: 20;
         @for $i from 0 through $steps {
             #{math.percentage(calc($i*(1/$steps)))} {
-                clip:rect(math.random(150) + px, 100vw, math.random(150) + px, 0)
+                clip: rect(math.random(150) + px, 100vw, math.random(150) + px, 0)
             }
         }
     }
-
-    //a {
-    //    color: var(--color-primary);
-    //    text-decoration: none;
-    //
-    //    &:hover {
-    //        text-decoration: underline;
-    //    }
-    //}
 }
diff --git a/src/client/packages/ui/src/components/common.scss b/src/client/packages/ui/src/components/common.scss
@@ -8,12 +8,12 @@ html {
 }
 
 body {
-    margin: 0;
-    background: #f5f6fa;
-    color: var(--color-mono-dark);
     display: flex;
     flex-direction: row;
     flex-grow: 1;
+    margin: 0;
+    background: #f5f6fa;
+    color: var(--color-mono-dark);
 }
 
 :root {

diff --git a/src/client/packages/ui/src/components/mixins.scss b/src/client/packages/ui/src/components/mixins.scss
@@ -1,9 +1,9 @@
 @mixin card {
     box-sizing: border-box;
     max-width: 100%;
+    overflow: auto;
     border-radius: var(--border-radius-medium);
     background: var(--color-mono-white);
     box-shadow: var(--box-shadow-card);
     color: var(--color-mono-dark);
-    overflow: auto;
 }