Nationwide Polamorous Matrimony

    babel-plugin-styled-name

    2.0.0 • Public • Published

    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!

    Via .babelrc (Recommended)

    .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']
    });

    Install

    npm i babel-plugin-styled-name

    DownloadsWeekly Downloads

    5

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    7.03 kB

    Total Files

    4

    Last publish

    Collaborators

    • lestad
    • sergeysova