css formater brokes @apply

[Klein Petr]

Hi guys,

what settings do you use in vscode to format your code (Vue3+TS)? Because The default formatting drives me crazy when it comes to
css @apply directives such as

any suggestions? Thanks :)

[Anthony Fu]

https://github.com/unocss/unocss/tree/main/packages/transformer-directives#css-variable-style

[valleXYZ]

Great!

-> Can we have better errors when the engine cannot find the directive?

Example:

This works:

@apply bg-gray-200;

This throws a complicated error:

@apply dark:bg-gray-200;

This is the error:

[vite] Internal server error: Cannot read properties of undefined (reading 'forEach')
  Plugin: unocss:transformers:default

I migrated a CSS file from an old vitesse to the current version (great library, btw). It took me 20 minutes to arrive here and understand what is happening.

Thanks for your ultra-great work!

[Klein Petr]

cool, but it is not work for some reason 🤔 I've solved it by create a custom rules, I prefer to use attributiffy mode instead of class=".." so with rules the html looks bit more clear. But keeping in mind and will try it in the future. thanks

[Anthony Fu]

I believe this is more related to the formatter you use rather than something we could do on our side.

[Klein Petr]

ok, didn't know that. I was searching in https://uno.antfu.me/?s=grid-cols
Thanks for clarify.