MetaMask / MetaMask/metamask-design-system

Create Migration Script: Style Utility Props to Tailwind CSS Classes

Open
#266 0 comments 0 reactions 1 assignee Claimed by @georgewrmarshall View on GitHub
team-design-system
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.