Skip to content

Fix legacy to tailwind CSS class comparison

Lukas 'ai-pi' Eipert requested to merge leipert-fix-tailwind-comparison into master

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

  1. yarn run tailwindcss:build
  2. then yarn run lint:tailwind-utils (potentially twice)
  3. CI passing
  4. The pipeline of !154725 (merged) should now pass.
Edited by Lukas 'ai-pi' Eipert

Merge request reports