Disallow usage of deprecated CSS classes

Rule ID:: deprecated-class
Category:: Deprecated
Standards:: -

Disallows usage of configurable CSS class names that have been marked as deprecated.

By default, the list of deprecated classes is empty and must be configured by the user.

Rule details

Examples of incorrect code for this rule:

<button class="old-btn">Click me</button>
<div class="legacy-grid">Content</div>

error: class "old-btn" is deprecated (deprecated-class) at inline:1:16:
> 1 | <button class="old-btn">Click me</button>
    |                ^^^^^^^
  2 | <div class="legacy-grid">Content</div>


error: class "legacy-grid" is deprecated (deprecated-class) at inline:2:13:
  1 | <button class="old-btn">Click me</button>
> 2 | <div class="legacy-grid">Content</div>
    |             ^^^^^^^^^^^


2 errors found.

Examples of correct code for this rule:

<button class="new-btn">Click me</button>
<div class="modern-layout">Content</div>

Options

This rule takes an optional object:

{
  "classes": []
}

`classes`

List of deprecated CSS class names.

Each entry is an object with the following properties:

class: name of the deprecated CSS class.
message: optional message to display.
replacement: optional replacement class name (string) or list of class names (string[])
url: optional URL with further details.

Configuring the same class name more than once produces unpredictable results.

Example configuration:

.htmlvalidate.json

{
  "rules": {
    "deprecated-class": [
      "error",
      {
        "classes": [
          {
            "class": "old-btn",
            "message": "Use the new button component instead",
            "replacement": "btn-primary",
            "url": "https://example.com/design-system/buttons"
          },
          {
            "class": "legacy-grid",
            "replacement": "grid-modern"
          },
          {
            "class": "float-left"
          }
        ]
      }
    ]
  }
}

const { defineConfig } = require("html-validate");

module.exports = defineConfig({
  rules: {
    "deprecated-class": [
      "error",
      {
        classes: [
          {
            class: "old-btn",
            message: "Use the new button component instead",
            replacement: "btn-primary",
            url: "https://example.com/design-system/buttons",
          },
          {
            class: "legacy-grid",
            replacement: "grid-modern",
          },
          {
            class: "float-left",
          },
        ],
      },
    ],
  },
});

import { defineConfig } from "html-validate";

export default defineConfig({
  rules: {
    "deprecated-class": [
      "error",
      {
        classes: [
          {
            class: "old-btn",
            message: "Use the new button component instead",
            replacement: "btn-primary",
            url: "https://example.com/design-system/buttons",
          },
          {
            class: "legacy-grid",
            replacement: "grid-modern",
          },
          {
            class: "float-left",
          },
        ],
      },
    ],
  },
});

Version history

10.9.0 - Rule added.