Add support for @apply with complex classes that use colons like hover:bg-green-200

[jacob-8]

Thanks for adding the @unocss/transformer-directives that supports using @apply ... inside of style tags! I do want to mention that in a SvelteKit project it doesn't work for complex classes that use colons unfortunately, so @apply bg-green-100 hover:bg-green-200 will not work presently.

Tailwind had this issue for a long time and solved it finally in 2020. Perhaps the solution for this could be pulled from their resolution of the same issue, tailwindlabs/tailwindcss#2159 may be a good starting point.

[hannoeru]

We do support complex classes... the problem you mentioned is that svelte parser can't parse @apply directive, so it is not related to @unocss/transformer-directives.

[chu121su12]

@jacobbowdoin The variant syntax isn't limited to colon hover:x and you can try with a regular dash hover-x

[pierredewilde]

Related to @apply is not transformed in CSS style #649

Regular dash hover-x is indeed a workaround.

It would be great if normal Tailwind CSS variant syntax hover:x is also supported.

[mshamaseen]

I'm trying to set !important to apply directive but it throws an error
@apply bg-gray-100 rounded p-2 text-gray-800 outline-gray-400 !important;

Error: expected ";".

[zyyv]

I'm trying to set !important to apply directive but it throws an error

@apply bg-gray-100 rounded p-2 text-gray-800 outline-gray-400 !important;

Error: expected ";".

well, you should do like this @apply bg-gray-100! important-rounded ...;, rather than only add the important variant to the tokens end.