MetaMask / MetaMask/metamask-design-system
Create Migration Script: Style Utility Props to Tailwind CSS Classes
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
Create a migration script to convert style utility props to Tailwind CSS classnames based on the @metamask/design-system-tailwind-preset. This will help modernize our codebase and improve maintainability by leveraging Tailwind's utility-first approach.
The script should transform components using the StyleUtilityProps from [box.types.ts](https://github.com/MetaMask/metamask-extension/blob/main/ui/components/component-library/box/box.types.ts) to use equivalent Tailwind CSS classes.
### **Technical Details**
The migration script should:
1. Parse TypeScript/JavaScript files to identify components using StyleUtilityProps
2. Create a mapping between current props and their Tailwind equivalents:
Key mappings include:
- Spacing utilities:
```typescript
margin -> m-{size}
marginTop -> mt-{size}
marginBottom -> mb-{size}
marginLeft -> ml-{size}
marginRight -> mr-{size}
marginInline -> mx-{size}
marginInlineStart -> ms-{size}
marginInlineEnd -> me-{size}
padding -> p-{size}
paddingTop -> pt-{size}
paddingBottom -> pb-{size}
paddingLeft -> pl-{size}
paddingRight -> pr-{size}
paddingInline -> px-{size}
paddingInlineStart -> ps-{size}
paddingInlineEnd -> pe-{size}
```
- Layout utilities:
```typescript
display -> block/flex/inline/etc
gap -> gap-{size}
flexDirection -> flex-row/flex-col
flexWrap -> flex-wrap/flex-nowrap
justifyContent -> justify-start/justify-end/etc
alignItems -> items-start/items-end/etc
width -> w-{size}
minWidth -> min-w-{size}
height -> h-{size}
```
- Typography & Colors:
```typescript
textAlign -> text-left/text-center/etc
color -> text-{color}/icon-{color}
backgroundColor -> bg-{color}
```
- Borders:
```typescript
borderColor -> border-{color}
borderWidth -> border-{size}
borderRadius -> rounded-{size}
borderStyle -> border-solid/border-dashed/etc
```
3. Handle responsive arrays by converting to Tailwind's responsive modifiers:
```typescript
[sm, md, lg, xl] -> sm:class md:class lg:class xl:class
```
4. Provide a codemod script using jscodeshift or a similar tool
5. Include tests to verify transformations
### **Acceptance Criteria**
- [ ] Script successfully identifies and transforms all StyleUtilityProps to Tailwind classes
- [ ] Handles responsive arrays correctly
- [ ] Maintains existing functionality while converting to Tailwind
- [ ] Provides clear error messages for edge cases
- [ ] Includes documentation for running the migration
- [ ] Includes tests for all transformation cases
- [ ] Provides a way to run the migration on a single file or directory
- [ ] Generates a report of changes made
- [ ] Includes a dry-run option
- [ ] Preserves comments and formatting where possible
### **References**
- [box.types.ts](https://github.com/MetaMask/metamask-extension/blob/main/ui/components/component-library/box/box.types.ts)
- [design-system-tailwind-preset](https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-tailwind-preset)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [jscodeshift](https://github.com/facebook/jscodeshift)
Contributor guide
Assessment
This issue has not been assessed yet.