generated :hover classes seems odd

[flpwgr]

Description

Whenever I add a :hover to a class the output of it its something like this:

._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n:hover{border-color:blue}

Reproduction

Here you can see it happening:
https://codesandbox.io/s/hoverissue-9386o?file=/src/App.tsx

Expected behavior

the generated output should be smaller

._z4lg8n:hover { border-color: blue; }

Actual behavior

._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n._z4lg8n:hover{border-color:blue}

[kripod]

Thank you for reporting!

This is not a bug, but a feature™. Currently, the specificity of properties and pseudo selectors is controlled through class repetition. This is required to avoid issues with atomicity, e.g. padding-top should take precedence over padding, even when only defined later.

Issue #1 is about improving this behavior. Until then, don’t worry about the length of generated selectors, as gzip and Brotli compression handles repetition without substantial overhead in production.

[flpwgr]

Oh Cool! :) Thanks for the clarification

[kripod]

Version 0.4.0 addresses this issue by managing precedences without class name repetition. Please give it a try and get back to me if you notice any issues 😊