v-chakra directive bug : flash of unstyled content when applyed on a external component

[Julian Cataldo]

Compare this two :

1 V-chakra directive on a nested component

test.vue

<template>
  <main>
    <c-heading>
      Salut
      <DabadiDabada v-chakra background="red"></DabadiDabada>
    </c-heading>
  </main>
</template>

DabadiDabada.vue

<template>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </div>
</template>

---

2 V-chakra directive on an component living inside the parent

test.vue

<template>
  <main>
    <c-heading>
      Salut
      <div v-chakra background="red">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>
    </c-heading>
  </main>
</template>

Results

In both case, it works like above, however you get a flash of styling on case 1.
If you disable javascript (Safari dev menu), styling isn't applied:

With js

Style appended with "className" appendix is added afterward (hence the flash of styling).

No js

No style is appended

Additional note :

If you add some styling on a root chakra component in DabadiDabada.vue, it works along the v-chakra styling on the parent. Still, the styles coming from v-chakra directive suffers from being added afterwards.

[Jonathan Bakebwa]

Hi @JulianCataldo Are you using this in a nuxt project? I'd like to see a reproduction of this if possible.