Multiple @apply directives are not working properly

[itzaks]

Hi!

I noticed a bug when using multiple @apply-directives, they seem to merge to the last selector, and removing all preceding apply directives.

Example:

.one-class {
  @apply b-red;
}

.another-element {
  @apply w-full;
}

Currently, on @latest, yields:

.another-element, .one-class {
    width: 100%;
}

yarn.lock:

"@unocss/nuxt@npm:latest":
  version: 0.30.12

"unocss@npm:0.30.12, unocss@npm:latest":
  version: 0.30.12

"@unocss/transformer-directives@npm:0.30.12, @unocss/transformer-directives@npm:latest":

nuxt.config.ts:

{
  unocss: {
    uno: true, // enabled `@unocss/preset-uno`
    icons: true, // enabled `@unocss/preset-icons`
    attributify: true, // enabled `@unocss/preset-attributify`,
    transformers: [
      transformerDirective()
    ],
    presets: [
      presetIcons({
        scale: 1.4,
        extraProperties: {
          'display': 'inline-block',
          'vertical-align': 'middle',
        }
      }),
      presetMini({
        attributifyPseudo: true
      }),
      presetWind(),
      presetAttributify(),
    ],
    extractors: [
      extractorPug(),
      extractorSplit,
    ],

  },

}

Cheers, and thanks for a great library.

[miclgael]

I have a similar issue. Playing around in Nuxt 3.
I can work around it by splitting styles into multiple scoped <style> tags

Example:

<template>
  <div>
    <div redfoo>Red</div>
    <div bluefoo>Blue</div>
  </div>
</template>
<style lang="postcss" scoped>
[redfoo] {
  @apply text-red;
}
</style>
<style lang="postcss" scoped>
[bluefoo] {
  @apply text-blue;
}
</style>

Yields:

PS. Thanks Anthony, I love your work :)

[pablosoftwars]

hasta la version 0.27.6 funciona multiples @apply dentro de una sola etiqueta style, estoy usando los modulos dispuestos para nuxt

@unocss/nuxt
@unocss/transformer-directives

la solucion de micigael funciona, pero he decidio no usarlo por que se haria muy grande el archivo
tambien felicitarte por este grandioso trabajo que es unocss

[antfu]

I can't reproduce

Can anyone share a minimal reproduction?

[userquin]

hasta la version 0.27.6 funciona multiples @apply dentro de una sola etiqueta style, estoy usando los modulos dispuestos para nuxt

@unocss/nuxt @unocss/transformer-directives

la solucion de micigael funciona, pero he decidio no usarlo por que se haria muy grande el archivo tambien felicitarte por este grandioso trabajo que es unocss

Pablo, intenta responder en inglés, que se entere el resto de la gente que no habla ni entiende español ;) , en el peor de los casos vas a Google Translate y pegas la traducción aquí

[miclgael]

Can anyone share a minimal reproduction?

I have provided a repro here: https://github.com/miclgael/unocss-minimal

Where code

<style lang="postcss" scoped>
[redfoo] {
  @apply text-red;
}
[bluefoo] {
  @apply text-blue;
}
</style>

Yields:

[leo91000]

I have the same problem on nuxt 3. Is the repro given enough ? I can give another repro if needed

Edit : Here is a very simple repro with nuxt 3 in case you need it https://stackblitz.com/edit/github-9fixhj?file=app.vue

[antfu]

It seems like Vue's css compiler does not understand the @apply syntax.

Here are two solutions:

Use --at-apply

To make the CSS valid, we recently introduced --at-apply rule as an alternative to @apply so the preprocessor could understand. Basically do a global replace would do:

<style scoped>
[redfoo] {
-  @apply text-red;
+  --at-apply: text-red;
}
[bluefoo] {
-  @apply text-blue;
+  --at-apply: text-blue;
}
</style>

Enforce Pre

The other option is to let the transformer expand @apply before passing to other preprocessors, by adding { enforce: 'pre' } to the transformer.

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

Note this way you might not be able to use more complex preprocessors like SASS or Stylus that mix the lang syntax and @apply.