babel-plugin-styled-name icon indicating copy to clipboard operation
babel-plugin-styled-name copied to clipboard
verified publisher icon sergeysova

styled-components v2-3 support

Open sergeysova opened this issue 8 years ago • 4 comments

  • [x] Support all new API
  • [x] Add support to set className
  • [ ] Add option prefix to set <sc:ComponentName> instead of <ComponentName>

sergeysova avatar Jul 25 '17 19:07 sergeysova

Add .withConfig({ componentId: 'Name', displayName: 'Name' })

https://github.com/styled-components/babel-plugin-styled-components/blob/a4ce86b1fe63387fbf89fd35dd3a2d41da735ec4/src/visitors/displayNameAndId.js#L24

sergeysova avatar Jul 25 '17 20:07 sergeysova 

.withConfig({ displayName: 'sc:Name' })

renders as:

<div class="sc:Name-cCfHun dmWRtX" />

But that

.withConfig({ displayName: 'sc:Name', componentId: 'sc:Name' })

renders as:

<div class="sc:Name-sc:Name dmWRtX" />

sergeysova avatar Jul 25 '17 20:07 sergeysova

Use detectors from: https://github.com/styled-components/babel-plugin-styled-components/blob/a4ce86b1fe63387fbf89fd35dd3a2d41da735ec4/src/utils/detectors.js#L16

and add withConfig from: https://github.com/styled-components/babel-plugin-styled-components/blob/a4ce86b1fe63387fbf89fd35dd3a2d41da735ec4/src/visitors/displayNameAndId.js#L9

sergeysova avatar Jul 25 '17 20:07 sergeysova

4cb395b34c3e6f0ce846a41cc73fcf9894a1cfba

sergeysova avatar Apr 29 '18 01:04 sergeysova