[Refactoring] Avatar: Get rid of tag selectors

src/components/common/Avatar.scss

@@ -13,7 +13,7 @@
   white-space: nowrap;
   user-select: none;
 
-  img:not(.emoji) {
+  &__img {
     border-radius: 50%;
     width: 100%;
     height: 100%;
@@ -24,7 +24,7 @@
     height: 1rem;
   }
 
-  i {
+  &__icon {
     font-size: 2.5rem;
 
     &.icon-reply-filled {
@@ -94,7 +94,7 @@
     height: 7.5rem;
     font-size: 3.5rem;
 
-    i {
+    &__i {
       font-size: 6rem;
     }
 

src/components/common/Avatar.tsx

@@ -17,7 +17,7 @@ import {
   isUserOnline,
 } from '../../global/helpers';
 import { getFirstLetters } from '../../util/textFormat';
-import buildClassName from '../../util/buildClassName';
+import buildClassName, { createClassNameBuilder } from '../../util/buildClassName';
 import renderText from './helpers/renderText';
 import useMedia from '../../hooks/useMedia';
 import useShowTransition from '../../hooks/useShowTransition';
@@ -25,6 +25,10 @@ import useLang from '../../hooks/useLang';
 
 import './Avatar.scss';
 
+const cn = createClassNameBuilder('Avatar');
+cn.img = cn('img');
+cn.icon = cn('icon');
+
 type OwnProps = {
   className?: string;
   size?: 'micro' | 'tiny' | 'small' | 'medium' | 'large' | 'jumbo';
@@ -73,14 +77,19 @@ const Avatar: FC<OwnProps> = ({
   let content: string | undefined = '';
 
   if (isSavedMessages) {
-    content = <i className="icon-avatar-saved-messages" />;
+    content = <i className={buildClassName(cn.icon, 'icon-avatar-saved-messages')} />;
   } else if (isDeleted) {
-    content = <i className="icon-avatar-deleted-account" />;
+    content = <i className={buildClassName(cn.icon, 'icon-avatar-deleted-account')} />;
   } else if (isReplies) {
-    content = <i className="icon-reply-filled" />;
+    content = <i className={buildClassName(cn.icon, 'icon-reply-filled')} />;
   } else if (blobUrl) {
     content = (
-      <img src={blobUrl} className={buildClassName('avatar-media', transitionClassNames)} alt="" decoding="async" />
+      <img
+        src={blobUrl}
+        className={buildClassName(cn.img, 'avatar-media', transitionClassNames)}
+        alt=""
+        decoding="async"
+      />
     );
   } else if (user) {
     const userFullName = getUserFullName(user);

src/components/common/PickerSelectedItem.scss

@@ -68,7 +68,7 @@
     flex-shrink: 0;
     transition: opacity 0.15s ease;
 
-    i {
+    .Avatar__icon, i {
       font-size: 2rem;
     }
   }

src/util/buildClassName.ts

@@ -1,12 +1,15 @@
 type Parts = (string | false | undefined)[];
 type PartsWithGlobals = (string | false | undefined | string[])[];
+type ClassNameBuilder =
+  ((elementName: string, ...modifiers: PartsWithGlobals) => string)
+  & Record<string, string>;
 
 export default function buildClassName(...parts: Parts) {
   return parts.filter(Boolean).join(' ');
 }
 
 export function createClassNameBuilder(componentName: string) {
-  return (elementName: string, ...modifiers: PartsWithGlobals) => {
+  return ((elementName: string, ...modifiers: PartsWithGlobals) => {
     const baseName = elementName === '&' ? componentName : `${componentName}__${elementName}`;
 
     return modifiers.reduce<string[]>((acc, modifier) => {
@@ -21,5 +24,5 @@ export function createClassNameBuilder(componentName: string) {
 
       return acc;
     }, [baseName]).join(' ');
-  };
+  }) as ClassNameBuilder;
 }