Skip to content

feat(css): Create `!important` versions of GitLab UI utility classes

Enrique Alcántara requested to merge feat-important-utility-classes into master

What does this MR do?

It rewrites the utility class generator to use PostCSS instead of our custom parser. PostCSS provides a very powerful AST that we can use to further customize utility class generation. The purpose of this change is generating utilities that are marked as !important without marking utility mixins as !important as well.

Why?

Marking GitLab utility classes as !important will allow us to fully get rid of Bootstrap utility class library. Currently, the most important shortfall of GitLab UI utility-class library is that we can’t use them in scenarios where the specificity of the existing CSS is high. In those cases, we fallback to bootstrap utility-classes.

This MR does not remove the non-important versions of the utility classes. It provides !important versions of the existing utility classes for the cases described above. The important versions of GitLab UI utility classes are suffixed with !, for example: gl-display-flex vs gl-display-flex!

Why don’t we mark all utility mixins as !important?

  • It retains our capability of overriding component’s styles (for better and for worse).
  • It feels more iterative and less destructive to start by only marking utilities as !important rather than all components’s styles.

How to test?

I developed this PostCSS plugin using ASTExplorer. You can play with it at https://astexplorer.net/#/gist/bff60060c31fc40a2902760822aa0731/latest.

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.
Edited by Enrique Alcántara

Merge request reports