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 set logo@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"]
              }
            }
          }
        }
      }
    }
  ]
}