Add stylelint

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "indentation": 4
+    }
+}

.vscode/extensions.json

@@ -1,10 +1,11 @@
 {
     "recommendations": [
-        "EditorConfig.EditorConfig",
         "dbaeumer.vscode-eslint",
+        "eamodio.gitlens",
+        "EditorConfig.EditorConfig",
+        "ExodiusStudios.comment-anchors",
         "formulahendry.auto-rename-tag",
         "GregorBiswanger.json2ts",
-        "eamodio.gitlens",
-        "ExodiusStudios.comment-anchors"
+        "stylelint.vscode-stylelint"
     ]
 }

package.json

@@ -22,8 +22,9 @@
         "buildWeb": "node --require=./scripts/suppressExperimentalWarnings.js scripts/build/buildWeb.mjs",
         "inject": "node scripts/runInstaller.mjs",
         "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+        "lint-styles": "stylelint \"src/**/*.css\"",
         "lint:fix": "pnpm lint --fix",
-        "test": "pnpm lint && pnpm build && pnpm testTsc",
+        "test": "pnpm build && pnpm lint && pnpm lint-styles && pnpm testTsc",
         "testWeb": "pnpm lint && pnpm buildWeb && pnpm testTsc",
         "testTsc": "tsc --noEmit",
         "uninject": "node scripts/runInstaller.mjs",
@@ -56,6 +57,8 @@
         "moment": "^2.29.4",
         "puppeteer-core": "^19.6.0",
         "standalone-electron-types": "^1.0.0",
+        "stylelint": "^14.16.1",
+        "stylelint-config-standard": "^29.0.0",
         "type-fest": "^3.5.3",
         "typescript": "^4.9.4"
     },

src/components/PluginSettings/styles.css

@@ -94,6 +94,7 @@
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
+    /* stylelint-disable-next-line property-no-unknown */
     box-orient: vertical;
 }
 
@@ -132,6 +133,6 @@
     margin-top: 0.5em;
 }
 
-.vc-plugins-info-button svg:not(:hover):not(:focus) {
+.vc-plugins-info-button svg:not(:hover, :focus) {
     color: var(--text-muted);
 }

src/components/VencordSettings/settingsStyles.css

@@ -16,9 +16,8 @@
     gap: 1em;
     align-items: center;
     justify-content: space-between;
-    flex-wrap: wrap;
     flex-grow: 1;
-    flex-direction: row;
+    flex-flow: row wrap;
     margin-bottom: 1em;
 }
 

src/plugins/messageLogger/index.tsx

@@ -45,8 +45,8 @@ export default definePlugin({
     },
 
     stop() {
-        document.querySelectorAll(".messageLogger-deleted").forEach(e => e.remove());
-        document.querySelectorAll(".messageLogger-edited").forEach(e => e.remove());
+        document.querySelectorAll(".messagelogger-deleted").forEach(e => e.remove());
+        document.querySelectorAll(".messagelogger-edited").forEach(e => e.remove());
         document.body.classList.remove("messagelogger-red-overlay");
         document.body.classList.remove("messagelogger-red-text");
     },
@@ -54,7 +54,7 @@ export default definePlugin({
     renderEdit(edit: { timestamp: any, content: string; }) {
         return (
             <ErrorBoundary noop>
-                <div className="messageLogger-edited">
+                <div className="messagelogger-edited">
                     {Parser.parse(edit.content)}
                     <Timestamp
                         timestamp={edit.timestamp}
@@ -252,7 +252,7 @@ export default definePlugin({
                 },
                 {
                     match: /\["className","attachment","inlineMedia".+?className:/,
-                    replace: "$& (deleted ? 'messageLogger-deleted-attachment ' : '') +"
+                    replace: "$& (deleted ? 'messagelogger-deleted-attachment ' : '') +"
                 }
             ]
         },
@@ -268,9 +268,9 @@ export default definePlugin({
                     replace: "var $1=$2.id,deleted=$2.message.deleted,"
                 },
                 {
-                    // Append messageLogger-deleted to classNames if deleted
+                    // Append messagelogger-deleted to classNames if deleted
                     match: /\)\("li",\{(.+?),className:/,
-                    replace: ")(\"li\",{$1,className:(deleted ? \"messageLogger-deleted \" : \"\")+"
+                    replace: ")(\"li\",{$1,className:(deleted ? \"messagelogger-deleted \" : \"\")+"
                 }
             ]
         },

src/plugins/messageLogger/messageLogger.css

@@ -1,27 +1,28 @@
-.messagelogger-red-overlay .messageLogger-deleted {
-    background-color: rgba(240, 71, 71, 0.15);
+.messagelogger-red-overlay .messagelogger-deleted {
+    background-color: rgba(240 71 71 / 15%);
 }
-.messagelogger-red-text .messageLogger-deleted div {
+
+.messagelogger-red-text .messagelogger-deleted div {
     color: #f04747;
 }
 
-.messageLogger-deleted [class^="buttons"] {
+.messagelogger-deleted [class^="buttons"] {
     display: none;
 }
 
-.messageLogger-deleted-attachment {
+.messagelogger-deleted-attachment {
     filter: grayscale(1);
 }
 
-.messageLogger-deleted-attachment:hover {
+.messagelogger-deleted-attachment:hover {
     filter: grayscale(0);
     transition: 250ms filter linear;
 }
 
-.theme-dark .messageLogger-edited {
+.theme-dark .messagelogger-edited {
     filter: brightness(80%);
 }
 
-.theme-light .messageLogger-edited {
+.theme-light .messagelogger-edited {
     opacity: 0.5;
 }

src/plugins/shikiCodeblocks/devicon.css

@@ -1 +1 @@
-@import url('https://cdn.jsdelivr.net/gh/devicons/devicon@v2.10.1/devicon.min.css');
+@import url("https://cdn.jsdelivr.net/gh/devicons/devicon@v2.10.1/devicon.min.css");

src/plugins/shikiCodeblocks/shiki.css

@@ -12,7 +12,6 @@
     overflow-x: auto;
     padding: 0.5em;
     position: relative;
-
     font-size: 0.875rem;
     line-height: 1.125rem;
     text-indent: 0;
@@ -57,7 +56,7 @@
 
 .shiki-spinner-container {
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: rgb(0 0 0 / 60%);
     display: flex;
     position: absolute;
     justify-content: center;

src/plugins/spotifyControls/spotifyStyles.css

@@ -1,20 +1,22 @@
 #vc-spotify-player {
     padding: 0.375rem 0.5rem;
     border-bottom: 1px solid var(--background-modifier-accent);
+
     --vc-spotify-green: #1db954; /* so cusotm themes can easily change it */
 }
+
 .vc-spotify-button {
     background: none;
     color: var(--interactive-normal);
     padding: 0;
     width: 32px;
     height: 32px;
-
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
+
 .vc-spotify-button:hover {
     color: var(--interactive-hover);
     background-color: var(--background-modifier-selected);
@@ -24,15 +26,18 @@
     height: 24px;
     width: 24px;
 }
+
 [class*="vc-spotify-shuffle"] > svg,
 [class*="vc-spotify-repeat"] > svg {
     width: 22px;
     height: 22px;
 }
+
 .vc-spotify-button svg path {
     width: 100%;
     height: 100%;
 }
+
 /* .vc-spotify-button:hover {
     filter: brightness(1.3);
 } */
@@ -51,7 +56,9 @@
     white-space: nowrap;
     padding-right: 0.2em;
     max-width: 100%;
+    margin: unset;
 }
+
 .vc-spotify-repeat-1 {
     font-size: 70%;
     position: absolute;
@@ -92,15 +99,12 @@
     overflow: hidden;
 }
 
-.vc-spotify-tooltip-text {
-    margin: unset;
-}
-
 #vc-spotify-song-title {
     color: var(--header-primary);
     font-size: 14px;
     font-weight: 600;
 }
+
 .vc-spotify-ellipoverflow {
     white-space: nowrap;
     overflow: hidden;
@@ -137,7 +141,6 @@
 
 #vc-spotify-progress-bar {
     position: relative;
-
     color: var(--text-normal);
     width: 100%;
     margin: 0.5em 0;
@@ -153,6 +156,7 @@
 #vc-spotify-progress-bar > [class^="slider"] [class^="bar-"] {
     height: 4px !important;
 }
+
 #vc-spotify-progress-bar > [class^="slider"] [class^="grabber"] {
     /* these importants are neccessary, it applies a width and height through inline styles */
     height: 10px !important;
@@ -168,7 +172,6 @@
 
 .vc-spotify-progress-time {
     font-size: 12px;
-
     top: 10px;
     position: absolute;
 }
@@ -176,6 +179,7 @@
 .vc-spotify-time-left {
     left: 0;
 }
+
 .vc-spotify-time-right {
     right: 0;
 }