CSS Selector Tags Reversed

[wspeirs]

It appears the CSS attribute selector tags are reversed during rendering. For example, given the following:

<style scoped>
div {
    font-size: 5em;
    text-align: center;
}

It renders to:

*[data-static-vue-component] div {font-size: 5em; text-align: center; }

Instead, it should render to the following to properly select tag:

div [data-static-vue-prospect_card] {font-size: 5em; text-align: center; }

[manatlan]

in fact, it's the same issue as https://github.com/manatlan/vbuild/issues/4 the rendering scoped is weird ... (if you want make it : you should use ":scope") would be fixed

[manatlan]

currently, to bypass ... you should try :

<style scoped>
:scope {
    font-size: 5em;
    text-align: center;
}
</style>

[manatlan]

In fact, something like :

<template>
  <div class="example">hi</div>
</template>
<style scoped>
.example {
  color: red;
}
</style>

should be rendered as :

<style>
.example[data-minimal] {color: red; }
</style>

but it's not the case in the current version ! it's (bad) rendered as :

<style>
*[data-minimal] .example {color: red; }
</style>

so, to make is works : you should prefix all your inline scoped style with prefix ":scope"