generated from MetaMask/metamask-module-template
-
-
Notifications
You must be signed in to change notification settings - Fork 4
Open
Labels
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, 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:
- Extend the ESLint Tailwind plugin's
classRegex
setting to specifically targetTWCLASSMAP
constants - Create a custom ESLint rule that combines Tailwind validation with constant pattern matching
- Implement a separate validation script that runs during the build process
- 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 chore: implement tailwind eslint #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 - 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