Skip to content

Migrate gl-opacity-* to tailwind

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

What does this MR do and why?

Related #456584 (closed)

Related #456626 (closed)

This migrates the following css classes to tailwind utils. The name remains the same so only a config extension is required to use the GitLab scale for opacity instead of the Tailwind one.

  • gl-opacity-0
  • gl-opacity-3
  • gl-opacity-4
  • gl-opacity-5
  • gl-opacity-6
  • gl-opacity-7
  • gl-opacity-1

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

Example .gl-opacity-7

Screenshot_2024-05-02_at_12.49.07

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-opacity
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
git diff config/helpers/tailwind/css_in_js.js
  1. All opacity utils are dropped except for opacity-0! which is still used in gitlab-ui.
diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index 1481688de5f3..0b5a981b28ab 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 612 definitions need to be migrated to Tailwind.
+ * The following 605 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -363,14 +363,7 @@ module.exports = {
   '.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' },
-  '.opacity-4': { opacity: '0.4' },
-  '.opacity-5': { opacity: '0.5' },
-  '.opacity-6': { opacity: '0.6' },
-  '.opacity-7': { opacity: '0.7' },
-  '.opacity-10': { opacity: '1' },
   '.outline-0': { outline: '0' },
   '.outline-0\\!': { outline: '0 !important' },
   '.outline-none': { outline: 'none' },
Edited by Lorenz van Herwaarden

Merge request reports