MetaMask / MetaMask/metamask-design-system

feat: Add Tailwind class validation for constant files

Open
#763 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### **Description**

We need to implement proper Tailwind class validation for `.constants.ts` files, particularly for constants that start with `TWCLASSMAP`. Currently, while we've implemented ESLint Tailwind validation for component files in [PR #760](https://github.com/MetaMask/metamask-design-system/pull/760), the validation doesn't effectively catch invalid Tailwind classes in constant files where we define our class mappings.

This is particularly important because these constant files are the source of truth for our component class mappings, and any invalid classes here could propagate throughout the application.

### **Technical Details**

Current state from PR #760:
- We've replaced Prettier Tailwind plugin with ESLint Tailwind plugin
- ESLint configuration is set up to validate classes in component files
- The current regex pattern in ESLint config doesn't effectively catch classes in constant files
- We specifically need to validate constants that start with `TWCLASSMAP`

Potential approaches to explore:
1. Extend the ESLint Tailwind plugin's `classRegex` setting to specifically target `TWCLASSMAP` constants
2. Create a custom ESLint rule that combines Tailwind validation with constant pattern matching
3. Implement a separate validation script that runs during the build process
4. Use TypeScript type system to validate Tailwind classes at compile time

### **Acceptance Criteria**

- [ ] ESLint should validate Tailwind classes in `.constants.ts` files
- [ ] Validation should specifically target constants starting with `TWCLASSMAP`
- [ ] Invalid Tailwind classes in these constants should trigger ESLint errors
- [ ] The solution should work with our existing ESLint Tailwind configuration from PR #760
- [ ] The validation should work in both React and React Native constant files
- [ ] Solution should handle string literals and template literals
- [ ] Documentation should be updated to explain the validation process

### **References**

- [PR #760](https://github.com/MetaMask/metamask-design-system/pull/760) - Implementation of ESLint Tailwind validation
- Current implementation uses `eslint-plugin-tailwindcss` for component validation
- We need to validate classes in files like:
- `AvatarBase.constants.ts`
- `ButtonBase.constants.ts`
- Other component constant files that use `TWCLASSMAP` pattern

Contributor guide

Open the contributing guide

Research direction

Start by reviewing PR #760 and the existing ESLint Tailwind configuration, then inspect AvatarBase.constants.ts and ButtonBase.constants.ts for the TWCLASSMAP pattern. Confirm how React and React Native constant files use string and template literals. Done means ESLint reports invalid Tailwind classes in those constants and the validation process is documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
eslint, tailwindcss, typescript
Domain
tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.