christianmurphy / selective

Statically find HTML anti patterns using CSS Selectors

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

selective's Issues

Consider migrating from postcss to sast

https://github.com/shawnbot/sast allows, css and scss to be turned into a unist compatible AST.
Which could allow everything in selective to be unist based.

Allow for rules to be disabled from HTML comments

Something similar to https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments
But with HTML comments

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore: update dependency eslint-plugin-jsdoc to v48
• chore: update dependency eslint-plugin-markdown to v4
• chore: update dependency husky to v9
• chore: update dependency jest to v29
• chore: update dependency lerna to v8
• chore: update dependency lint-staged to v15
• chore: update dependency prettier to v3
• chore: update dependency rehype to v13
• chore: update remark (major) (remark-cli, remark-preset-lint-consistent, remark-preset-lint-recommended, remark-validate-links, unified-lint-rule)
• fix: update dependency hast-util-select to v6
• fix: update dependency unified-engine-atom to v10
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix: update dependency postcss to v8.4.31 [security]
• chore: update dependency jest to v27.5.1
• chore: update dependency lint-staged to v11.2.6
• chore: update dependency prettier to v2.8.8
• chore: update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional, @commitlint/config-lerna-scopes, @commitlint/prompt-cli, @commitlint/travis-cli)
• chore: update dependency eslint to v9
• chore: update dependency eslint-plugin-jest to v28
• fix: update dependency atom-package-deps to v8
• fix: update dependency unified-message-control to v5
• chore: lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

@selective/atom/package.json

• atom-package-deps 7.2.3
• rehype 11.0.0
• unified-engine-atom 9.0.0

@selective/lint/package.json

• hast-util-select 4.0.2
• unified-lint-rule ^1.0.2

@selective/marker/package.json

@selective/parse/package.json

• postcss 8.4.4

@selective/rehype/package.json

• unified-message-control ^3.0.0
• rehype 11.0.0

package.json

• @commitlint/cli 12.1.4
• @commitlint/config-conventional 12.1.4
• @commitlint/config-lerna-scopes 12.1.4
• @commitlint/prompt-cli 12.1.4
• @commitlint/travis-cli 12.1.4
• eslint 7.32.0
• eslint-config-standard-jsdoc 9.3.0
• eslint-plugin-jest 24.7.0
• eslint-plugin-jsdoc 33.3.0
• eslint-plugin-markdown 1.0.2
• husky 5.2.0
• jest 27.4.3
• lerna 4.0.0
• lint-staged 11.1.2
• prettier 2.5.1
• remark-cli 9.0.0
• remark-preset-lint-consistent 4.0.0
• remark-preset-lint-recommended 5.0.0
• remark-validate-links 10.0.4

travis

.travis.yml

• node 10
• node 12
• node 14

---

• Check this box to trigger a request for Renovate to run again on this repository

VSCode Plugin

Create a plugin to show selective messages directly in the editor.

---

Potentially would be written as a language server.

https://langserver.org

Create CSS stylesheets from rules

Add an additional module that allows for a CSS file to be generated based off rules.

.error {
  level: error;
  // to
  border: 1px solid red;
}

.warning {
  level: warning;
  // to
  border: 1px solid orange;
}

.info {
  level: info;
  // to
  border: 1px solid blue;
}

Extract config validation?

Consider using json schema to validate configurations, and pulling validation code into its own shared module.

Rule reporting level support

The rules allow setting a default level, currently only warn is supported, add support for error, info, and off.

Run Continuous Integration on Windows

Probably https://www.appveyor.com

Create a selective lint website

Most likely host with GitHub pages https://pages.github.com

Atom Plugin

Create a plugin that integrates with Atom Linter.
Potentially add a mapping the marks *.selective files as css or sass syntax.

https://github.com/steelbrain/linter
https://github.com/steelbrain/linter/tree/master/docs

Shareable Configuration

Allow for selective rules to be made shareable via NPM