From 28ee198409ec910325918885d45659822d580844 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D9=83=D8=A7=D8=B1=D9=84=20=D9=85=D8=A8=D8=A7=D8=B1=D9=83?=
 <bonjour@mouabrak.eu>
Date: Fri, 2 Jul 2021 15:28:40 +0200
Subject: [PATCH] added parent class to styles, rules are displayed in their
 own style

---
 front/src/components/Rules/Rule.vue   | 11 +++++++----
 front/src/components/Rules/Styles.vue | 16 ++--------------
 front/src/store/index.js              |  2 +-
 3 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/front/src/components/Rules/Rule.vue b/front/src/components/Rules/Rule.vue
index 5db22e1..c17bda3 100644
--- a/front/src/components/Rules/Rule.vue
+++ b/front/src/components/Rules/Rule.vue
@@ -1,7 +1,7 @@
 <template>
   <code 
     class="rule"
-    :class="rule.emoji_code"  
+    :class="myClass"  
   >
     <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
     <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
@@ -17,9 +17,12 @@ export default {
   mixins: [emoji],
   props: ["rule"],
   computed: {
-    rawJSON() {
-      return "```json\n" + JSON.stringify(this.rule, null, 2) + "\n```";
-    },
+    myClass() {
+      return (
+        this.containsEmoji(this.rule.className) ?
+        'u' + this.toEmojiCode(this.rule.className) : null
+      )
+    }
   },
 };
 </script>
diff --git a/front/src/components/Rules/Styles.vue b/front/src/components/Rules/Styles.vue
index 938ab3c..8d2c313 100644
--- a/front/src/components/Rules/Styles.vue
+++ b/front/src/components/Rules/Styles.vue
@@ -27,22 +27,10 @@ export default {
   methods: {
     generateStyleRules() {
       let styles = "";
-      // this.rules.map(r => {
-      //   const dot = this.htmlTags.indexOf(r.className) > -1 ? '' : '.'
-      //   styles  += `.${r.parentClassName} ${dot}${r.className}`
-      //   if( this.containsEmoji(r.className)){
-      //     styles += `, .${r.parentClassName} .u${this.toEmojiCode(r.className)}` 
-      //   }
-      //   styles += "{"
-      //   r.rules.map((s)=>{
-      //     styles += s.text;
-      //   })
-      //   styles += "}"
-      // })
       this.rules.map((r) => {
-        styles += r.className;
+        styles  += `.${r.parentClassName} ${r.className}`
         if (this.containsEmoji(r.className)) {
-          styles += ", .u" + this.toEmojiCode(r.className);
+          styles += `, .${r.parentClassName} .u${this.toEmojiCode(r.className)}` 
         }
         styles += "{";
         r.rules.map((s) => {
diff --git a/front/src/store/index.js b/front/src/store/index.js
index f36419a..526790e 100644
--- a/front/src/store/index.js
+++ b/front/src/store/index.js
@@ -26,7 +26,7 @@ let toCSS = (message, currentStream) => {
     }
     rules = results[0]['groups']['props'].split("\n");
     rules = rules.filter((rule) => validateRule(rule))
-    return { className, emoji_code, rules };
+    return { className, emoji_code, rules, parentClassName };
   }
   return null;
 }