@bem-react/classname: Support css-modules [RFC]
- 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
Assessment
This issue has not been assessed yet.