@backstage/rename-plugin-header-toolbar
Backstage 1.50.0 migration codemod that renames the removed .bui-PluginHeaderToolbarWrapper CSS class to .bui-PluginHeaderToolbar and updates the corresponding classNames.toolbarWrapper property access to classNames.toolbar.
What it does
CSS class rename
In BUI v0.14.0 (Backstage 1.50.0), the toolbarWrapper DOM element was removed from PluginHeader. The CSS class .bui-PluginHeaderToolbarWrapper no longer exists and must be replaced with .bui-PluginHeaderToolbar.
This codemod finds and replaces the class name in:
- String literals (
'.bui-PluginHeaderToolbarWrapper') - Template literals (
`.bui-PluginHeaderToolbarWrapper`) - Object property keys in styled-components, Emotion, MUI
styled(), etc.
Property access rename
Replaces classNames.toolbarWrapper with classNames.toolbar in JS/TS:
Descendant/child selector warnings
When the codemod detects a CSS selector using > (child combinator) or descendant combinators after .bui-PluginHeaderToolbarWrapper, it adds a TODO comment because the wrapper element was removed and these selectors may need restructuring:
Known limitations
- Pure CSS/SCSS files: The AST codemod processes CSS/SCSS files through the workflow
includeglobs but parses them as TSX. For standalone.cssand.scssfiles that contain only CSS (no JS/TS), a text-based search-and-replace may be more appropriate. - Complex selectors in concatenated strings: If the class name is split across multiple string concatenations, the codemod may not detect the full selector context for adding TODO comments.
Optional: AI fixup step
Enable with --param aiFixup=true to address edge cases:
- Reviews TODO comments and assesses whether selectors need restructuring
- Checks for remaining
PluginHeaderToolbarWrapperreferences in styled-components or Emotion - Verifies selector correctness after the wrapper element removal
Installation
Usage (from this repo)
Development
From the repo root:
Or from this package directory:
License
MIT