Migrate negative margin utils to Tailwind in CI

What does this MR do and why?

Migrate negative margin utils to Tailwind in CI

Migrates legacy negative margin CSS utils to their Tailwind equivalents in CI components.

The following utils are being migrated in this MR:

  • gl-mb-n1
  • gl-mb-n2
  • gl-mb-n3
  • gl-mb-n4
  • gl-mb-n5
  • gl-mb-n8
  • gl-ml-n2
  • gl-ml-n3
  • gl-ml-n4
  • gl-mr-n3
  • gl-mt-n2
  • gl-mt-n3

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

Here's a single screenshot to showcase one instance:

CI variable drawer
Screenshot_2024-04-25_at_11.08.26_AM

How to set up and validate locally

  1. Navigate to a project's Settings > CI/CD > Variables.

  2. Click on Add variable.

  3. Here's how this affects the CSS-in-JS:

    diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
    index 9f56524930ca..2a8bd08d7b03 100644
    --- a/config/helpers/tailwind/css_in_js.js
    +++ b/config/helpers/tailwind/css_in_js.js
    @@ -1,5 +1,5 @@
     /**
    - * The following 620 definitions need to be migrated to Tailwind.
    + * The following 618 definitions need to be migrated to Tailwind.
      * Let's do this! 🚀
      */
     module.exports = {
    @@ -526,9 +526,7 @@ module.exports = {
       '.mb-n3\\!': { 'margin-bottom': '-0.5rem !important' },
       '.mb-4\\!': { 'margin-bottom': '0.75rem !important' },
       '.mb-5\\!': { 'margin-bottom': '1rem !important' },
    -  '.mb-n5': { 'margin-bottom': '-1rem' },
       '.mb-6\\!': { 'margin-bottom': '1.5rem !important' },
    -  '.mb-n8': { 'margin-bottom': '-2.5rem' },
       '.sm-ml-auto': { '@media (min-width: 576px)': { 'margin-left': 'auto' } },
       '.ml-0\\!': { 'margin-left': '0 !important' },
       '.ml-n1': { 'margin-left': '-0.125rem' },

Related to #456630 (closed)

Edited by Savas Vedova

Merge request reports

Loading