chore: run stylelint on our css files

web/components/chat/ChatActionMessage/ChatActionMessage.module.scss

@@ -2,10 +2,8 @@
   padding: 8px;
 	margin: 4px 1rem;
 	border-radius: 4px;
-
 	text-align: center;
 	font-size: 12px;
-
 	color: var(--theme-color-components-chat-text);
 	background-color: var(--theme-color-palette-0);
 

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 // The button that is displayed to scroll to the bottom of the chat.
 .toBottomWrap {
@@ -12,7 +12,7 @@
   button {
     background-color: var(--theme-color-background-light);
     z-index: 9999;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%), 0 1px 5px 0 rgb(0 0 0 / 12%);
     display: flex;
     align-items: center;
     opacity: 0;
@@ -29,6 +29,7 @@
   height: 100%;
   font-size: var(--chat-message-text-size);
 }
+
 .virtuoso {
   width: auto;
   flex-grow: 1;
@@ -54,8 +55,9 @@
     opacity: 0;
     transform: translateY(5px);
   }
+
   to {
     opacity: 1;
-    transform: translateY(0px);
+    transform: translateY(0);
   }
 }

web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss

@@ -1,6 +1,6 @@
 .root {
   display: inline-flex;
-  padding: 10px 0px;
+  padding: 10px 0;
   color: var(--theme-color-components-chat-text);
   font-weight: 400;
   font-size: var(--chat-message-text-size);

web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss

@@ -1,11 +1,12 @@
-@import 'styles/mixins.scss';
+@import 'styles/mixins';
 
 .chatModerationNotification {
   background-color: var(--theme-background-primary);
   color: var(--theme-color-components-chat-text);
   margin: 5px;
-  padding: 10px 10px;
+  padding: 10px;
 	font-size: var(--chat-message-text-size);
+
   @include flexCenter;
 
   .icon {

web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.module.scss

@@ -5,8 +5,10 @@
   border-radius: var(--theme-rounded-corners);
   padding: 5px 15px;
   color: var(--theme-color-components-chat-text);
+
   & .nameChangeText {
     font-weight: 400;
+
     & .plain {
       font-weight: 400;
     }

web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss

@@ -1,8 +1,8 @@
 .follower {
-  border-color: rgba(0, 0, 0, 0.3);
+  border-color: rgb(0 0 0 / 30%);
   border-width: 1px;
   border-style: solid;
-  padding: 10px 10px;
+  padding: 10px;
   border-radius: var(--theme-rounded-corners);
   background-color: var(--theme-color-background-main);
   margin: 0.5em;
@@ -14,7 +14,7 @@
   .avatar {
     height: 60px;
     width: 60px;
-    border-color: rgba(0, 0, 0, 0.3);
+    border-color: rgb(0 0 0 / 30%);
     border-width: 1px;
     border-style: solid;
     font-size: 1.8rem;

web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss

@@ -2,16 +2,16 @@
   background: var(--theme-color-background-main);
   background: linear-gradient(
     70deg,
-    rgb(87, 51, 141) 0%,
-    rgb(65, 28, 139) 40%,
-    rgb(71, 50, 133) 80%
+    rgb(87 51 141) 0%,
+    rgb(65 28 139) 40%,
+    rgb(71 50 133) 80%
   );
   margin: 5px;
   margin-bottom: 10px;
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
-  padding: 12px 12px;
+  padding: 12px;
 
   .user {
     display: flex;
@@ -20,6 +20,7 @@
     font-weight: bold;
     color: white;
   }
+
   .message {
     color: white;
 
@@ -45,6 +46,7 @@
 
   a {
     color: var(--theme-color-palette-4);
+
     :hover {
       text-decoration: underline;
       text-underline-offset: 2px;

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -1,11 +1,10 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .root {
   position: relative;
   display: flex;
-  bottom: 0px;
+  bottom: 0;
   width: 100%;
-
   padding: 0.6em;
   overflow-x: hidden;
   background-color: var(--theme-color-components-chat-background);
@@ -16,14 +15,15 @@
     color: var(--theme-color-components-form-field-text);
     background-color: var(--theme-color-palette-3);
     border-radius: var(--theme-rounded-corners);
-    bottom: 0px;
+    bottom: 0;
     width: 100%;
     padding: 0.3rem;
     overflow-x: hidden;
     transition: box-shadow 90ms ease-in-out;
+
     &:focus-within {
       background-color: var(--theme-color-components-form-field-background);
-      box-shadow: inset 0px 0px 2px 2px var(--theme-color-palette-3);
+      box-shadow: inset 0 0 2px 2px var(--theme-color-palette-3);
     }
 
     // Size of custom emoji.
@@ -54,13 +54,14 @@
     &:focus {
       outline: 1px solid var(--color-owncast-gray-500) !important;
     }
+
     & > p {
-      margin: 0px;
+      margin: 0;
     }
   }
 
   // Placeholder styling
-  :empty:before {
+  :empty::before {
     content: attr(placeholder);
     display: block;
     color: #aaa;

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -1,4 +1,4 @@
-$border-style: 3px solid currentColor;
+$border-style: 3px solid currentcolor;
 $p-size: 8px;
 $p-h-size: 8px;
 $p-v-size: 2px;
@@ -7,6 +7,7 @@ $p-v-size: 2px;
   * {
     z-index: 100;
   }
+
   border-left: $border-style;
   position: relative;
   font-size: var(--chat-message-text-size);
@@ -39,6 +40,7 @@ $p-v-size: 2px;
 
     a {
       color: var(--theme-color-palette-12);
+
       &:hover {
         color: var(--theme-color-palette-4);
       }
@@ -51,11 +53,11 @@ $p-v-size: 2px;
 
     .background {
       position: absolute;
-      top: 0px;
-      left: 0px;
+      top: 0;
+      left: 0;
       width: 100%;
       height: 100%;
-      background-color: currentColor;
+      background-color: currentcolor;
       opacity: 0.07;
       border-radius: 0.25rem;
       overflow: hidden;
@@ -68,6 +70,7 @@ $p-v-size: 2px;
     top: 5px;
     right: 10px;
     color: black;
+
     & button:focus,
     & button:active {
       display: block !important;
@@ -87,9 +90,9 @@ $p-v-size: 2px;
 }
 
 .messagePadding {
-  padding: 0.4rem 5px 0px 5px;
+  padding: 0.4rem 5px 0;
 }
 
 .messagePaddingCollapsed {
-  padding: 2px 5px 0px 5px;
+  padding: 2px 5px 0;
 }