sentry-flex-layout
Transform CSS-IN-JS styled components to Sentry Flex Layout components
Installation
bash
Usage
This codemod transforms CSS-IN-JS styled components with flexbox properties into Sentry's Flex Layout components.
Example Transformation
Before:
jsx
After:
jsx
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 include display: flex
- Requires the Flex component to be imported
- Preserves all other styled components unchanged
Development
bash
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