https://github.com/bernard-lin/babel-plugin-glamorous-displayname
A babel plugin for Glamorous displayNames 💄
https://github.com/bernard-lin/babel-plugin-glamorous-displayname
babel babel-plugin glamorous
Last synced: 3 months ago
JSON representation
A babel plugin for Glamorous displayNames 💄
- Host: GitHub
- URL: https://github.com/bernard-lin/babel-plugin-glamorous-displayname
- Owner: bernard-lin
- License: mit
- Created: 2017-04-11T05:00:39.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-31T05:15:00.000Z (over 8 years ago)
- Last Synced: 2025-09-19T22:42:20.386Z (9 months ago)
- Topics: babel, babel-plugin, glamorous
- Language: JavaScript
- Homepage: http://npm.im/babel-plugin-glamorous-displayname
- Size: 69.3 KB
- Stars: 31
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
babel-plugin-glamorous-displayname
add a displayName property to glamorous components
[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmcharts]
[![MIT License][license-badge]][license]
[](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
[![Tweet][twitter-badge]][twitter]
## 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**
```js
const MyStyledButton = glamorous.button()
```
**Out**
```js
const MyStyledButton = glamorous.button.withConfig({
displayName: 'MyStyledButton',
})
```
## Table of Contents
* [Installation](#installation)
* [Usage](#usage)
* [Via `.babelrc` (Recommended)](#via-babelrc-recommended)
* [Via CLI](#via-cli)
* [Via Node API](#via-node-api)
* [Use with `babel-plugin-macros`](#use-with-babel-plugin-macros)
* [Inspiration](#inspiration)
* [Other Solutions](#other-solutions)
* [Contributors](#contributors)
* [LICENSE](#license)
## Installation
This module is distributed via [npm][npm] which is bundled with [node][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**
```json
{
"plugins": ["glamorous-displayname"]
}
```
### Via CLI
```sh
$ babel --plugins glamorous-displayname script.js
```
### Via Node API
```javascript
require('babel').transform('code', {
plugins: ['glamorous-displayname'],
})
```
## Use with `babel-plugin-macros`
Once you've [configured `babel-plugin-macros`](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md)
you can import/require the `glamorous` macro at `babel-plugin-glamorous/macro`.
For example:
```javascript
import glamorous from 'babel-plugin-glamorous-displayname/macro'
const MyStyledInput = glamorous.input({
/* your styles */
})
```
> You could also use [`glamorous.macro`][glamorous.macro] if you'd prefer to type less 😀
## Inspiration
* [styled-components](https://github.com/styled-components/babel-plugin-styled-components)
## Other Solutions
I'm not aware of any, if you are please [make a pull request][prs] and add it
here!
## Contributors
Thanks goes to these people ([emoji key][emojis]):
| [
Bernard Lin](https://github.com/bernard-lin)
[💻](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=bernard-lin "Code") [📖](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=bernard-lin "Documentation") [⚠️](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=bernard-lin "Tests") | [
Kent C. Dodds](https://kentcdodds.com)
[🐛](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/issues?q=author%3Akentcdodds "Bug reports") [💻](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=kentcdodds "Code") [📖](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=kentcdodds "Documentation") [🤔](#ideas-kentcdodds "Ideas, Planning, & Feedback") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [📢](#talk-kentcdodds "Talks") [⚠️](https://github.com/bernard-lin/babel-plugin-glamorous-displayname/commits?author=kentcdodds "Tests") |
| :---: | :---: |
This project follows the [all-contributors][all-contributors] specification.
Contributions of any kind welcome!
## LICENSE
MIT
[npm]: https://www.npmjs.com/
[node]: https://nodejs.org
[build-badge]: https://img.shields.io/travis/bernard-lin/babel-plugin-glamorous-displayname.svg?style=flat-square
[build]: https://travis-ci.org/bernard-lin/babel-plugin-glamorous-displayname
[coverage-badge]: https://img.shields.io/codecov/c/github/bernard-lin/babel-plugin-glamorous-displayname.svg?style=flat-square
[coverage]: https://codecov.io/github/bernard-lin/babel-plugin-glamorous-displayname
[version-badge]: https://img.shields.io/npm/v/babel-plugin-glamorous-displayname.svg?style=flat-square
[package]: https://www.npmjs.com/package/babel-plugin-glamorous-displayname
[downloads-badge]: https://img.shields.io/npm/dm/babel-plugin-glamorous-displayname.svg?style=flat-square
[npmcharts]: http://npmcharts.com/compare/babel-plugin-glamorous-displayname
[license-badge]: https://img.shields.io/npm/l/babel-plugin-glamorous-displayname.svg?style=flat-square
[license]: https://github.com/bernard-lin/babel-plugin-glamorous-displayname/blob/master/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/bernard-lin/babel-plugin-glamorous-displayname/blob/master/other/CODE_OF_CONDUCT.md
[github-watch-badge]: https://img.shields.io/github/watchers/bernard-lin/babel-plugin-glamorous-displayname.svg?style=social
[github-watch]: https://github.com/bernard-lin/babel-plugin-glamorous-displayname/watchers
[github-star-badge]: https://img.shields.io/github/stars/bernard-lin/babel-plugin-glamorous-displayname.svg?style=social
[github-star]: https://github.com/bernard-lin/babel-plugin-glamorous-displayname/stargazers
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20babel-plugin-glamorous-displayname!%20https://github.com/bernard-lin/babel-plugin-glamorous-displayname%20%F0%9F%91%8D
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/bernard-lin/babel-plugin-glamorous-displayname.svg?style=social
[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
[all-contributors]: https://github.com/kentcdodds/all-contributors
[glamorous.macro]: https://www.npmjs.com/package/glamorous.macro