Usecase of regexSelector
Case 1: Check designed CSS class name
Case you follow designed CSS class name like the BEM.
- The block name must be first charactor is upper-alphabet and subsequent is lower-alphabet or numbers.
- The element name must be lower-alphabet or numbers after owned block name and two underscore.
- The element must not be child of no-owned block and/or element.
<!-- ✅ Correct -->
<section class="Card">
<div class="Card__header">
<div class="Heading">
<h3 class="Heading__lv3">Title</h3>
</div>
</div>
<div class="Card__body">
<div class="List">
<ul class="List__group">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</section>
<!-- ❌ Incorrect -->
<section class="Card">
<div class="Card__header">
<!-- ❌ Element in Element belong Another Block -->
<h3 class="Heading__lv3">Title</h3>
</div>
<div class="Card__body">
<!-- ❌ Element in Element belong Another Block -->
<ul class="List__group">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</section>
Setting
Use class-naming
rule.
{
"rules": {
"class-naming": "/^[A-Z][a-z0-9]+$/"
},
"childNodeRules": [
{
"regexSelector": {
"attrName": "class",
"attrValue": "/^(?<BlockName>[A-Z][a-z0-9]+)(?:__[a-z][a-z0-9-]+)?$/"
},
"rules": {
"class-naming": {
"value": ["/^{{BlockName}}__[a-z][a-z0-9-]+$/", "/^([A-Z][a-z0-9]+)$/"]
}
}
}
]
}
Case 2: Check filenames of images
Case you want to match filenames of the img element and the source elements.
- The filename of the img element is a basis.
- Set to the source element the filename that added resolution with
@
to the base name. - If the filename is
logo.png
, it must setlogo@2x.png
to the source element. - It will disallow the format that
logo-2x.png
etc.
<picture>
<!-- ✅ Correct -->
<source srcset="logo@3x.png 3x" />
<source srcset="logo@2x.png 2x" />
<!-- ❌ Incorrect: Invalid format -->
<source srcset="logo-3x.png 3x" />
<!-- ❌ Incorrect Different name -->
<source srcset="symbol@2x.png 2x" />
<!-- It is the basis -->
<img src="logo.png" alt="logo" />
</picture>
Setting
Use invalid-attr
rule.
{
"rules": {
"invalid-attr": true
},
"nodeRules": [
{
"regexSelector": {
"nodeName": "img",
"attrName": "src",
"attrValue": "/^(?<FileName>.+)\\.(?<Exp>png|jpg|webp|gif)$/",
"combination": {
"combinator": ":has(~)",
"nodeName": "source"
}
},
"rules": {
"invalid-attr": {
"option": {
"attrs": {
"srcset": {
"enum": ["{{FileName}}@2x.{{Exp}} 2x", "{{FileName}}@3x.{{Exp}} 3x"]
}
}
}
}
}
}
]
}