UCSS issue with :hover styles

[jpanther]

I'm having an issue when UCSS is enabled where it doesn't seem to be picking up on hover styles. I've tried adding them to the UCSS Whitelist setting but it doesn't include them in the generated file.

An example class that I'm trying to whitelist is a selector like this: .site-header .primary-menu>li>a:hover

In the first instance, I'm not sure why the UCSS generator isn't picking up these classes? It picks up all the other anchor a classes fine, but seems to ignore the :hover variants.

In debugging this I first tried to add .primary-menu>li>a:hover but this didn't work. I then tried broadening the criteria and added *:hover to my whitelist. However, this then produced an error: UCSS generator error: Cannot read property 'valueOf' of undefined. The generated UCSS was then a null file.

I suspected this might be because of the colon in the whitelist and so I removed it and tried just *hover. This got the UCSS to generate again however it didn't include any of the hover classes in the generated file. Is this not how the wildcard works or is it getting caught up on the colon character too?

Finally I thought I'd broaden it even more and tried *hover* but this had the same result. It just generated the UCSS file without the required hover classes. What do I need to do to get these to be included?

Some examples of the selectors it's not picking up:

.site-header .primary-menu>li>a:hover
.no-touch .cat-links a:hover:before
.no-touch .posts .post:hover .overlay-label
.no-touch .posts .post:hover img

For now I've had to disable the UCSS feature but it would be good to have a way for it to properly detect these classes... or at least allow them to be whitelisted.

Site report: MSGQPLRK

[usabe]

@jpanther

Hi, James,

Did you try just "hover"? *hover* should work, but we have to check into details to see why. Which URL were you checking exactly? Which service nodes were you using when this happened? I can take a look at that.

Regards, Abe

[hi-hai]

@usabe what if you use .primary-menu>li>a only? You may need to do a sandbox test.

[usabe]

@jpanther @hi-hai

If the hover is generated by js script, that will not work. Otherwise it should work.

[hi-hai]

@usabe From his report, you can find the hover code .site-header .primary-menu>li>a{padding:0 15px;font-size:12px;font-size:.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;line-height:60px}.no-touch .site-header .primary-menu>li>a:hover{opacity:.5}.site-header .primary-menu>li>ul.sub-menu{bottom:0;-webkit-transform:translateY(105%);-ms-transform:translateY(105%);transform:translateY(105%)}.site-header .primary-menu>li>ul.sub-menu ul.sub-menu{top:-20px;left:100%;mar is from wp-content/themes/tinysalt/assets/css/front/main.min.css?ver=2021081902. How can it be related to js generated.

[usabe]

@hi-hai I see. Thanks for finding this out.

@jpanther Please open a ticket from here(https://store.litespeedtech.com/store/submitticket.php). We may need to further investigate this case.

[jpanther]

@hi-hai @usabe

Thanks for the comments, I have opened a ticket as requested. Ticket number 647559.

[jpanther]

Just noticed that v4.4 of the plugin has been released. I updated and tried the UCSS again (this time with hover as the whitelisted term as @usabe suggested above). It didn't make any difference and the issue is still present.

[hi-hai]

I believe the hover issue is something on server side to be debugged, if you have tried https://github.com/litespeedtech/lscache_wp/issues/400#issuecomment-914399467

Abe will debug on that. Plugin side not much to do.

[jpanther]

@hi-hai Sorry, I missed that suggestion. I just tried .primary-menu>li>a and this does work with picking up the hover styles. Is this what I have to do with every class that has a hover variant? That's a lot of styles to have to whitelist.

[hi-hai]

Prolly yes at this moment as :hover is more a mouse event than a static css style. @usabe seems we indeed need to include this in UCSS engine by default.

[jpanther]

Well :hover may be related to mouse events, but it's still very much part of the CSS paradigm. There wouldn't be many modern websites that aren't using these selectors to handle design elements. It's extremely common for links, buttons, menus, etc to have hover states. It's not only hover though, there would be :visited, :active, etc.

I'm not entirely across how the UCSS is working but I assume it's picking up ::before and ::after elements as static CSS styles? Perhaps it should additionally pick up any of the CSS modifiers so that when it detects a particular base style is used on the page, it automatically includes any of the modified versions of that style.

Of course there may still be exceptions in this process, for instance if modified styles aren't declared with the same class names and are inherited from above, but those could then just be whitelisted. But as it stands having to whitelist every style that has a :hover class will end up adding things to UCSS that aren't necessarily required on every page.