v2.3.3 data-* attributes lost

Version

styled-components: 2.3.3

Reproduction

As of version 2.3.3 Styled components are stripping out data-* attributes and not passing them on or respecting them in the rendering. Rolling back to 2.3.1 seems to still keep the desired behavior. These attributes should also continue to be passed on to any components that are extended by styled-components.

Steps to reproduce

const Node = styled.div` background-color: red;`
export default Component = () => <Node data-value="it works">Test</Node>

Expected Behavior

Html output

<div class="auto-generated"  data-value="it works">Test</div>

Actual Behavior

Html output

<div class="auto-generated">Test</div>

[donovan-graham]

I’ll double check, and post a more complete example. Thanks for the snappy response @mxstbr

[probablyup]

It should still be data-index. React doesn’t camelCase data and aria attributes. On Tue, May 22, 2018 at 5:25 AM George James [e-mail] wrote:

I am using v3.1.6

const EventInfoComp = ({ dataindex, info, …rest}) => ( <div {…rest}> <div className='message'>{ info }</div> <FilledLikeIcon /> </div> )

export const EventInfo = styled(EventInfoComp)` font-size: 16px; height: 44px; color: #1D1B23; display: flex;

.message {
    flex: 1;
    margin-right: 30px;
}
.message::selection {
    background: none;
    color: #1D1B23;
}

`

{ this.state.events.map((event, index) => ( <Event like={false} key={event.id}> <EventTitle name={event.title} color={event.color} /> <EventInfo info={event.info} onDoubleClick={this.handleLikeEvent.bind(this)} dataindex={index}/> </Event> )) }

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/1379#issuecomment-390923955, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1jGjdHuE1Gzt5cpKbnFfgrNOMJ5Cks5t09mMgaJpZM4RInSi .