Skip to content

Migrate important font weight utilities to Tailwind variants

Lorenz van Herwaarden requested to merge tailwind/migrate-important-font-weight into master

What does this MR do and why?

Related #456592 (closed)

Migrate important font weight utilities to Tailwind variants

  • gl-font-weight-normal! -> !gl-font-normal
  • gl-font-weight-semibold! -> !gl-font-semibold
  • gl-font-weight-bold! -> !gl-font-bold

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-font-normal in app/assets/javascripts/vue_shared/components/markdown/header.vue

_gl-font-normal

!gl-font-semibold in ee/app/assets/javascripts/merge_requests/components/reviewers/approval_rules.vue

_gl-font-semibold

!gl-font-bold in app/views/admin/application_settings/appearances/_system_header_footer_form.html.haml

_gl-font-bold

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-important-font-weight
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
git diff config/helpers/tailwind/css_in_js.js
  1. The 3 utilities are removed from css_in_js.js
diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index d44dde79b304..d0d8a99ce6c2 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 519 definitions need to be migrated to Tailwind.
+ * The following 516 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -654,11 +654,8 @@ module.exports = {
   '.font-size-markdown': { 'font-size': '1rem' },
   '.reset-font-size': { 'font-size': 'inherit' },
   '.font-weight-normal': { 'font-weight': '400' },
-  '.font-weight-normal\\!': { 'font-weight': '400 !important' },
   '.font-weight-semibold': { 'font-weight': '500' },
-  '.font-weight-semibold\\!': { 'font-weight': '500 !important' },
   '.font-weight-bold': { 'font-weight': '600' },
-  '.font-weight-bold\\!': { 'font-weight': '600 !important' },
   '.sm-font-weight-bold': { '@media (min-width: 576px)': { 'font-weight': '600' } },
   '.line-height-1': { 'line-height': '1' },
   '.line-height-normal': { 'line-height': '1rem' },
Edited by Lorenz van Herwaarden

Merge request reports