Support CSS modules

[greentinned]

Сделал обертки для оригинальных Block, Elem:

import { Block as BemBlock } from 'bem-react-core'

import applyStyles from './functions'

class Block extends BemBlock {
  buildClassName(bemjson) {
    return applyStyles(this.styles, super.buildClassName(bemjson))
  }
}

export default Block

и для Bem:

import { Bem as BemComponentHelper } from 'bem-react-core'

import applyStyles from './functions'

class Bem extends BemComponentHelper {
  buildClassName(bemjson) {
    return applyStyles(this.props.styles, super.buildClassName(bemjson))
  }
}

export default Bem

Функция applyStyles — заменить все селекторы на селекторы с хэшем из css модуля:

export default function applyStyles(styles, classNames) {
  if (!styles) return classNames
  return classNames
    .split(' ')
    .map(selector => styles[selector] || selector)
    .reduce((a, b) => `${a} ${b}`)
}

Переменная styles объединяет нужные стили, после чего передаю их в декларацию:

import style from './MyBlock.css'
import mixStyle from '../Typo/Typo.css'

const styles = {
  ...mixStyle,
  ...style
}

class MyBlock extends Block {
  block = 'MyBlock'
  styles = styles

  mods() {
    return {
      mod1: true
    }
  }
  mix() {
    return {
      block: 'Typo',
      mods: {
        size: 'body1'
      }
    }
  }
  content() {
    return <Bem elem='MyElem' styles={styles}></Bem>
  }
}

Было бы круто если бы styles можно было указать только для блока, а элементы получали бы её автоматически.

[yarastqt]

Хм, возможно стоит написать HOC который можно будет положить в BRC

function withStyles(WrappedComponent) {
  return class WithStyles extends WrappedComponent {
    static displayName = `withStyles(${WrappedComponent.displayName})`
    buildClassName() {...}
  }
}

[awinogradov]

309