Skip to content

scoped style compile error in .vue file #123

Open
@keuby

Description

@keuby

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

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