Skip to content

feat: Add Tailwind class validation for constant files #763

@georgewrmarshall

Description

@georgewrmarshall

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:

  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 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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions