Open
Description
Describe the bug
After setting the 'important' option to '#app' in 'windi.config.ts', using '@apply' while using the top layer ':deep' in the '.vue' file causes scoped style compilation error
To Reproduce
Steps to reproduce the behavior:
- Clone repository 'https://github.com/keuby/unplugin-bug-demo'
- Run 'yarn install && yarn serve'
- The text color of 'this content in comp' should be 'text-blue-400', but it is actually black now
Additional context
Because 'transformTemplateLoader' executes before 'stylePostLoader', the selector prefix configured for 'important' is added to the style early, causing a compilation error.
Incorrect compilation process
<style scoped>
:deep(.class-in-child-comp) {
@apply text-blue;
}
</style>
The transformTemplateLoader
transforms it into
<style scoped>
#app :deep(.class-in-child-comp) {
--tw-text-opacity: 1;
color: rgba(96, 165, 250, var(--tw-text-opacity));
}
</style>
Then the stylePostLoader
of vue-loader
is converted to this
<style scoped>
#app[data-v-7ba5bd90] .class-in-child-comp {
--tw-text-opacity: 1;
color: rgba(96, 165, 250, var(--tw-text-opacity));
}
</style>
It should actually compile like this
<style scoped>
// There should be a space between `#app` and `[data-v-7ba5bd90]`
#app [data-v-7ba5bd90] .class-in-child-comp {
--tw-text-opacity: 1;
color: rgba(96, 165, 250, var(--tw-text-opacity));
}
</style>
Metadata
Assignees
Labels
No labels