reuse data attribute by another selector

[jbelfodil]

Hi,

I'm enjoying glamor but I have an issue :

I would like to use the data attribute generated by glamor (ex:data-css-fdoi87) from another one.

Example : 2 elements (parent and child), when you hover the father, the child will appear so in basic css :

.child {
    display: none;
}
.parent:hover .child {
     display: block;
}

So I expect something like that in glamor :

const child = css`
     display: none;
`;
const parent 2 = css`
    :hover ${child} { 
         display: block;
    }
`;

The JSX will be something like :

<div {...parent}>
    Parent Hover ME!!
    <div {...child}>Child</div>
</div>

I tried some stuff like child.toString() or import {select, idFor} to get the data attribute name but if I wrap it into [] or if I prefix it with a . in order to use it in css, the generated selector is no longer the good one...

Thx :)

[jbelfodil]

My workaround is :

const parent = css`
    :hover ${'.' + child } {
      display: block;
    }
`;

With this solution I have to use className instead of data-attribute because glamor accept ${'.' + child } but not ${'[data-' + child + ']' }

I'm sure there is a much more elegant way to solve this use case.

[threepointone]

I've thought about supporting this usecase, but really it's much simpler to use an actual classname by yourself.

const parent =  css`
  :hover .mychild {
     ...
  }
`
<div {...parent}>
    Parent Hover ME!!
    <div {...child} className='mychild'>Child</div>
</div>

closing this, but feel free to discuss.