Skip to content

Remove unwanted SCSS extend from contextual sidebar

Simon Knox requested to merge psi-no-extend-avatar into master

What does this MR do and why?

Replace an @extend with the actual rule that it adds.

@extend makes CSS output confusing (hard to tell impact on output), and causes compiler overhead - see #323021 (closed)

Removes this:

/* line 185, app/assets/stylesheets/components/avatar.scss */
.rect-avatar.s32,
.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar .avatar.s32,
.sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 {
  border-radius: 4px;
}

And instead adds this:

/* line 142, app/assets/stylesheets/framework/contextual_sidebar.scss */
.sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 {
  border-radius: 4px;

and this

/* line 142, app/assets/stylesheets/framework/contextual_sidebar.scss */
.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar .avatar.s32 {
  border-radius: 4px;

So we have the same selectors as before, but they are grouped with the other contextual_sidebar CSS instead of lumped in with avatar.scss. @extend is bad.

How to test

  1. Check the avatar on left sidebar still has 4px border radius
  2. I think that is all

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Simon Knox

Merge request reports