windicss / windicss-webpack-plugin

🍃 Windi CSS for webpack ⚡
https://windicss.org/integrations/webpack.html
79 stars 19 forks source link

scoped style compile error in .vue file #123

Open keuby opened 1 year ago

keuby commented 1 year ago

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>