@bem-react/classname: Support css-modules [RFC]
还没有人认领这个 Issue。
评估
- 难度
- 5/5
- 预计耗时
- 一周以上
- 新手友好度
- 35/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- css, javascript, react
- 领域
- frontend
调研方向
从 @bem-react/classname 包开始，跟踪 issue 中描述的 createCn 入口点。将提议的 Button.js 和 Button.module.css 用法与当前行为进行比较，然后验证样式覆盖是否能够按所示对组件及其元素生效。
由索引模型根据 Issue 内容生成。
描述
Пример использования
Подключаем хелпер и передаем в него название компонента а так же объект со стилями:
// 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 (
<button className={cn()}>
<span className={cn('Text')}>{children}</span>
</button>
)
}
Далее на уровне проекта или эксперимента мы можем переопределить нужные нам стили:
// 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 }
Пример реализации
Используем фабрику для генерации классов, в замыкании храним доопределения для компонента и его элементов (в данной реализации не поддержаны модификаторы и миксы):
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 функции.
- 主要语言
- TypeScript
- 星标
- 450
- 派生
- 69
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
bem/bem-react 的其他 Issue
-
@bem-react/classname: Unclear typing for element-bound class name formatters可能已有人在做 @rrabmig 于 113 天前认领。 未关闭
难度 3/5 1-2 天 新手友好度 68/100
-
难度 5/5 一周以上 新手友好度 25/100
-
@bem-react/classname: Can't add modifier with value === 0可能已有人在做 @frontstall 于 933 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 55/100
-
难度 2/5 1-3 小时 新手友好度 52/100
-
@bem-react/pack: support relative imports可能重新可做 @yarastqt 于 2101 天前认领，目前没有进行中的 PR。 未关闭bug scope: pack
相似的 Issue
-
nextjs-tracking
难度 2/5 1-3 小时 新手友好度 74/100
cloudflare/vinext#3887 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 86/100
apache/rocketmq-dashboard#6331 ·
维护者通常 5 天内回复
-
bug cache clinical-safety P1-critical
难度 2/5 1-3 小时 新手友好度 76/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
juspay/blend-design-system#1788 ·
维护者通常 1 天内回复
-
[Analytics] Add Focus Time-Block Efficiency Ratio Calculator in src/lib/focus/efficiency-ratio.ts未关闭analytics beginner friendly community contributions-welcome enhancement good first issue hacktoberfest help wanted up-for-grabs
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复