From a367429f2b67e4ca0d9fca7692c9d9d289f80e18 Mon Sep 17 00:00:00 2001
From: simidzu2ay <simidzu2ay@protonmail.com>
Date: Fri, 12 Jul 2024 22:09:22 +0200
Subject: [PATCH] messageColors: rgba support/space instead of comma

---
 src/plugins/messageColors/constants.ts | 21 ++++++++++++++++++---
 src/plugins/messageColors/index.tsx    | 10 ++++++++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/plugins/messageColors/constants.ts b/src/plugins/messageColors/constants.ts
index ccaca7e88..303365125 100644
--- a/src/plugins/messageColors/constants.ts
+++ b/src/plugins/messageColors/constants.ts
@@ -37,12 +37,27 @@ export const settings = definePluginSettings({
 
 export const enum ColorType {
     RGB,
+    RGBA,
     HEX,
     HSL
 }
 
+// It's sooo hard to read regex without this, it makes it at least somewhat bearable
+export const replaceRegexp = (reg: string) => {
+    const n = new RegExp(reg
+        // \c - 'comma'
+        // \v - 'value'
+        // \f - 'float'
+        .replaceAll("\\f", "[+-]?([0-9]*[.])?[0-9]+")
+        .replaceAll("\\c", "(?:,|\\s)")
+        .replaceAll("\\v", "\\s*?\\d+?\\s*?"), "g");
+
+    return n;
+};
+
 export const regex = [
-    { reg: /rgb\(\s*?\d+?\s*?,\s*?\d+?\s*?,\s*?\d+?\s*?\)/g, type: ColorType.RGB },
-    { reg: /hsl\(\s*\d+\s*°?,\s*\d+%\s*,\s*\d+%\s*\)/g, type: ColorType.HSL },
+    { reg: /rgb\(\v\c\v\c\v\)/g, type: ColorType.RGB },
+    { reg: /rgba\(\v\c\v\c\v(\c|\/?)\s*\f\)/g, type: ColorType.RGBA },
+    { reg: /hsl\(\v°?\c\s*?\d+%?\s*?\c\s*?\d+%?\s*?\)/g, type: ColorType.HSL },
     { reg: /#(?:[0-9a-fA-F]{3}){1,2}/g, type: ColorType.HEX }
-];
+].map(v => { v.reg = replaceRegexp(v.reg.source); return v; });
diff --git a/src/plugins/messageColors/index.tsx b/src/plugins/messageColors/index.tsx
index 2c3570403..dafe2cada 100644
--- a/src/plugins/messageColors/index.tsx
+++ b/src/plugins/messageColors/index.tsx
@@ -10,7 +10,7 @@ import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { React } from "@webpack/common";
 
-import { ColorType, regex, RenderType, settings } from "./constants";
+import { ColorType, regex, RenderType, replaceRegexp, settings } from "./constants";
 
 const source = regex.map(r => r.reg.source).join("|");
 const matchAllRegExp = new RegExp(`^(${source})`, "i");
@@ -129,6 +129,7 @@ const calcRGBLightness = (r: number, g: number, b: number) => {
 };
 const isColorDark = (color: string, type: ColorType): boolean => {
     switch (type) {
+        case ColorType.RGBA:
         case ColorType.RGB: {
             const match = color.match(/\d+/g)!;
             const lightness = calcRGBLightness(+match[0], +match[1], +match[2]);
@@ -154,16 +155,21 @@ const getColorType = (color: string): ColorType => {
     color = color.toLowerCase().trim();
     if (color.startsWith("#")) return ColorType.HEX;
     if (color.startsWith("hsl")) return ColorType.HSL;
+    if (color.startsWith("rgba")) return ColorType.RGBA;
     if (color.startsWith("rgb")) return ColorType.RGB;
 
     throw new Error(`Can't resolve color type of ${color}`);
 };
 
 function parseColor(str: string, type: ColorType): string {
-    str = str.toLowerCase().trim();
+    str = str.toLowerCase().trim().replaceAll(/(\s|,)+/g, " ");
     switch (type) {
         case ColorType.RGB:
             return str;
+        case ColorType.RGBA:
+            if (!str.includes("/"))
+                return str.replaceAll(replaceRegexp(/\f(?=\s*?\))/.source), "/$&");
+            return str;
         case ColorType.HEX:
             return str[0] === "#" ? str : `#${str}`;
         case ColorType.HSL: