From 92e278d406165242f31b532dba014e8154204d0f Mon Sep 17 00:00:00 2001
From: ilja <git@ilja.space>
Date: Sun, 4 Aug 2024 17:44:21 +0200
Subject: [PATCH] Move MFM SCSS to separate SCSS

MFM was defined in three places.
There was ./src/components/status_body/status_body.scss => I moved this to ./src/components/status_content/mfm.scss
There was ./src/components/status_content/status_content.vue => I moved this to ./src/components/status_content/mfm.scss
There's ./static/mfm.css => I kept this as-is

./src/components/status_content/mfm.scss is now being loaded in ./src/components/status_content/status_content.vue

I added a comment in both ./src/components/status_content/mfm.scss and ./static/mfm.css referencing each other

Note that this is just a first step in an overhoal of how MFM is handled. It seemed easier to do this as a first step and then build further on that.
---
 src/components/status_body/status_body.scss   | 18 ---------
 src/components/status_content/mfm.scss        | 37 +++++++++++++++++++
 .../status_content/status_content.vue         | 18 +--------
 static/mfm.css                                |  1 +
 4 files changed, 39 insertions(+), 35 deletions(-)
 create mode 100644 src/components/status_content/mfm.scss

diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 434cb482..b9e328c8 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -23,24 +23,6 @@
     transition: 0.05s;
   }
 
-  ._mfm_x2_ {
-    .emoji {
-      height: 100px;
-    }
-  }
-
-  ._mfm_x3_ {
-    .emoji {
-      height: 150px;
-    }
-  }
-
-  ._mfm_x4_ {
-    .emoji {
-      height: 200px;
-    }
-  }
-
   .attachments {
     margin-top: 0.5em;
   }
diff --git a/src/components/status_content/mfm.scss b/src/components/status_content/mfm.scss
new file mode 100644
index 00000000..45d32d4e
--- /dev/null
+++ b/src/components/status_content/mfm.scss
@@ -0,0 +1,37 @@
+/* Some MFM CSS is also defined in ./static/mfm.css */
+.StatusContent {
+  ._mfm_x2_ {
+    .emoji {
+      height: 100px;
+    }
+  }
+
+  ._mfm_x3_ {
+    .emoji {
+      height: 150px;
+    }
+  }
+
+  ._mfm_x4_ {
+    .emoji {
+      height: 200px;
+    }
+  }
+
+  &.mfm-hover:not(:hover) {
+    .mfm {
+      animation: none !important;
+    }
+  }
+  &.mfm-disabled {
+    span {
+      font-size: 100% !important;
+    }
+    .mfm {
+      animation: none !important;
+    }
+    .emoji {
+      height: 32px !important;
+    }
+  }
+}
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 15f629d1..0803be5c 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -64,6 +64,7 @@
 </template>
 
 <script src="./status_content.js"></script>
+<style lang="scss" src="./mfm.scss" />
 <style lang="scss">
 .StatusContent {
   flex: 1;
@@ -75,23 +76,6 @@
       height: 50px;
     }
   }
-
-  &.mfm-hover:not(:hover) {
-    .mfm {
-      animation: none !important;
-    }
-  }
-  &.mfm-disabled {
-    span {
-      font-size: 100% !important;
-    }
-    .mfm {
-      animation: none !important;
-    }
-    .emoji {
-      height: 32px !important;
-    }
-  }
 }
 
 .quote-inline,
diff --git a/static/mfm.css b/static/mfm.css
index ae60eb23..a386ad3c 100644
--- a/static/mfm.css
+++ b/static/mfm.css
@@ -1,3 +1,4 @@
+/* Some MFM CSS is also defined in ./src/components/status_content/mfm.scss */
 .mfm {
   display: inline-block;
 }