bps
babel-plugin-styled-name
npm i babel-plugin-styled-name
bps

babel-plugin-styled-name

Name for your styled-components in development

by Sergey Sova

2.0.0 (see all)License:MITTypeScript:Not Found
npm i babel-plugin-styled-name
Readme

babel-plugin-styled-name

Add displayName and componentId for styled-components.

Installation

$ npm install babel-plugin-styled-name --save-dev

Example

Improve readability in devTools

Before

  ↓

After

How?

const Button = styled.button`
  color: red;
`

  ↓

const Button = styled.button.withConfig({ displayName: 'Button', componentId: 'Button' })`
  color: red;
`

Usage

Use only for development!

.babelrc

{
  "env": {
    "development": {
      "plugins": ["styled-name"]
    }
  }
}

Via CLI

$ babel --plugins styled-name script.js

Via Node API

require('babel-core').transform('code', {
  plugins: ['styled-name']
});

Downloads/wk

21

GitHub Stars

16

LAST COMMIT

4yrs ago

MAINTAINERS

2

CONTRIBUTORS

0

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
2.0.0
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial