Nuxt3 - @apply directives in <style> not correctly parsed in production

Nuxt 3.0.0-rc.13 and unocss 0.46.3 Problem: The @apply directives inside <style> tag in SFC in Nuxt3 are not correctly parsed when in PRODUCTION. For some reason when there are multiple selectors that use @apply, the selectors are grouped and the styles are from the last selector. For example:

.test {
  @apply bg-gray4;
}
.test2 {
  @apply bg-green4;
}

This will generate the MagicString .test,.test2{@apply bg-green4} for the transformerDirectives() function.

When there is another style that does not use @apply between the ones that do. The styles will result correctly parsed. For example:

.test {
  @apply bg-gray4;
}
.test3 {
  background-color: orange;
}
}
.test2 {
  @apply bg-green4;
}

Reproduction: https://stackblitz.com/edit/github-zoupmi?file=components%2FTest.vue (fork of https://github.com/antfu/vitesse-nuxt3)

npm run build
npm run start

The Test.vue SFC is correctly parsed when in DEVELOPMENT

I believe this might be a core bug?

Thank you for your time

[wister]

@therealokoro Thank you that does work.

I tried debugging a little bit more. I am wondering when is the MagicString generated? I commented out '@unocss/nuxt', from nuxt.config.ts. And I got this error from npm run build:

 WARN  warnings when minifying css:                                          14:52:27
▲ [WARNING] Expected ";" but found "}" [css-syntax-error]

    <stdin>:1:29:
      1 │ .test,.test2{@apply bg-green4}.test3{background-color:orange}.test5...
        │                              ^
        ╵                              ;

As you can see, it is trying to minify .test,.test2{@apply bg-green4}, the selectors are already incorrectly grouped.

Is this a Nuxt3 / bundlers bug?

Thank you

[sibbng]

You can fix this issue by enforcing pre processing:

  transformers: [
    transformerDirectives({ enforce: 'pre' }),
  ],

Or, you could disable cssnano mergeRules option by adding these lines to your nuxt.config.ts:

  postcss: {
    plugins: {
      cssnano: {
        preset: ['default', {
          mergeRules: false,
        }],
      },
    },
  },