diff --git a/packages/@d-zero/markuplint-config/README.md b/packages/@d-zero/markuplint-config/README.md index d0df68fa..6a80b86d 100644 --- a/packages/@d-zero/markuplint-config/README.md +++ b/packages/@d-zero/markuplint-config/README.md @@ -65,7 +65,7 @@ npm install -D @d-zero/markuplint-config "rules": { // 例: クラス名の命名規則を変更する "class-naming": { - "value": "/^c-(?[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/" + "value": "/^(?[lpc])-(?[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/" } } } diff --git a/packages/@d-zero/markuplint-config/name.js b/packages/@d-zero/markuplint-config/name.js index 9853989f..3206560f 100644 --- a/packages/@d-zero/markuplint-config/name.js +++ b/packages/@d-zero/markuplint-config/name.js @@ -5,7 +5,7 @@ const nameBase = { rules: { 'class-naming': { severity: 'error', - value: '/^c-(?[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/', + value: '/^(?[lpc])-(?[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', }, @@ -14,16 +14,16 @@ const nameBase = { { regexSelector: { attrName: 'class', - attrValue: '/^c-(?[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$/', + attrValue: '/^(?[lpc])-(?[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', diff --git a/packages/@d-zero/stylelint-config/name.js b/packages/@d-zero/stylelint-config/name.js index 2423cc99..98729102 100644 --- a/packages/@d-zero/stylelint-config/name.js +++ b/packages/@d-zero/stylelint-config/name.js @@ -3,7 +3,7 @@ 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, /** @@ -11,8 +11,12 @@ module.exports = { * @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}`; diff --git a/test/cli.spec.mjs b/test/cli.spec.mjs index 0efda7c2..bf7d87b9 100644 --- a/test/cli.spec.mjs +++ b/test/cli.spec.mjs @@ -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', @@ -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( @@ -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-(?[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-(?[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: "/^(?[lpc])-(?[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: "/^(?[lpc])-(?[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', @@ -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)', diff --git a/test/fixtures/stylelint/class-name.scss b/test/fixtures/stylelint/class-name.scss index ca770cd0..1c9f5335 100644 --- a/test/fixtures/stylelint/class-name.scss +++ b/test/fixtures/stylelint/class-name.scss @@ -1,5 +1,5 @@ .component { - // クラス名は「c-」から始めてください: .component + // クラス名は「l-」「p-」「c-」のいずれかから始めてください: .component } .c-component {