sentry-flex-layout

Transform CSS-IN-JS styled components to Sentry Flex Layout components

Installation

# Install from registry
codemod run sentry-flex-layout

# Or run locally
codemod run -w workflow.yaml

Usage

This codemod transforms CSS-IN-JS styled components with flexbox properties into Sentry's Flex Layout components.

Example Transformation

Before:

const CenteredDiv = styled("div")`
  display: flex;
  justify-content: center;
  align-items: center;
`

After:

const CenteredDiv = <Flex justify="center" align="center">{children}</Flex>

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

# Test the transformation
npm test

# Validate the workflow
codemod validate -w workflow.yaml

# Publish to registry
codemod login
codemod publish

Migration Strategy

This codemod is designed to handle large-scale migrations of CSS-IN-JS flex layouts to component-based layouts. It:

1. Finds candidates: Automatically identifies styled("div") components with flex properties
2. Extracts properties: Parses CSS and maps flexbox properties to component props
3. Generates components: Creates JSX Flex components with appropriate props
4. Preserves children: Maintains {children} placeholder for component usage

For large codebases with 325+ instances, run the codemod incrementally and test each transformation.

License

MIT