Fix: Utility class generator does not add `!important` to responsive classes
requested to merge 871-utility-class-generator-does-not-add-important-to-responsive-classes-like-gl-display-sm-none into master
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:- [-] GitLab: mr_url
- [-] Customers Portal: mr_url
- [-] Status Page: mr_url
- [-] Added the
~"component:*"
label(s) if applicable.
Closes #871 (closed)
Edited by Robert Hunt