Skip to content

クラス命名の接頭辞にl-とp-を許可する#847

Open
yusasa16 wants to merge 3 commits intodevfrom
feat/class-naming-lpc-prefix
Open

クラス命名の接頭辞にl-とp-を許可する#847
yusasa16 wants to merge 3 commits intodevfrom
feat/class-naming-lpc-prefix

Conversation

@yusasa16
Copy link
Copy Markdown

@yusasa16 yusasa16 commented Mar 9, 2026

デザイン作成において、Layout層とPage層の設置・ルール化を検討する。
それに伴い、それぞれの層に対応した接頭辞の追加する。

Close #846

yusasa16 added 3 commits March 9, 2026 17:05
Allow layout (l-) and page (p-) prefixes in addition to component (c-).
Prefix order in patterns: lpc.

Made-with: Cursor
Allow layout (l-) and page (p-) prefixes in addition to component (c-).
Prefix order in patterns: lpc.

Made-with: Cursor
@yusasa16 yusasa16 requested review from YusukeHirao and arktds March 9, 2026 08:14
@yusasa16 yusasa16 self-assigned this Mar 9, 2026
!selector.startsWith('.l-') &&
!selector.startsWith('.p-')
) {
return `クラス名は「l-」「p-」「c-」のいずれかで始めてください: ${selector}`;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
return `クラス名は「l-」「p-」「c-」のいずれかで始めてください: ${selector}`;
return `クラス名は「l-」「p-」「c-」のいずれかから始めてください: ${selector}`;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

手段などの意味の「で」ではなく、手順などの意味の「から」のほうがより良いかなと思います。

@@ -1,5 +1,5 @@
.component {
// クラス名は「c-」から始めてください: .component
// クラス名は「l-」「p-」「c-」のいずれかで始めてください: .component
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// クラス名は「l-」「p-」「c-」のいずれかで始めてください: .component
// クラス名は「l-」「p-」「c-」のいずれかから始めてください: .component

Comment thread test/cli.spec.mjs

expect(violations).toStrictEqual([
'test/fixtures/stylelint/class-name.scss:1:1 クラス名は「c-」から始めてください: .component (selector-class-pattern)',
'test/fixtures/stylelint/class-name.scss:1:1 クラス名は「l-」「p-」「c-」のいずれかで始めてください: .component (selector-class-pattern)',
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
'test/fixtures/stylelint/class-name.scss:1:1 クラス名は「l-」「p-」「c-」のいずれかで始めてください: .component (selector-class-pattern)',
'test/fixtures/stylelint/class-name.scss:1:1 クラス名は「l-」「p-」「c-」のいずれかから始めてください: .component (selector-class-pattern)',

@arktds
Copy link
Copy Markdown
Collaborator

arktds commented Apr 13, 2026

@yusasa16
この README は c- のままなので変更が必要です!
https://github.com/d-zero-dev/linters/blob/dev/packages/%40d-zero/markuplint-config/README.md

"value": "/^c-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/"

@arktds
Copy link
Copy Markdown
Collaborator

arktds commented Apr 13, 2026

各所「コンポーネント」から「ブロック」(またはより適切な名称)へリライトしたほうが良さそうな箇所があるので、別途プルリクエスト #848 を作成しました!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

クラス命名の接頭辞にl-p-を許可する

3 participants