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>
|
<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"> {{ dec }}</p>
|
<p v-for="dec in rule.rules" :key="dec"> {{ 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>
|
||||||
|
|
|
||||||
|
|
@ -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) => {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue