babel-plugin-transform-styletron-display-name

1.2.0 verified Sat Apr 25 auth: no javascript maintenance

Babel plugin that automatically adds a displayName property to styletron-react styled components, improving debugging in React DevTools. Current version 1.2.0. Intended for use during development only. Requires @babel/core v7+. Part of the Styletron ecosystem; no other packages needed. Minimal plugin with a single purpose. Not actively maintained; Styletron project focuses on core packages.

Common errors

error Cannot find module '@babel/core' ↓

cause @babel/core is not installed as a peer dependency.

fix

npm install --save-dev @babel/core

Warnings

deprecated Plugin is no longer actively maintained; Styletron recommends alternative debugging methods. ↓

fix Use Styletron's built-in display name support or switch to React DevTools without displayName.

gotcha Only works with styletron-react styled components; not for styled-components or emotion. ↓

fix Ensure you are using styletron-react and not another styling library.

gotcha Plugin should only be used in development; adding displayName in production may increase bundle size. ↓

fix Apply plugin only in 'development' environment in Babel config.

Install

npm install babel-plugin-transform-styletron-display-name

yarn add babel-plugin-transform-styletron-display-name

pnpm add babel-plugin-transform-styletron-display-name

Imports

babel-plugin-transform-styletron-display-name

wrong

import plugin from 'babel-plugin-transform-styletron-display-name'

correct

module.exports = { plugins: ['babel-plugin-transform-styletron-display-name'] };

Used as a Babel plugin reference in config; not imported directly in application code.

Quickstart

Adds the plugin to Babel config so it runs only in development mode, adding displayNames to styled components.

// .babelrc
{
  "env": {
    "development": {
      "plugins": ["babel-plugin-transform-styletron-display-name"]
    }
  }
}

// or babel.config.js
module.exports = {
  env: {
    development: {
      plugins: ['babel-plugin-transform-styletron-display-name'],
    },
  },
};