Home

Awesome

<div align="center"> <h1>babel-plugin-glamorous-displayname</h1> <p>add a displayName property to glamorous components</p> </div> <hr />

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

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> <!-- END doctoc generated TOC please keep comment here to allow auto update -->

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):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore -->
<img src="https://avatars0.githubusercontent.com/u/16327281?v=4" width="100px;"/><br /><sub><b>Bernard Lin</b></sub><br />💻 📖 ⚠️<img src="https://avatars0.githubusercontent.com/u/1500684?v=4" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub><br />🐛 💻 📖 🤔 🚇 📢 ⚠️
<!-- ALL-CONTRIBUTORS-LIST:END -->

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

LICENSE

MIT