Unable to use @layer directive

[ManasMadrecha]

Describe the bug

How to use the @layer directive? Currently, while using @nuxtjs/tailwindcss, I import 3 @tailwind related to base, layer, components in the start of the sass file, and globally import this sass file in nuxt Config in tailwindcss.cssPath. And, then I am able to use @layer base, etc in this sass file itself.

In Windicss, without @tailwind imports, @layer is an unknown directive. So, if I do as mentioned in the migration page of Windi, i.e. remove the @tailwind imports, the styles inside the @layer base or @layer components do not work. Rest of the styles work properly, i.e. styles which are NOT inside @layer, e.g., my custom classes created using @apply directive work properly.

Reproduction

Version 2.0.12

1. Remove tailwind.config.js and replace it with windi.config.js and follow all the steps mentioned in the migration page of Windi website.
2. I tried globally importing the sass file in Nuxt config. The @layer styles doesn't work. Even locally importing the sass file in layouts/default.vue doesn't work. If I import "virtual:windi.css"; in the layouts and then import my sass file, still, I am unable to use @layer styles.

Expected behaviour

To be able to migrate seamlessly from Tailwind to Windicss, as I am currently using @layer directives in my sass files.

[RWave88]

Same issue for me, using WindiCSS with Nuxt 2 via latest nuxt-windicss plugin. I also use @nuxt/postcss8 in case it matters in anyway

[harlan-zw]

Hey, sorry for the delay in response.

My understanding is this is an issue in the Windi core around processing the @layer code. You can try and work around the issue by specifying the @layer's in a plain CSS file, but even then I'm not 100% confident it will work.

Until windi gets a new core engine I don't think there's a solution for this sorry

[watzon]

Also getting strange behavior related to @layer. Seems as though code inside of @layer doesn't get loaded until I restart the dev server. Removing the @layer allows HMR to work correctly.