Skip to content

feat(markuplint)!: upgrade markuplint to v5.0.0-alpha.3 #841

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

Draft
YusukeHirao wants to merge 6 commits into
base: dev
Choose a base branch
from
Draft

feat(markuplint)!: upgrade markuplint to v5.0.0-alpha.3 #841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
31ee4b9
feat(markuplint)!: upgrade markuplint to v5.0.0-alpha.3
YusukeHirao Feb 27, 2026
749a599
test(markuplint): update test expectations for markuplint v5
YusukeHirao Feb 27, 2026
ea649e9
feat(markuplint): convert D-ZERO custom rules to v5 named rule groups
YusukeHirao Feb 27, 2026
b24ed43
test(markuplint): include ruleId and name in test output format
YusukeHirao Feb 27, 2026
2086642
feat(markuplint): add additional v5 rules
YusukeHirao Feb 27, 2026
84778cf
test(markuplint): add attr-order test and fix fixture attribute order
YusukeHirao Feb 27, 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
34 changes: 28 additions & 6 deletions packages/@d-zero/markuplint-config/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,26 @@
export default {
extends: ['markuplint:recommended-static-html'],
rules: {
'disallowed-element': {
value: ['br'],
reason:
'br要素は原則使用しません。代わりにCSSでスタイルを調整してください。使用する場合は理由が必要です。（D-ZERO独自ルール）',
// markuplint:recommended-static-html (performance preset) の
// img[src] に対する width, height 必須ルールを無効化
// width, height はビルド時に自動的に付与されるため問題なしとする
'performance/img-aspect-ratio': false,
'attr-order': ['id', 'class', 'role', { group: 'aria' }, { group: 'data' }],
'head-element-order': true,
'no-boolean-attr-value': true,
'no-default-value': true,
'no-use-event-handler-attr': true,
// browserslist設定がある場合にブラウザ未サポート要素・属性を検出
// @see https://github.com/markuplint/markuplint/issues/3328
'no-unsupported-features': true,
'd-zero/no-br': {
rules: {
'disallowed-element': {
value: ['br'],
reason:
'br要素は原則使用しません。代わりにCSSでスタイルを調整してください。使用する場合は理由が必要です。（D-ZERO独自ルール）',
},
},
},
},
nodeRules: [
Expand All @@ -18,6 +34,7 @@ export default {
},
},
{
name: 'd-zero/html-allow-prefix-attr',
selector: 'html',
rules: {
// <html prefix="og: http://ogp.me/ns#">
Expand All @@ -34,10 +51,9 @@ export default {
},
},
{
name: 'd-zero/img-require-alt',
selector: 'img',
rules: {
// https://github.com/markuplint/markuplint/blob/c35e0beb5e14093a41cee7634221dbe7f7d577f9/packages/%40markuplint/config-presets/src/preset.performance.json#L25-L35 の設定を上書き
// width, height の指定は上書きされるため、省略可能になるが、ビルド時に自動的に付与されるため問題なしとする
'required-attr': {
value: 'alt',
reason:
Expand All @@ -46,6 +62,7 @@ export default {
},
},
{
name: 'd-zero/img-src-kebab-case',
selector:
'img:not([src^="data:"], [src^="blob:"], [src^="https://"], [src^="http://"], [src^="//"])',
rules: {
Expand All @@ -64,6 +81,7 @@ export default {
},
},
{
name: 'd-zero/media-src-kebab-case',
selector: 'video, audio, source',
rules: {
'invalid-attr': {
Expand All @@ -85,6 +103,7 @@ export default {
},
},
{
name: 'd-zero/a-href-convention',
selector: 'a',
rules: {
'required-attr': {
Expand All @@ -107,6 +126,7 @@ export default {
},
},
{
name: 'd-zero/button-require-command',
selector: 'button[type=button]:not([role]):not([popovertarget])',
rules: {
'required-attr': {
Expand All @@ -117,6 +137,7 @@ export default {
},
},
{
name: 'd-zero/button-prefer-commandfor',
selector: 'button[popovertarget]',
rules: {
'required-attr': {
Expand All @@ -127,6 +148,7 @@ export default {
},
},
{
name: 'd-zero/button-prefer-command-action',
selector: 'button[popovertargetaction]',
rules: {
'required-attr': {
Expand Down
4 changes: 2 additions & 2 deletions packages/@d-zero/markuplint-config/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"*.js"
],
"dependencies": {
"@markuplint/pug-parser": "4.6.23",
"markuplint": "4.14.0"
"@markuplint/pug-parser": "5.0.0-alpha.3",
"markuplint": "5.0.0-alpha.3"
}
}
111 changes: 71 additions & 40 deletions test/cli.spec.mjs
View file
Open in desktop

Large diffs are not rendered by default.

23 changes: 23 additions & 0 deletions test/fixtures/markuplint/attr-order-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attr Order Test</title>
</head>
<body>
<h1>Attribute Order Tests</h1>

<!-- Should PASS: correct order (id > class > role > aria > data > specific) -->
<button id="btn1" class="btn" role="tab" aria-selected="true" data-index="0" type="button">Correct</button>
<img id="hero" class="img" alt="Hero" src="hero.jpg" />
<input id="search" class="input" aria-label="Search" data-type="search" name="q" type="search">
<a id="link" class="nav" role="menuitem" aria-current="page" href="/">Home</a>

<!-- Should ERROR: wrong order -->
<button type="button" class="btn" id="btn2">type before class and id</button>
<img src="photo.jpg" class="img" alt="Photo" />
<input name="email" aria-label="Email" class="input" type="email">
<a href="/" class="nav" id="link2" role="menuitem">href before class and id</a>
<div data-value="1" aria-hidden="true" class="box" id="box1">data before aria, class, id</div>
</body>
</html>
32 changes: 16 additions & 16 deletions test/fixtures/markuplint/button-command.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h1>Button Command Attribute Tests</h1>
<button aria-label="Action">With aria-label</button>

<!-- Button with class/id but no command -->
<button class="btn" id="my-button">With class and id</button>
<button id="my-button" class="btn">With class and id</button>

<!-- Form buttons OUTSIDE of form element -->
<button type="submit">Submit outside form</button>
Expand All @@ -35,16 +35,16 @@ <h1>Button Command Attribute Tests</h1>
======================================== -->

<!-- Basic command usage -->
<button commandfor="dialog" command="show-modal">Open Dialog</button>
<button commandfor="dialog" command="close">Close Dialog</button>
<button commandfor="popover" command="show-popover">Show Popover</button>
<button commandfor="popover" command="hide-popover">Hide Popover</button>
<button commandfor="details" command="toggle-popover">Toggle Details</button>
<button command="show-modal" commandfor="dialog">Open Dialog</button>
<button command="close" commandfor="dialog">Close Dialog</button>
<button command="show-popover" commandfor="popover">Show Popover</button>
<button command="hide-popover" commandfor="popover">Hide Popover</button>
<button command="toggle-popover" commandfor="details">Toggle Details</button>

<!-- Command with other attributes -->
<button commandfor="dialog" command="show-modal" class="btn">With class</button>
<button commandfor="dialog" command="show-modal" disabled>Disabled with command</button>
<button commandfor="dialog" command="show-modal" aria-label="Open">With aria</button>
<button class="btn" command="show-modal" commandfor="dialog">With class</button>
<button command="show-modal" commandfor="dialog" disabled>Disabled with command</button>
<button aria-label="Open" command="show-modal" commandfor="dialog">With aria</button>

<!-- ========================================
Should PASS: Role exceptions
Expand Down Expand Up @@ -77,21 +77,21 @@ <h1>Button Command Attribute Tests</h1>
</form>

<!-- With form attribute referencing external form -->
<button type="submit" form="external-form">Submit for external form</button>
<button type="reset" form="external-form">Reset for external form</button>
<button form="external-form" type="submit">Submit for external form</button>
<button form="external-form" type="reset">Reset for external form</button>

<!-- ========================================
Edge cases: Multiple attributes
======================================== -->

<!-- Role takes precedence (should pass) -->
<button role="tab" commandfor="dialog" command="show-modal">Role + Command</button>
<button role="tab" command="show-modal" commandfor="dialog">Role + Command</button>

<!-- Submit type takes precedence (should pass) -->
<button type="submit" commandfor="dialog" command="show-modal">Submit + Command</button>
<button command="show-modal" commandfor="dialog" type="submit">Submit + Command</button>

<!-- Reset type takes precedence (should pass) -->
<button type="reset" commandfor="dialog" command="show-modal">Reset + Command</button>
<button command="show-modal" commandfor="dialog" type="reset">Reset + Command</button>

<!-- ========================================
Popovertarget attribute (Modern HTML)
Expand All @@ -109,7 +109,7 @@ <h1>Button Command Attribute Tests</h1>

<dialog id="dialog">
<p>Dialog content</p>
<button commandfor="dialog" command="close">Close</button>
<button command="close" commandfor="dialog">Close</button>
</dialog>

<div id="popover" popover>
Expand All @@ -126,7 +126,7 @@ <h1>Button Command Attribute Tests</h1>
</div>

<form id="external-form">
<input type="text" name="name">
<input name="name">
</form>
</body>
</html>
6 changes: 3 additions & 3 deletions test/fixtures/markuplint/extended-naming.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
.splide__track
.splide__list
.splide__slide
img(src="path/to/image01.jpg" alt="image01")
img(alt="image01" src="path/to/image01.jpg")
.splide__slide
img(src="path/to/image02.jpg" alt="image02")
img(alt="image02" src="path/to/image02.jpg")
.splide__slide
img(src="path/to/image03.jpg" alt="image03")
img(alt="image03" src="path/to/image03.jpg")
.splide__arrows.c-carousel__arrows
.c-carousel__control
button.c-carousel__control-prev(aria-label="Previous")
Expand Down
24 changes: 12 additions & 12 deletions test/fixtures/markuplint/image-naming-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@
<h1>Image Naming Test</h1>

<!-- Valid image file names -->
<img src="images/hero-banner.jpg" alt="Hero banner" />
<img src="assets/icons/search-icon.png" alt="Search icon" />
<img src="media/product-image-01.webp" alt="Product image" />
<img src="data:image/png;base64,XXXX" alt="Data URI image" />
<img src="blob:XXXX" alt="Blob image" />
<img src="https://XXXX" alt="HTTPS image" />
<img src="http://XXXX" alt="HTTP image" />
<img src="//XXXX" alt="Protocol-relative image" />
<img alt="Hero banner" src="images/hero-banner.jpg" />
<img alt="Search icon" src="assets/icons/search-icon.png" />
<img alt="Product image" src="media/product-image-01.webp" />
<img alt="Data URI image" src="data:image/png;base64,XXXX" />
<img alt="Blob image" src="blob:XXXX" />
<img alt="HTTPS image" src="https://XXXX" />
<img alt="HTTP image" src="http://XXXX" />
<img alt="Protocol-relative image" src="//XXXX" />

<!-- Invalid image file names - should trigger errors -->
<img src="images/Hero Banner.jpg" alt="Hero banner with spaces" />
<img src="assets/ProductImage.PNG" alt="Uppercase letters" />
<img src="images/file_name.jpg" alt="Underscore in filename" />
<img src="assets/image.JPEG" alt="Uppercase extension" />
<img alt="Hero banner with spaces" src="images/Hero Banner.jpg" />
<img alt="Uppercase letters" src="assets/ProductImage.PNG" />
<img alt="Underscore in filename" src="images/file_name.jpg" />
<img alt="Uppercase extension" src="assets/image.JPEG" />
</body>
</html>
2 changes: 1 addition & 1 deletion test/fixtures/markuplint/test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Document</title>
</head>
<body>
Expand Down
2 changes: 1 addition & 1 deletion test/fixtures/markuplint/test.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
meta(content="width=device-width, initial-scale=1.0" name="viewport")
title Document
body
span
Expand Down
12 changes: 6 additions & 6 deletions test/fixtures/markuplint/valid-image-naming.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
<h1>Valid Image Names</h1>

<!-- All valid image file names - should pass -->
<img src="images/hero-banner.jpg" alt="Hero banner" />
<img src="assets/icons/search-icon.png" alt="Search icon" />
<img src="media/product-image-01.webp" alt="Product image" />
<img src="photos/team-member-photo.jpg" alt="Team member" />
<img src="icons/star.svg" alt="Star icon" />
<img src="thumbnails/thumb-001.gif" alt="Thumbnail" />
<img alt="Hero banner" src="images/hero-banner.jpg" />
<img alt="Search icon" src="assets/icons/search-icon.png" />
<img alt="Product image" src="media/product-image-01.webp" />
<img alt="Team member" src="photos/team-member-photo.jpg" />
<img alt="Star icon" src="icons/star.svg" />
<img alt="Thumbnail" src="thumbnails/thumb-001.gif" />
</body>
</html>
Loading