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

Out

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

Table of Contents

• Installation
• Usage
  • Via .babelrc (Recommended)
  • Via CLI
  • Via Node API
• Use with babel-plugin-macros
• Inspiration
• Other Solutions
• Contributors
• LICENSE

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/macro'

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

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

Inspiration

• styled-components

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