Skip to content

Migrate font-weight utility to tailwind

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

What does this MR do and why?

Related #456641 (closed)

Migrate gl-font-weight-* to tailwind utilities

  • gl-font-weight-normal to gl-font-normal
  • gl-font-weight-semibold to gl-font-semibold
  • gl-font-weight-bold to gl-font-bold

The important variants (see [CSS utilities TG] Important utilities > Font w... (#456592 - closed)) will be done in another MR because the amount of changes in this MR is already very big.

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

gl-font-normal

gl-font-semibold

gl-font-semibold

gl-font-bold

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-font-weight-2
rm config/helpers/tailwind/css_in_js.js && yarn tailwindcss:build
git diff config/helpers/tailwind/css_in_js.js
  1. gl-font-weight-normal and gl-font-weight-bold remain because they're used in gitlab-ui, while gl-font-weight-semibold is not.
diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index b09fd8490b54..691d1c085e62 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 522 definitions need to be migrated to Tailwind.
+ * The following 521 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -658,7 +658,6 @@ module.exports = {
   '.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' },
Edited by Lorenz van Herwaarden

Merge request reports