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> <template>
<code <code
class="rule" class="rule"
:class="rule.emoji_code" :class="myClass"
> >
<p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p> <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
<p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p> <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
@ -17,9 +17,12 @@ export default {
mixins: [emoji], mixins: [emoji],
props: ["rule"], props: ["rule"],
computed: { computed: {
rawJSON() { myClass() {
return "```json\n" + JSON.stringify(this.rule, null, 2) + "\n```"; return (
}, this.containsEmoji(this.rule.className) ?
'u' + this.toEmojiCode(this.rule.className) : null
)
}
}, },
}; };
</script> </script>

View file

@ -27,22 +27,10 @@ export default {
methods: { methods: {
generateStyleRules() { generateStyleRules() {
let styles = ""; 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) => { this.rules.map((r) => {
styles += r.className; styles += `.${r.parentClassName} ${r.className}`
if (this.containsEmoji(r.className)) { if (this.containsEmoji(r.className)) {
styles += ", .u" + this.toEmojiCode(r.className); styles += `, .${r.parentClassName} .u${this.toEmojiCode(r.className)}`
} }
styles += "{"; styles += "{";
r.rules.map((s) => { r.rules.map((s) => {

View file

@ -26,7 +26,7 @@ let toCSS = (message, currentStream) => {
} }
rules = results[0]['groups']['props'].split("\n"); rules = results[0]['groups']['props'].split("\n");
rules = rules.filter((rule) => validateRule(rule)) rules = rules.filter((rule) => validateRule(rule))
return { className, emoji_code, rules }; return { className, emoji_code, rules, parentClassName };
} }
return null; return null;
} }