Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scoped style compile error in .vue file #123

Open
keuby opened this issue Nov 23, 2022 · 0 comments
Open

scoped style compile error in .vue file #123

keuby opened this issue Nov 23, 2022 · 0 comments

Comments

@keuby
Copy link

keuby commented Nov 23, 2022

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant