https://github.com/afzalsayed96/babel-plugin-transform-stitches-display-name
Babel plugin to add displayName to your styled component
https://github.com/afzalsayed96/babel-plugin-transform-stitches-display-name
babel-plugin hacktoberfest
Last synced: 5 months ago
JSON representation
Babel plugin to add displayName to your styled component
- Host: GitHub
- URL: https://github.com/afzalsayed96/babel-plugin-transform-stitches-display-name
- Owner: afzalsayed96
- License: mit
- Created: 2020-10-11T17:14:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-07-12T09:58:13.000Z (11 months ago)
- Last Synced: 2025-10-13T02:41:31.274Z (8 months ago)
- Topics: babel-plugin, hacktoberfest
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/babel-plugin-transform-stitches-display-name
- Size: 150 KB
- Stars: 17
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - babel-plugin-transform-stitches-display-name
README
[](https://techforpalestine.org/learn-more)
# babel-plugin-transform-stitches-display-name
Babel plugin to add displayName to your styled component
## Input
```js
let foo = styled('div', {});
```
## Output
```js
let foo = Object.assign({}, styled('div', {}), {
displayName: "foo"
});
```
## Installation
```sh
$ npm install babel-plugin-transform-stitches-display-name
```
## Usage
### Via `.babelrc` (Recommended)
**.babelrc**
```json
{
"plugins": ["transform-stitches-display-name"]
}
```
### Via CLI
```sh
$ babel --plugins transform-stitches-display-name script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["transform-stitches-display-name"],
});
```
## Acknowledgements
This plugin is adapted from [@babel/plugin-transform-react-display-name](https://github.com/babel/babel/tree/main/packages/babel-plugin-transform-react-display-name) many thanks to the Babel team.