bem / bem/bem-react

@bem-react/classname: Support css-modules [RFC]

Open
#545 5 comments 2 reactions 0 assignees View on GitHub
RFC scope: classname
Dominant language
TypeScript
Stars
450
Forks
69
PR merge metrics
No merged PRs in 30d

Description

## Пример использования

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

```js
// src/components/Button/Button.js
import React from 'react'
import { createCn } from '@bem-react/classname'
import styles from './Button.module.css'

export const { merge, cn } = createCn('Button', styles)

export const Button = ({ children }) => {
return (

{children}

)
}
```

Далее на уровне проекта или эксперимента мы можем переопределить нужные нам стили:

```js
// src/experiments/Button/Button.js
import { merge, cn, Button } from '../../components/Button/Button'
import styles from './Button.module.css'

merge(styles)

export { merge, cn, Button }
```

## Пример реализации

Используем фабрику для генерации классов, в замыкании храним доопределения для компонента и его элементов (в данной реализации не поддержаны модификаторы и миксы):

```js
export function createCn(component, styles) {
const styleOverrides = []
return {
merge(overrides) {
styleOverrides.push(overrides)
},
cn(element) {
const target = element ? `${component}-${element}` : component
const className = [styles]
.concat(styleOverrides)
.map(shape => shape[target])
.join(' ')
return className
}
};
}
```

В таком кейсе нам не нужно будет докидывать микс на элементы снаружи, т.к. вся логика будет инкапсулирована внутри `merge` функции.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.