MetaMask / MetaMask/metamask-design-system
feat: Add Tailwind class validation for constant files
- 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
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