Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yusasa16 merged 7 commits into from
May 14, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
659e20d
feat(markuplint-config): add l- and p- prefixes to class naming rule
yusasa16 Mar 9, 2026
61e8319
feat(stylelint-config): add l- and p- prefixes to class naming rule
yusasa16 Mar 9, 2026
f962488
test: update expectations for lpc class naming prefix
yusasa16 Mar 9, 2026
ef91378
Update packages/@d-zero/stylelint-config/name.js
yusasa16 Apr 20, 2026
893a20d
Update test/fixtures/stylelint/class-name.scss
yusasa16 Apr 20, 2026
986c0b6
Update test/cli.spec.mjs
yusasa16 Apr 20, 2026
154892c
docs(markuplint-config): update class-naming example to include l- an…
yusasa16 Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/@d-zero/markuplint-config/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ npm install -D @d-zero/markuplint-config
"rules": {
// 例: クラス名の命名規則を変更する
"class-naming": {
"value": "/^c-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/"
"value": "/^(?<Prefix>[lpc])-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/"
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions packages/@d-zero/markuplint-config/name.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const nameBase = {
rules: {
'class-naming': {
severity: 'error',
value: '/^c-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/',
value: '/^(?<Prefix>[lpc])-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/',
reason:
'クラス名の形式はディーゼロのコーディングガイドラインに則って命名する必要があります。 http://tmpl.d-zero.com/__guideline/coding-guideline/html.html#%F0%9F%92%8E-%E3%82%B3%E3%83%B3%E3%83%9B%E3%82%9A%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88',
},
Expand All @@ -14,16 +14,16 @@ const nameBase = {
{
regexSelector: {
attrName: 'class',
attrValue: '/^c-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/',
attrValue: '/^(?<Prefix>[lpc])-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/',
},
inheritance: true,
rules: {
'class-naming': {
severity: 'error',
value: [
'/^c-{{ ComponentName }}__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/',
'/^c-(?!{{ ComponentName }})[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/',
'/^c-{{ ComponentName }}[a-z0-9]*(?:-[a-z0-9]+)*$/',
'/^{{ Prefix }}-{{ ComponentName }}__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/',
'/^[lpc]-(?!{{ ComponentName }})[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/',
'/^{{ Prefix }}-{{ ComponentName }}[a-z0-9]*(?:-[a-z0-9]+)*$/',
],
reason:
'ディーゼロのコーディングガイドラインではコンポーネントの中はそのコンポーネントのエレメントか、他のコンポーネントである必要があります。 http://tmpl.d-zero.com/__guideline/coding-guideline/html.html#%E3%82%B3%E3%83%B3%E3%83%9B%E3%82%9A%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E6%A7%8B%E6%88%90%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%B9%E5%91%BD%E5%90%8D%E8%A6%8F%E5%89%87',
Expand Down
10 changes: 7 additions & 3 deletions packages/@d-zero/stylelint-config/name.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,20 @@ module.exports = {
'custom-media-pattern': '[a-z][a-z-]*',
'custom-property-pattern': '[a-z][a-z-]*',
'selector-class-pattern': [
'^c-[a-z][a-z0-9]*(?:-[a-z0-9]+)*(?:__[a-z0-9]+(?:-[a-z0-9]+)*)?$',
'^[lpc]-[a-z][a-z0-9]*(?:-[a-z0-9]+)*(?:__[a-z0-9]+(?:-[a-z0-9]+)*)?$',
{
resolveNestedSelectors: true,
/**
* @param {string} selector
* @returns {string}
*/
message: (selector) => {
if (!selector.startsWith('.c-')) {
return `クラス名は「c-」から始めてください: ${selector}`;
if (
!selector.startsWith('.c-') &&
!selector.startsWith('.l-') &&
!selector.startsWith('.p-')
) {
return `クラス名は「l-」「p-」「c-」のいずれかから始めてください: ${selector}`;
}
if (selector.split('__').length > 2) {
return `「__」はコンポーネント名とエレメント名の区切りを表します。エレメント名の文字区切りは「-」を使います: ${selector}`;
Expand Down
26 changes: 13 additions & 13 deletions test/cli.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,10 +137,10 @@ describe('markuplint', () => {
test('CLI', async () => {
const violations = await markuplint('test/fixtures/markuplint/test.*');
expect(violations).toStrictEqual([
'test/fixtures/markuplint/test.pug:14:6 The "c-component__invalid-element-nesting" class name is unmatched with the below patterns: "/^c-component2__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-(?!component2)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-component2[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/test.pug:14:6 The "c-component__invalid-element-nesting" class name is unmatched with the below patterns: "/^c-component2__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^[lpc]-(?!component2)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-component2[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/test.pug:9:4 The "div" element is not allowed in the "span" element in this context',
'test/fixtures/markuplint/test.html:17:66 Illegal characters must escape in character reference',
'test/fixtures/markuplint/test.html:14:18 The "c-component__invalid-element-nesting" class name is unmatched with the below patterns: "/^c-component2__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-(?!component2)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-component2[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/test.html:14:18 The "c-component__invalid-element-nesting" class name is unmatched with the below patterns: "/^c-component2__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^[lpc]-(?!component2)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-component2[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/test.html:26:3 The "br" element is disallowed',
'test/fixtures/markuplint/test.html:25:12 The "href" attribute is matched with the below disallowed patterns: /^javascript:/i',
'test/fixtures/markuplint/test.html:9:9 The "div" element is not allowed in the "span" element in this context',
Expand All @@ -155,14 +155,14 @@ describe('markuplint', () => {
test('Extended Naming', async () => {
const normalConfig = await markuplint('test/fixtures/markuplint/extended-naming.*');
expect(normalConfig).toStrictEqual([
'test/fixtures/markuplint/extended-naming.pug:2:2 The "splide" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:4:4 The "splide__track" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:5:5 The "splide__list" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:6:6 The "splide__slide" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:8:6 The "splide__slide" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:10:6 The "splide__slide" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:12:4 The "splide__arrows" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:15:29 The "splide__pagination" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:2:2 The "splide" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^[lpc]-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:4:4 The "splide__track" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^[lpc]-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:5:5 The "splide__list" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^[lpc]-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:6:6 The "splide__slide" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^[lpc]-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:8:6 The "splide__slide" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^[lpc]-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:10:6 The "splide__slide" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^[lpc]-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:12:4 The "splide__arrows" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^[lpc]-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
'test/fixtures/markuplint/extended-naming.pug:15:29 The "splide__pagination" class name is unmatched with the below patterns: "/^c-carousel__[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^[lpc]-(?!carousel)[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/", "/^c-carousel[a-z0-9]*(?:-[a-z0-9]+)*$/"',
]);

const addedClassName = await markuplint(
Expand Down Expand Up @@ -203,8 +203,8 @@ describe('markuplint', () => {
'packages/@d-zero/markuplint-config/base.js',
);
expect(violations).toStrictEqual([
'test/fixtures/markuplint/button-command.html:27:17 The "btn" class name is unmatched with the below patterns: "/^c-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/"',
'test/fixtures/markuplint/button-command.html:45:58 The "btn" class name is unmatched with the below patterns: "/^c-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/"',
'test/fixtures/markuplint/button-command.html:27:17 The "btn" class name is unmatched with the below patterns: "/^(?<Prefix>[lpc])-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/"',
'test/fixtures/markuplint/button-command.html:45:58 The "btn" class name is unmatched with the below patterns: "/^(?<Prefix>[lpc])-(?<ComponentName>[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/"',
'test/fixtures/markuplint/button-command.html:102:2 Detected perceptible nodes between the trigger and corresponding target',
'test/fixtures/markuplint/button-command.html:103:2 Detected perceptible nodes between the trigger and corresponding target',
'test/fixtures/markuplint/button-command.html:104:2 Detected perceptible nodes between the trigger and corresponding target',
Expand Down Expand Up @@ -279,7 +279,7 @@ describe('stylelint', () => {
);

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)',
'test/fixtures/stylelint/class-name.scss:6:2 Stylelint v17以降「&」を使ったセレクタの文字列結合に対応しなくなったため、「&」の使用を禁止します: &__element (selector-nested-pattern)',
'test/fixtures/stylelint/class-name.scss:10:2 Stylelint v17以降「&」を使ったセレクタの文字列結合に対応しなくなったため、「&」の使用を禁止します: &__invalid__element-name (selector-nested-pattern)',
'test/fixtures/stylelint/class-name.scss:14:2 Stylelint v17以降「&」を使ったセレクタの文字列結合に対応しなくなったため、「&」の使用を禁止します: &__foo😁bar (selector-nested-pattern)',
Expand Down
2 changes: 1 addition & 1 deletion test/fixtures/stylelint/class-name.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.component {
// クラス名は「c-」から始めてください: .component
// クラス名は「l-」「p-」「c-」のいずれかから始めてください: .component
}

.c-component {
Expand Down