Variants are not generated on custom classes that are added to layers

[qucode1]

Describe the bug
Custom classes defined in my assets/styles.css should automatically generate responsive variants as well as hover, focus and so on. However no variants are created and if you try to use a class like md:grid-layout or md:custom-text no styles are applied.

devDependencies:
nuxt 3.0.0-rc.11
nuxt-windicss 2.5.2
sass 1.55.0

/* assets/styles.css */

@layer base {
    .grid-layout {
      --min-width: 280px;
      --max-width: 100%;
      --col-gap: 8px;
      --row-gap: 8px;
      --cols: 12;
      --content-width: 1170px;
      --content-min-width: calc(var(--min-width) - 2 * var(--col-gap));
      --col-min-width: calc((var(--content-min-width) - (var(--cols) - 1) * var(--col-gap)) / var(--cols));
      --col-width: calc((var(--content-width) - (var(--cols) - 1) * var(--col-gap)) / var(--cols));
    }
  }
  
  @layer components {
    .grid-layout {
      min-width: var(--content-min-width);
      max-width: var(--max-width);
      width: 100%;
      margin: auto;
      display: grid;
      gap: var(--col-gap);
      grid-template-columns:
        [full-start] minmax(0,1fr)
        [content-start] minmax(var(--col-min-width), var(--col-width))
        repeat(calc(var(--cols) - 2), minmax(var(--col-min-width), var(--col-width)))
        minmax(var(--col-min-width), var(--col-width))
        [content-end] minmax(0,1fr)
        [full-end];
    }

    .grid-layout > * {
      grid-column: content;
    }
  
    .grid-layout__content {
      grid-column: content;
    }

    .grid-layout__content--full {
      grid-column: full;
    }

    .custom-text {
      color: crimson;
    }

    .custom-bg {
      background: tomato;
    }

    @screen md {
      .grid-layout {
        --col-gap: 32px;
        --row-gap: 32px;
      }
    }

    @screen lg {
      .custom-bg {
        background: aliceblue;
      }
    }

    .custom-border {
      border: 4px solid aquamarine;
    }

    @variants hover {
      .custom-border {
        border: 4px solid dimgrey;
      }
    }
  
  }

To Reproduce
Steps to reproduce the behavior:

1. Clone repository 'https://github.com/qucode1/nuxt-windi-poc'
2. Install packages & start dev server
3. See error

Expected behavior
Custom classes defined in my assets/styles.css should automatically generate responsive variants as well as hover, focus and so on.
I also created a nuxt tailwind repo with the same code and everything works as intended: https://github.com/qucode1/nuxt-tailwind-poc

Screenshots

Additional context
Add any other context about the problem here.