{"id":19224,"library":"babel-plugin-transform-styletron-display-name","title":"babel-plugin-transform-styletron-display-name","description":"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.","status":"maintenance","version":"1.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/styletron/styletron","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-transform-styletron-display-name","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-styletron-display-name","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-styletron-display-name","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin to work","package":"@babel/core","optional":false}],"imports":[{"note":"Used as a Babel plugin reference in config; not imported directly in application code.","wrong":"import plugin from 'babel-plugin-transform-styletron-display-name'","symbol":"babel-plugin-transform-styletron-display-name","correct":"module.exports = { plugins: ['babel-plugin-transform-styletron-display-name'] };"}],"quickstart":{"code":"// .babelrc\n{\n  \"env\": {\n    \"development\": {\n      \"plugins\": [\"babel-plugin-transform-styletron-display-name\"]\n    }\n  }\n}\n\n// or babel.config.js\nmodule.exports = {\n  env: {\n    development: {\n      plugins: ['babel-plugin-transform-styletron-display-name'],\n    },\n  },\n};","lang":"javascript","description":"Adds the plugin to Babel config so it runs only in development mode, adding displayNames to styled components."},"warnings":[{"fix":"Use Styletron's built-in display name support or switch to React DevTools without displayName.","message":"Plugin is no longer actively maintained; Styletron recommends alternative debugging methods.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure you are using styletron-react and not another styling library.","message":"Only works with styletron-react styled components; not for styled-components or emotion.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Apply plugin only in 'development' environment in Babel config.","message":"Plugin should only be used in development; adding displayName in production may increase bundle size.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev @babel/core","cause":"@babel/core is not installed as a peer dependency.","error":"Cannot find module '@babel/core'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}