Registry / babel-plugin-transform-styletron-display-name

babel-plugin-transform-styletron-display-name

JSON →
library1.2.0jsnpmunverified

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.

npm install babel-plugin-transform-styletron-display-name
github ↗package ↗
INSTALL
IMPORT
SIG · BABEL-PLUGIN-TRANS
B
babel-plugin-transform-styletron-display-name
javascriptv1.2.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

babel-plugin-transform-styletron-display-name
✓ module.exports = { plugins: ['babel-plugin-transform-styletron-display-name'] };
✗ import plugin from 'babel-plugin-transform-styletron-display-name'
Used as a Babel plugin reference in config; not imported directly in application code.

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'], }, }, };
Debug
Known issues
deprecatedPlugin 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.
affects: >=1.0.0
gotchaOnly works with styletron-react styled components; not for styled-components or emotion.
fix
Ensure you are using styletron-react and not another styling library.
affects: >=1.0.0
gotchaPlugin should only be used in development; adding displayName in production may increase bundle size.
fix
Apply plugin only in 'development' environment in Babel config.
affects: >=1.0.0
Errors
Common errors & fixes
Cannot find module '@babel/core'
@babel/core is not installed as a peer dependency.
fix
npm install --save-dev @babel/core
Upgrade
Version history
1.2.0latest on npm
Audit
Dependencies
@babel/corerequiredpeer dependency required for plugin to work
Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/styletron/styletron ↗
packagehttps://www.npmjs.com/package/babel-plugin-transform-styletron-display-name ↗
babel-plugin-transform-styletron-display-name — npm install babel-plugin-transform-styletron-display-name · libregistry