Use CSS selectors to find HTML anti-patterns

Creating Rules

create a configuration in a .selective file.

@selective/rehype will look for a config.selective file in the current folder by default.

The rules language is designed to work similar to CSS. Use a CSS Selector to find HTML elements.

Instead of the usual style rules, linter rules are used.

• name a unique identifier for easily tracking down the rule
• description an explanation of the problem.
• recommended how this will be reported, can be one of:
  • error will stop processing and return an error code
  • warn will continue processing, but highlight as important, no error code.
  • info will continue processing, no error code.
  • off disabled

Example Rules

img:not([alt]) {
  name: "img-alt";
  description: "image tag must contain an alt property";
  recommended: warn;
}

img:not([src]) {
  name: "img-src";
  description: "image tag must contain an src property";
  recommended: warn;
}

ol > :not(li),
ul > :not(li),
:not(ol) > li,
:not(ul) > li {
  name: "list-item";
  description: "unorder lists, ordered lists, and list items must have a direction relationship";
  recommended: warn;
}

Atom Usage

apm install linter-selective

linter-selective

Rehype CLI Usage

in package.json through rehype.

{
  "devDependencies": {
    "rehype": "^5.0.0",
    "@selective/rehype": "0.0.3"
  },
  "rehype": {
    "plugins": ["@selective/rehype"]
  }
}

this can be additionally customized with a custom config file path

{
  "devDependencies": {
    "rehype": "^5.0.0",
    "@selective/rehype": "0.0.3"
  },
  "rehype": {
    "plugins": [["@selective/rehype", { "config": "custom.selective" }]]
  }
}

Programmatic Usage

const rehype = require("rehype");
const selectiveRehype = require("@selective/rehype");
const { readFileSync } = require("fs");

rehype()
  .use(
    selectiveRehype({
      config: "config.selective",
    })
  )
  .process(readFileSync("somefile.html"), (err) => {
    console.error(err);
  });