LucasUnplugged/babel-plugin-named-stitches-classnames

Babel plugin to generate named (human-legible prefixes) class names, with Stitches (https://stitches.dev).

babel-plugin-named-stitches-classnames

Babel plugin to add displayName to your styled component

Input

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

Output

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

Requirements

Currently, this plugin only works with @LucasUnplugged's fork of Stitches (v0.2.3 or later), though hopefully that will change in the future.

Installation

$ npm install babel-plugin-named-stitches-classnames

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["named-stitches-classnames"]
}

Via CLI

$ babel --plugins named-stitches-classnames script.js

Via Node API

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

Acknowledgements

This plugin is adapted from @babel/plugin-transform-stitches-display-name, which is itself adapted from @babel/plugin-transform-react-display-name.