Fix legacy to tailwind CSS class comparison
What does this MR do and why?
Fix legacy to tailwind CSS class comparison
As part of the legacy util => tailwind scripting, we build a lookup
table to a hex color, e.g. #333238
with var(--gray-900, #333238)
but
only if the class name contains gray-900
.
With the introduction of more tokens, we do have a few semantic tokens
mapping to the hex value. So the inverse map didn't end up being
#333238 => gray-900
but #333238 => icon-color-strong
for example.
This had our linting fail.
We now build the inverse map to point to an array instead, and search
if the array matches a value. For example: #333238 => gl-color-neutral-900, icon-color-string, gray-900
.
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
N/A
How to set up and validate locally
yarn run tailwindcss:build
- then
yarn run lint:tailwind-utils
(potentially twice) - CI passing
- The pipeline of !154725 (merged) should now pass.