@bem-react/classname: Support css-modules [RFC]
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 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 ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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 1週間以上 初心者へのやさしさ 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 日前に担当しましたが、オープン中のプルリクエストはありません。 オープンbug scope: pack
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 77/100
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 72/100
cline/mcp-marketplace#2932 ·
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
難易度 1/5 1時間未満 初心者へのやさしさ 82/100
lingdojo/kana-dojo#32188 · コメント 1 件 · リアクション 5 件 ·
メンテナーはふだん 1 日以内に返信
-
triage
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
Portkey-AI/gateway#1844 ·
メンテナーはふだん 1 日以内に返信
-
needs triage
難易度 2/5 1〜3時間 初心者へのやさしさ 61/100
rjsf-team/react-jsonschema-form#5495 ·
メンテナーはふだん 2 日以内に返信