added parent class to styles, rules are displayed in their own style
This commit is contained in:
parent
3264837327
commit
28ee198409
3 changed files with 10 additions and 19 deletions
|
|
@ -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"> {{ 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>
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue