Skip to content

Fix: Utility class generator does not add `!important` to responsive classes

What does this MR do?

This MR attempts to identify nested @include rules and make sure the !important rule is applied correctly. To do this, it walks through all the inner nodes and when it finds an @include rule, it checks against the known declarations and applies the !important call if it is found.

If the rule is unknown we throw a console.warn() to make sure the developer is aware this may cause problems. The only known time that this may happen is if a developer uses an @include from an external file, for instance using an @include from mixins.scss in utilities.scss.

Before

.gl-sm-ml-3 {
  @media (min-width: $breakpoint-sm) {
    @include gl-ml-3;
  }
}

.gl-sm-ml-3\! {
  @media (min-width: $breakpoint-sm) {
    @include gl-ml-3;
  }
}

.gl-sm-mt-0 {
  @media (min-width: $breakpoint-sm) {
    @include gl-mt-0;
  }
}

.gl-sm-mt-0\! {
  @media (min-width: $breakpoint-sm) {
    @include gl-mt-0;
  }
}

After

.gl-sm-ml-3 {
  @media (min-width: $breakpoint-sm) {
  margin-left: $gl-spacing-scale-3;
  }
}

.gl-sm-ml-3\! {
  @media (min-width: $breakpoint-sm) {
  margin-left: $gl-spacing-scale-3 !important;
  }
}

.gl-sm-mt-0 {
  @media (min-width: $breakpoint-sm) {
  margin-top: 0;
  }
}

.gl-sm-mt-0\! {
  @media (min-width: $breakpoint-sm) {
  margin-top: 0 !important;
  }
}

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.

Closes #871 (closed)

Edited by Robert Hunt

Merge request reports