@apply Directives Not Working With Custom Variant

[mr-thomas-z]

UnoCSS version

0.58.5

Describe the bug

I followed the docs to wrap custom variant with quotes (e.g., "hover:bg-white", but the output CSS was not converted. Instead, here are the before and after code:

Original	Converted
@apply flex flex-row p-4 text-white "hover:color-red-400";	display:flex;flex-direction:row;padding:1rem;--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)); (custom variant is gone?)
@apply "hover:bg-white" "hover:bg-opacity-5";	@apply "hover:bg-white" "hover:bg-opacity-5"; (custom variant is not converted?)

The only way I would get it working is to use a --at-apply: for each custom variant class. I'm not sure if this is the intended behavior or a bug.

Not working	Worked
@apply "hover:bg-white" "hover:bg-opacity-5";	--at-apply: 'hover:bg-white'; --at-apply: 'hover:bg-opacity-5';

Reproduction

https://unocss.dev/play/?html=DwEwlgbgBAxgNgQwM5ILwCIAWYQgKYB2UADgLQBMUARnAPYwDW6UOGxATrQGZhx6kBbQgFd0APgBQASGDC4sRCgxwwSAC6kCtAnhKkADOOkyVkqeeAIomdni4YAxMzUJ2AczxqMAfRoICTGbmMkjE-mIAErRCYR7AAPSh4cYy8QhBCaYSxsBZwZbWtvbo8RzcvHjiAGpgeADuUAAKnDx8Cek58Vk5eRZWIAgupEgQeHBqeAxgGhxjtAggpAMuGNxczDZ2GGnCaphdtG60u%2BIAModQx2rtGV1gZglykgngEGJAA&config=PTAEFMGcBsEsDsAuBaAJrSBDARtcz5wAPFOQ0eAe2QCcpEbYBjRcVZWAWwAdKbFIAKC69%2BoAN6DQoVOABmCcAGFK8BQHMANFNDc6kcIgCCiBrGwBXRLDkBPbdL1RDASSarID3fsMBVKtoAvqByNJScoADkFlRMkJCRwjx8iKAMmPCQcnyc4DQAIrB0LLAAblAhYRGRAAIxlHGQwOmZ2TS5NGhF4CXlCQDcgoLEoqmycpgW0GPyiipqsOoAFJLSLVk5eZAAXKAA2uttHYXF1n1LAJQAul40U1C7ezrSe5FMFpCI4bT3kZoSoHc0D4u0idFQkVAgRuOhh0kgAAsUu8BLtVtIou9Pt9EcirJFQawSMhoOo0sQUHwMupwKAkeUaNsiShWJhoH8dIEvE4DKj9s9vM5EP5KJcvI4fMZTIxLNY7GKBTzXO5MisBfCmGzwLsAIwAOgATOKMUxUPBQQjTNwdiAoJw9YjgByMVCLl4YYELoIgA&css=JAVwNgBGCWEN4ChjAAIEMAOGwE8ICIALAewDcBTAJwC4AjAcwFoB3Q6AF3PwJIpocbEMaAMYccjAKz4A3AiTAAZBDTwFqTNjwAzMOQAeEXQcaVizCBkYAWCJ33sWbTjzJVqI4mGKVT5ACY2AAxBsgoAvkjhQA&options=N4XyA

System Info

• Windows 11
• SvelteKit

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[zhangzheheng12345]

I've looked into the test cases of unocss (test/transformer-directives.test.ts) and found that you actually don't need to use the quotes. Writing @apply hover:bg-red is ok. Perhaps the doc causes misunderstanding, so a bit modification may required.

[mr-thomas-z]

@zhangzheheng12345 Thanks for digging in. Actually, I tried to do it without the quotation marks, but because I have "format on save" turned on (in VS Code), --uno: hover:bg-white hover:bg-opacity-10 nojs:inline-block; would automatically become --uno: hover: bg-white hover: bg-opacity-10 nojs: inline-block; (each class gets a trailing space) upon save. Then I read the doc and saw that I have to use quotation marks, so I wrap each class in quote and that's how I noticed things weren't working for me.

You helped me realize I just have to wrap the entire thing (e.g., --uno: 'text-center md:mx-3 md:my-5') in quote, not each class with variant in quote (e.g., --uno: text-center 'md:mx-3' 'md:my-5'). Because my "format on save" modified each class, I automatically assumed to add quotation mark to each class instead of the whole value. Haha, silly me. 😂

If a user doesn't have "format on save" enabled, then yes, not including quotation mark is definitely easier. But if they do, then maybe the change below would imply to wrap the entire CSS value in quote, not the individual classes?

Thanks again for your help.

[zhangzheheng12345]

Well, since the formatter will add that space by default, I think supporting quotes in @apply is necessary.