Skip to content

Migrate list style to tailwind

Lorenz van Herwaarden requested to merge tailwind/migrate-list-style into master

What does this MR do and why?

Related #456583 (closed)

This migrates list style utils to tailwind variants

  • .gl-list-style-none! -> .!gl-list-none
  • .gl-list-style-none -> .gl-list-none
  • .gl-list-style-position-inside -> .gl-list-inside

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

!gl-list-none in vulnerability with report type list

Screenshot_2024-04-26_at_12.56.24

gl-list-none in sidebar

Screenshot_2024-04-26_at_13.18.15

gl-list-inside in vulnerability details links

Screenshot_2024-04-26_at_13.21.03

How to set up and validate locally

The config/helpers/tailwind/css_in_js.js configuration lets us support Tailwind-incompatible legacy CSS utilities through the Tailwind generator. Those are the utilities we need to migrate to their Tailwind equivalent to make GitLab fully Tailwindy.

By showing the diff between this configuration before and after the migration we can validate the migration.

  1. Run following script to produce a diff for css-in-js config:
git checkout master
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
git add --force config/helpers/tailwind/css_in_js.js
git checkout tailwind/migrate-list-style
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
git diff config/helpers/tailwind/css_in_js.js
  1. two list style utilities are dropped from the config because they're fully migrated to tailwind. .gl-list-style-none is still used in gitlab-ui and therefore is not in this diff.
diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index 7aaaad48a6b5..5ce3fb78a35b 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 619 definitions need to be migrated to Tailwind.
+ * The following 617 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -361,8 +361,6 @@ module.exports = {
     '@media (min-width: 992px)': { 'grid-template-columns': 'repeat(4, 1fr)' },
   },
   '.list-style-none': { 'list-style-type': 'none' },
-  '.list-style-none\\!': { 'list-style-type': 'none !important' },
-  '.list-style-position-inside': { 'list-style-position': 'inside' },
   '.opacity-0': { opacity: '0' },
   '.opacity-0\\!': { opacity: '0 !important' },
   '.opacity-3': { opacity: '0.3' },
Edited by Lorenz van Herwaarden

Merge request reports