Add local CSS lint checks (#4068)

* update package scripts to include prettifying scss files and stylelint-ing; fix related issues found from stylelinter

* revert old prettier autofix

* lint

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

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

@@ -4,9 +4,9 @@
   background-color: var(--theme-background-primary);
   color: var(--theme-color-components-chat-text);
   padding: 10px;
-	font-size: var(--chat-message-text-size);
+  font-size: var(--chat-message-text-size);
 
-  @include flexCenter;
+  @include flex-center;
 
   .icon {
     margin-right: 10px;

web/package.json

@@ -9,12 +9,13 @@
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
-		"lint": "eslint --fix --ext .js,.ts,.tsx types/ pages/ components/ stories/",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
-		"build-styles": "cd ./style-definitions && style-dictionary build && ./build.sh && cd -",
-		"test": "jest",
-		"format": "prettier --write  **/*.{js,ts,jsx,tsx,css,md}"
+		"lint": "eslint --fix --ext .js,.ts,.tsx types/ pages/ components/ stories/ && npm run stylelint",
+    "stylelint": "stylelint **/*.scss",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build-styles": "cd ./style-definitions && style-dictionary build && ./build.sh && cd -",
+    "test": "jest",
+    "format": "prettier --write  **/*.{js,ts,jsx,tsx,css,md,scss}"
 	},
 	"dependencies": {
 		"@ant-design/icons": "4.8.3",

web/styles/ant-overrides.scss

@@ -46,17 +46,6 @@ BUTTONS
   border-radius: var(--theme-rounded-corners);
   border-color: var(--theme-color-components-primary-button-border);
 
-  &:hover,
-  &:focus {
-    border-color: var(--theme-color-action-hover);
-    color: var(--theme-color-action-hover);
-    background-color: var(--theme-color-components-secondary-button-background);
-  }
-
-  &:focus {
-    border-color: var(--theme-color-components-secondary-button-text);
-  }
-
   &[ant-click-animating-without-extra-node]::after {
     animation: 0s !important;
   }

web/styles/globals.scss

@@ -18,18 +18,18 @@
   --chat-notification-icon-padding: 6px;
   --chat-message-padding: 10px;
   --chat-text-highlight-border-radius: 3px;
-	--player-container-height: 75vh;
-	--status-bar-height: 2rem;
-	--footer-padding-x: 1rem;
+  --player-container-height: 75vh;
+  --status-bar-height: 2rem;
+  --footer-padding-x: 1rem;
 
   @include screen(tablet) {
     --header-height: 3.85rem;
-		--player-container-height: 400px;
+    --player-container-height: 400px;
   }
 
-	@include screen(mobile) {
-		--player-container-height: 250px;
-	}
+  @include screen(mobile) {
+    --player-container-height: 250px;
+  }
 }
 
 ::selection {

web/styles/mixins.scss

@@ -1,11 +1,11 @@
-@mixin flexCenter {
+@mixin flex-center {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 @mixin screen($breakpoint) {
-    @if $breakpoint == desktop {    
+  @if $breakpoint == desktop {
     @media only screen and (width >= 768px) {
       @content;
     }