UnoCss does not generate pseudo rule

[ThinhVu]

UnoCSS version

0.50.6

Describe the bug

UnoCss failed to resolve rules. For example:

Rules:

[ 'hide-scroll-bar', {
     '-ms-overflow-style': 'none', /* IE and Edge */ 
     'scrollbar-width': 'none'  /* Firefox */
}],
['hide-scroll-bar::-webkit-scrollbar', {display: 'none'}], /* Chrome, Safari and Opera */

Expected output:
.hide-scroll-bar and .hide-scroll-bar::-webkit-scrollbar should be created.

Actual:
Only .hide-scroll-bar was created.

Reproduction

hide-scroll-bar.mp4

System Info

No response

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.

[zyyv]

We temporarily close this due to the lack of enough information.
Please provide a minimal reproduction to reopen the issue.
Thanks.

Why reproduction is required

[sibbng]

This is not how rules option work. I was wondering how we could generate multiple CSS rules in a single rule definition. In Tailwind addUtilities and addVariant make this super easy.

I got it working in this Playground. But it's super weird and verbose.

/cc @chu121su12 @antfu

[antfu]

You can return an array to provide multiple rules: Playground

For pesudo selector it's indeed a bit tricky but for UnoCSS take more static approach for performance. No plan to have runtime utils like addUtilities or addVariant that alter the generator's behavior.

[sibbng]

This is cool, but it has some issues: Playground

1. It won't work as expected when we use variants.

<div class="hover:hide-scroll-bar"></div>

2. It won't be processed by postprocess hook (rem to px etc).

In my first Playground these are not an issue.

No plan to have runtime utils like addUtilities or addVariant that alter the generator's behavior.

I don't propose having these utilities on UnoCSS core, but if we can come up with a more structured format for this uses cases we can provide a high level utility in preset-mini for end-users, similar to variantMatcher.

[chu121su12]

Depending on the pseudo usage afterwards, for multiple matching, one workaround I could think is by using shortcut

[sibbng]

@chu121su12 Good one, but hover variant placed on wrong side in your workaround. This is a regression caused by #2190. Maybe we should bring back movePseudoElementsEnd or find an alternative solution for this case.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.