ChristianMurphy / selective

Statically find HTML anti patterns using CSS Selectors
MIT License
14 stars 0 forks source link
accessibility css-selector lint linter rehype

Selective

NPM Version Linux Build Status Windows Build status

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.

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

selective lint example

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);
  });