Skip to content

scoped style compile error in .vue file #123

Open
@keuby

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:

  1. Clone repository 'https://github.com/keuby/unplugin-bug-demo'
  2. Run 'yarn install && yarn serve'
  3. The text color of 'this content in comp' should be 'text-blue-400', but it is actually black now

Screenshots
image
image
image

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions