search

jxnblk / tachyons-components

React UI components powered by Tachyons with a styled-components like API
MIT License
411 stars 15 forks source link

Hover classes don't seem to work #2

Open cloudonshore opened 7 years ago

cloudonshore commented 7 years ago

Nothing of the property/classes in this module seem to work when applied https://github.com/tachyons-css/tachyons-hovers

tvararu commented 7 years ago

I'm looking into this, yeah it's a legitimate bug (comment here acknowledging). Here's why it doesn't work:

Given:

const Span = styled('span')``

<Span grow-large>hello</Span>

A lookup for the grow-large CSS class will occur but it won't add grow-large:hover and any others to the stylesheet.

There is a grow-large:hover key in the auto-generated tachyons.json but searching for and including that sounds brittle, so as the comment indicates I think the best way to solve this is by merging stuff at the parse step.

Snazzyham commented 7 years ago

One workaround I found was to add the hover state once in any component, and it'll work anywhere else.

For example, if I had a button with grow grow: hover, then just using grow in any other component will work just fine.

cgolinski commented 6 years ago

I found that installing tachyons in addition to tachyons-components fixed the hover classes.