[Refactoring] Spoiler: Use BEM

src/components/common/spoiler/Spoiler.scss

@@ -1,5 +1,5 @@
 .Spoiler {
-  &.concealed {
+  &--concealed {
     cursor: pointer;
     background-image: url('../../../assets/spoiler-dots-black.png');
     background-size: auto min(100%, 1.125rem);
@@ -17,16 +17,16 @@
     }
   }
 
-  &.animated {
+  &--animated {
     animation: pulse-opacity-light 1.75s linear infinite;
   }
 
-  span {
+  &__content {
     opacity: 1;
     transition: opacity 250ms ease;
   }
 
-  &.concealed span {
+  &--concealed &__content {
     visibility: hidden;
     opacity: 0;
   }

src/components/common/spoiler/Spoiler.tsx

@@ -3,7 +3,7 @@ import React, {
   FC, memo, useCallback, useEffect,
 } from '../../../lib/teact/teact';
 
-import buildClassName from '../../../util/buildClassName';
+import { createClassNameBuilder } from '../../../util/buildClassName';
 import useFlag from '../../../hooks/useFlag';
 
 import './Spoiler.scss';
@@ -15,6 +15,8 @@ type OwnProps = {
 
 const spoilersByMessageId: Map<number, VoidFunction[]> = new Map();
 
+const buildClassName = createClassNameBuilder('Spoiler');
+
 const Spoiler: FC<OwnProps> = ({
   children,
   messageId,
@@ -47,13 +49,13 @@ const Spoiler: FC<OwnProps> = ({
   return (
     <span
       className={buildClassName(
-        'Spoiler',
+        '&',
         !isRevealed && 'concealed',
         !isRevealed && Boolean(messageId) && 'animated',
       )}
       onClick={messageId && !isRevealed ? handleClick : undefined}
     >
-      <span>
+      <span className={buildClassName('content')}>
         {children}
       </span>
     </span>

src/util/buildClassName.ts

@@ -1,5 +1,19 @@
 type Parts = (string | false | undefined)[];
 
-export default (...parts: Parts) => {
+export default function buildClassName(...parts: Parts) {
   return parts.filter(Boolean).join(' ');
-};
+}
+
+export function createClassNameBuilder(componentName: string) {
+  return (elementName: string, ...modifiers: Parts) => {
+    const baseName = elementName === '&' ? componentName : `${componentName}__${elementName}`;
+
+    return modifiers.reduce((acc, modifier) => {
+      if (modifier) {
+        acc.push(`${baseName}--${modifier}`);
+      }
+
+      return acc;
+    }, [baseName]).join(' ');
+  };
+}