feat: Proper CSS api & css bundle (#269)

Co-authored-by: Vap0r1ze <superdash993@gmail.com>

2 files changed, 29 insertions, 37 deletions

diff --git a/src/plugins/messageLogger/index.tsx b/src/plugins/messageLogger/index.tsx
index abdb2f2..e650dbb 100644
--- a/src/plugins/messageLogger/index.tsx
+++ b/src/plugins/messageLogger/index.tsx
@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./messageLogger.css";
+
 import { Settings } from "@api/settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
@@ -42,51 +44,14 @@ export default definePlugin({
     timestampModule: null as any,
     moment: null as Function | null,
 
-    css: `
-        .messagelogger-red-overlay .messageLogger-deleted {
-            background-color: rgba(240, 71, 71, 0.15);
-        }
-        .messagelogger-red-text .messageLogger-deleted div {
-            color: #f04747;
-        }
-
-        .messageLogger-deleted [class^="buttons"] {
-            display: none;
-        }
-
-        .messageLogger-deleted-attachment {
-            filter: grayscale(1);
-        }
-
-        .messageLogger-deleted-attachment:hover {
-            filter: grayscale(0);
-            transition: 250ms filter linear;
-        }
-
-        .theme-dark .messageLogger-edited {
-            filter: brightness(80%);
-        }
-
-        .theme-light .messageLogger-edited {
-            opacity: 0.5;
-        }
-    `,
-
     start() {
         this.moment = findByPropsLazy("relativeTimeRounding", "relativeTimeThreshold");
         this.timestampModule = findByPropsLazy("messageLogger_TimestampComponent");
 
-        const style = this.style = document.createElement("style");
-        style.textContent = this.css;
-        style.id = "MessageLogger-css";
-        document.head.appendChild(style);
-
         addDeleteStyleClass();
     },
 
     stop() {
-        this.style?.remove();
-
         document.querySelectorAll(".messageLogger-deleted").forEach(e => e.remove());
         document.querySelectorAll(".messageLogger-edited").forEach(e => e.remove());
         document.body.classList.remove("messagelogger-red-overlay");
diff --git a/src/plugins/messageLogger/messageLogger.css b/src/plugins/messageLogger/messageLogger.css
new file mode 100644
index 0000000..94a3e25
--- /dev/null
+++ b/src/plugins/messageLogger/messageLogger.css
@@ -0,0 +1,27 @@
+.messagelogger-red-overlay .messageLogger-deleted {
+    background-color: rgba(240, 71, 71, 0.15);
+}
+.messagelogger-red-text .messageLogger-deleted div {
+    color: #f04747;
+}
+
+.messageLogger-deleted [class^="buttons"] {
+    display: none;
+}
+
+.messageLogger-deleted-attachment {
+    filter: grayscale(1);
+}
+
+.messageLogger-deleted-attachment:hover {
+    filter: grayscale(0);
+    transition: 250ms filter linear;
+}
+
+.theme-dark .messageLogger-edited {
+    filter: brightness(80%);
+}
+
+.theme-light .messageLogger-edited {
+    opacity: 0.5;
+}