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

[wister]

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

[minkoonim]

yeah! exact same case here for @screen

[zyyv]

Hi, i found it works well with CSR, without nuxt.🤔️

[therealokoro]

So I encountered same issue too. My walkaround was to use the --at-apply directive in place of the @apply.
See example below

/** instead of this **/
.test2 {
  @apply bg-green4;
}

/** do this **/
.test2 {
  --at-apply: "bg-green4";
}

This works fine without any issues but of-course you'll have to opt-in to this feature with the transformerDirectives transformer set in your config

import { transformerDirectives() } from "unocss"
export default defineConfig({
    transformers: [transformerDirectives()]
})

[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

[therealokoro]

@wister i'm glad the walkaround worked for you. Until this is fixed I guess this will be the only way to use it.

[maoosi]

Same issue for me, @therealokoro thanks for the temporary workaround!

[therealokoro]

@maoosi my pleasure.

I think it's worth mentioning that this isn't even a nuxt3 issue. I encountered this problem while using plain vue 3

[Saganic]

Any news on this?

[ijkml]

Ran into this today, too...

There's a workaround! Phew 😅.

[ijkml]

The docs here: https://github.com/unocss/unocss/tree/main/packages/transformer-directives tells you to quote values that contain :. When moving from @apply to --at-apply, I noticed the values in quotes don't work (with SCSS, btw).

Bug? 🤷‍♂️

[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,
        }],
      },
    },
  },

[therealokoro]

Yeah thats true @sibbng I remember using this fix in one of my old projects. Totally forgot about it. Thanks mate