added parent class to styles, rules are displayed in their own style

This commit is contained in:
كارل مبارك 2021-07-02 15:28:40 +02:00
parent 3264837327
commit 28ee198409
3 changed files with 10 additions and 19 deletions

View file

@ -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>

View file

@ -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) => {

View file

@ -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;
}