Parse MFM options with values

src/components/rich_content/rich_content.jsx

@@ -126,7 +126,26 @@ export default {
         gfm: false,
         breaks: true
       })
-      return marked.parse(content)
+      const mfmHtml = document.createElement('template')
+      mfmHtml.innerHTML = marked.parse(content)
+
+      // Add options with set values to CSS
+      Array.from(mfmHtml.content.firstChild.getElementsByClassName('mfm')).map((el) => {
+        if (el.dataset.speed) {
+          el.style.animationDuration = el.dataset.speed
+        }
+        if (el.dataset.deg) {
+          el.style.transform = `rotate(${el.dataset.deg}deg)`
+        }
+        if (Array.from(el.classList).includes('_mfm_font_')) {
+          const font = Object.keys(el.dataset)[0]
+          if (['serif', 'monospace', 'cursive', 'fantasy', 'emoji', 'math'].includes(font)) {
+            el.style.fontFamily = font
+          }
+        }
+      })
+
+      return mfmHtml.innerHTML
     }
 
     // Processor to use with html_tree_converter

static/mfm.css

@@ -8,23 +8,19 @@
 }
 
 ._mfm_jelly_ {
-  --speed: attr(data-speed time, 1s);
+  animation: mfm-jelly 1s linear infinite both;
-  animation: mfm-jelly var(--speed) linear infinite both;
 }
 
 ._mfm_twitch_ {
-  --speed: attr(data-speed time, 0.5s);
+  animation: mfm-twitch 0.5s ease infinite;
-  animation: mfm-twitch var(--speed) ease infinite;
 }
 
 ._mfm_shake_ {
-  --speed: attr(data-speed time, 0.5s);
+  animation: mfm-shake 0.5s ease infinite;
-  animation: mfm-shake var(--speed) ease infinite;
 }
 
 ._mfm_spin_ {
-  --speed: attr(data-speed time, 1.5s);
+  animation: mfm-spin 0.5s linear infinite;
-  animation: mfm-spin var(--speed) linear infinite;
 }
 
 ._mfm_spin_[x] {
@@ -71,10 +67,6 @@
   font-size: 600%;
 }
 
-._mfm_font_ {
-  font-family: attr(family, inherit);
-}
-
 /* blur */
 
 ._mfm_rainbow_ {
@@ -82,8 +74,7 @@
 }
 
 ._mfm_rotate_ {
-  --deg: attr(data-deg deg, 90deg);
+  transform: rotate(90deg);
-  transform: rotate(var(--deg));
   transform-origin: center center;
 }