List Tailwind CSS equivalents in Danger message
What does this MR do and why?
The CSS utils task group is in the process of migrating legacy CSS utilities to the Tailwind equivalent. In !150369 (merged) we added a danger rule to warn when legacy CSS utilities were used but we didn't list what the Tailwind equivalent was. This MR adds the Tailwind equivalent to the danger message to make the migration easier for engineers.
How does it work?
I created scripts/frontend/tailwind_equivalents.json based off of config/helpers/tailwind/css_in_js.js. This file is a JSON object where each key is the legacy CSS util and each value is the Tailwind CSS equivalent. If the Tailwind CSS equivalent is not yet configured it has a value of null. The Danger rule then uses this file to list the Tailwind CSS equivalent.
How do we verify the Tailwind CSS equivalents are correct?
I manually went through each legacy CSS util and listed the Tailwind equivalent but I wanted a way to verify these matched and that I didn't make any mistakes. To do this I wrote a new script in scripts/frontend/compare_tailwind_equivalents.mjs. Originally this script was in this MR but after review I want to look into how we can simplify it to use more of the logic in scripts/frontend/lib/tailwind_migration.mjs. I am confident that it is checking the Tailwind equivalents correctly and that scripts/frontend/tailwind_equivalents.json is correct so I have moved the script to !155157 so we can move forward with the Danger rule update. This update will help our engineers a lot and I don't want to delay it further. We can continue to iterate on this setup in !155157.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
How to set up and validate locally
Danger message
- Checkout this branch
- Go to any Vue or HAML file
- Add a legacy util that has a Tailwind equivalent
- Add a legacy util that does not have a Tailwind equivalent
- Commit your changes
- Run
bin/rake danger_local