refactor: change ordering config

.stylelintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": [
     "stylelint-config-standard",
-    "stylelint-config-idiomatic-order",
+    "stylelint-config-recess-order",
     "stylelint-config-html",
     "stylelint-prettier/recommended"
   ],

.vscode/settings.json

@@ -11,8 +11,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "[javascript][javascriptreact][typescript][typescriptreact][astro]": {
     "editor.formatOnSave": false

package.json

@@ -67,7 +67,7 @@
     "standard-version": "9.5.0",
     "stylelint": "15.10.3",
     "stylelint-config-html": "1.1.0",
-    "stylelint-config-idiomatic-order": "9.0.0",
+    "stylelint-config-recess-order": "4.4.0",
     "stylelint-config-standard": "34.0.0",
     "stylelint-prettier": "4.0.2"
   }

src/components/buttons/buttons.module.css

@@ -1,11 +1,11 @@
 .buttons {
   position: sticky;
-  z-index: 10;
   top: 30px;
+  z-index: 10;
   display: flex;
-  width: max-content;
+  column-gap: 10px;
   align-items: center;
   justify-content: center;
+  width: max-content;
   margin: 0 auto;
-  column-gap: 10px;
 }

src/components/buttons/play/play.module.css

@@ -1,19 +1,19 @@
 .playButton {
   display: flex;
-  width: 150px;
-  height: 45px;
   align-items: center;
   justify-content: center;
-  border: none;
-  border-radius: 100px;
-  border-top: 2px solid #34d399;
-  border-bottom: 3px solid #059669;
-  background-color: #10b981;
-  color: #022c22;
-  cursor: pointer;
+  width: 150px;
+  height: 45px;
   font-family: var(--font-heading);
   font-size: var(--font-base);
   line-height: 0;
+  color: #022c22;
+  cursor: pointer;
+  background-color: #10b981;
+  border: none;
+  border-top: 2px solid #34d399;
+  border-bottom: 3px solid #059669;
+  border-radius: 100px;
   outline: none;
 
   &:disabled,

src/components/buttons/unselect/unselect.module.css

@@ -1,19 +1,19 @@
 .unselectButton {
   display: flex;
-  width: 45px;
-  height: 45px;
   align-items: center;
   justify-content: center;
-  border: none;
-  border-radius: 100px;
-  border-top: 2px solid #fb7185;
-  border-bottom: 3px solid #be123c;
-  background-color: #f43f5e;
-  color: var(--color-foreground);
-  cursor: pointer;
+  width: 45px;
+  height: 45px;
   font-family: var(--font-heading);
   font-size: var(--font-md);
   line-height: 0;
+  color: var(--color-foreground);
+  cursor: pointer;
+  background-color: #f43f5e;
+  border: none;
+  border-top: 2px solid #fb7185;
+  border-bottom: 3px solid #be123c;
+  border-radius: 100px;
   outline: none;
   transition: 0.2s;
 
@@ -23,17 +23,17 @@
   }
 
   &.restore {
+    color: var(--color-neutral-200);
+    background-color: var(--color-neutral-700);
     border-top-color: var(--color-neutral-950);
     border-bottom-color: var(--color-neutral-600);
-    background-color: var(--color-neutral-700);
-    color: var(--color-neutral-200);
   }
 }
 
 .tooltip {
   padding: 6px 12px;
+  font-size: var(--font-xsm);
+  background-color: var(--color-neutral-100);
   border: 1px solid var(--color-neutral-200);
   border-radius: 100px;
-  background-color: var(--color-neutral-100);
-  font-size: var(--font-xsm);
 }

src/components/category/category.module.css

@@ -17,14 +17,14 @@
 
     & .icon {
       display: flex;
-      width: 45px;
-      height: 45px;
       align-items: center;
       justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background-color: var(--color-neutral-100);
       border: 1px solid var(--color-neutral-300);
       border-radius: 50%;
-      background-color: var(--color-neutral-100);
-      font-size: var(--font-md);
     }
   }
 

src/components/footer.astro

@@ -16,17 +16,17 @@ import { Container } from '@/components/container';
 <style>
   .footer {
     display: flex;
-    height: 100px;
     align-items: center;
+    height: 100px;
 
     & p {
-      color: var(--color-foreground-subtle);
       font-size: var(--font-sm);
+      color: var(--color-foreground-subtle);
       text-align: center;
 
       & a {
-        color: var(--color-foreground);
         font-weight: 500;
+        color: var(--color-foreground);
         text-decoration: none;
 
         & span {

src/components/hero.astro

@@ -44,12 +44,12 @@ const count = soundCount();
 
     & .title {
       display: flex;
-      align-items: center;
       column-gap: 15px;
+      align-items: center;
 
       & div {
-        height: 1px;
         flex-grow: 1;
+        height: 1px;
 
         &.left {
           background: linear-gradient(
@@ -77,36 +77,36 @@ const count = soundCount();
 
     & .desc {
       margin-top: 5px;
-      color: var(--color-foreground-subtle);
       line-height: 1.6;
+      color: var(--color-foreground-subtle);
     }
 
     & .sounds {
       position: relative;
       display: flex;
-      width: max-content;
       align-items: center;
       justify-content: center;
+      width: max-content;
       padding: 6px 16px;
-      border: 1px solid var(--color-neutral-200);
-      border-radius: 100px;
       margin: 20px auto 0;
-      background-color: var(--color-neutral-100);
       font-size: var(--font-xsm);
+      background-color: var(--color-neutral-100);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 100px;
 
       &::before {
         position: absolute;
         top: -1px;
         left: 50%;
         width: 70%;
         height: 1px;
+        content: '';
         background: linear-gradient(
           90deg,
           transparent,
           var(--color-neutral-400),
           transparent
         );
-        content: '';
         transform: translateX(-50%);
       }
     }

src/components/scroll-to-top/scroll-to-top.module.css

@@ -1,17 +1,17 @@
 .button {
   position: fixed;
-  z-index: 99;
   bottom: 20px;
   left: 20px;
+  z-index: 99;
   display: flex;
-  width: 45px;
-  height: 45px;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-neutral-300);
-  border-radius: 50%;
-  background-color: var(--color-neutral-100);
+  width: 45px;
+  height: 45px;
+  font-size: var(--font-md);
   color: var(--color-foreground);
   cursor: pointer;
-  font-size: var(--font-md);
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 50%;
 }

src/components/sections/about.astro

@@ -28,8 +28,8 @@ const count = soundCount();
 
     & .titleWrapper {
       display: flex;
-      align-items: center;
       column-gap: 12px;
+      align-items: center;
 
       & .title {
         margin-bottom: 12px;
@@ -39,8 +39,8 @@ const count = soundCount();
       }
 
       & .line {
-        height: 1px;
         flex-grow: 1;
+        height: 1px;
         background: linear-gradient(
           90deg,
           var(--color-neutral-300),
@@ -51,8 +51,8 @@ const count = soundCount();
     }
 
     & .desc {
-      color: var(--color-foreground-subtle);
       line-height: 1.7;
+      color: var(--color-foreground-subtle);
 
       & span {
         color: var(--color-foreground);