babel-plugin-transform-stitches-display-name

Babel plugin to add displayName to your styled component

Input

let foo = styled('div', {});

Output

let foo = Object.assign({}, styled('div', {}), {
  displayName: "foo"
});

Installation

$ npm install babel-plugin-transform-stitches-display-name

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-stitches-display-name"]
}

Via CLI

$ babel --plugins transform-stitches-display-name script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["transform-stitches-display-name"],
});

Acknowledgements

This plugin is adapted from @babel/plugin-transform-react-display-name many thanks to the Babel team.