Skip to content

Latest commit

 

History

History
174 lines (125 loc) · 7.04 KB

File metadata and controls

174 lines (125 loc) · 7.04 KB

babel-plugin-glamorous-displayname

add a displayName property to glamorous components


Build Status Code Coverage version downloads MIT License

All Contributors PRs Welcome Code of Conduct

Watch on GitHub Star on GitHub Tweet

The problem

You want to use glamorous, but you want to have a better experience with the DevTools (because you lose the automatic displayName magic that the react babel preset gives you).

This solution

Adds the displayName to glamorous components.

In

const MyStyledButton = glamorous.button()

Alt text

Out

const MyStyledButton = glamorous.button.withConfig({
  displayName: 'MyStyledButton',
})

Alt text

Table of Contents

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev babel-plugin-glamorous-displayname

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["glamorous-displayname"]
}

Via CLI

$ babel --plugins glamorous-displayname script.js

Via Node API

require('babel').transform('code', {
  plugins: ['glamorous-displayname'],
})

Use with babel-plugin-macros

Once you've configured babel-plugin-macros you can import/require the glamorous macro at babel-plugin-glamorous/macro. For example:

import glamorous from 'babel-plugin-glamorous-displayname/macro'

const MyStyledInput = glamorous.input({
  /* your styles */
})

You could also use glamorous.macro if you'd prefer to type less 😀

Inspiration

Other Solutions

I'm not aware of any, if you are please make a pull request and add it here!

Contributors

Thanks goes to these people (emoji key):


Bernard Lin

💻 📖 ⚠️

Kent C. Dodds

🐛 💻 📖 🤔 🚇 📢 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT