sentry-flex-layout
Transform CSS-IN-JS styled components to Sentry Flex Layout components
Installation
Usage
This codemod transforms CSS-IN-JS styled components with flexbox properties into Sentry's Flex Layout components.
Example Transformation
Before:
After:
Supported CSS Properties
The codemod converts the following CSS flexbox properties to Flex component props:
justify-content→justify(flex-start → start, flex-end → end, etc.)align-items→align(flex-start → start, flex-end → end, etc.)flex-direction→direction(row, column, row-reverse, column-reverse)flex-wrap→wrap(wrap, nowrap, wrap-reverse)gap→gap(preserved as-is)
Requirements
- Only transforms
styled("div")components that includedisplay: flex - Requires the Flex component to be imported
- Preserves all other styled components unchanged
Development
Migration Strategy
This codemod is designed to handle large-scale migrations of CSS-IN-JS flex layouts to component-based layouts. It:
- Finds candidates: Automatically identifies
styled("div")components with flex properties - Extracts properties: Parses CSS and maps flexbox properties to component props
- Generates components: Creates JSX Flex components with appropriate props
- Preserves children: Maintains
{children}placeholder for component usage
For large codebases with 325+ instances, run the codemod incrementally and test each transformation.
License
MIT