Allows/disallows using certain selector types (type, .class, #id, *universal [attribute] :pseudo) at either global or local level (.global > .local).
npm install postcss-selector-lint
🐱 Please don't use CSS selectors of type "id" in global scope (stylesheet.css:11,1 "#header").
PostCSS Selector Lint warns about disallowed selector types in either 'global' or 'local' scope. This helps preventing
scope pollution by warning about non-nested type (tag) selectors which might have unwanted side-effects.
> "Only use class names in selectors, no IDs or HTML tag names." -- kandl-style-guide.
The configuration of this linter is fully customizable.
Install with npm
``sh`
npm install --save-dev postcss-selector-lint
`js
var postcss = require('postcss')
var selectorLint = require('postcss-selector-lint')
var config = {}; // Optional
postcss([selectorLint(config)]);
`
Scope types:
- Global: non-nested selectors - h1
- Local: nested selectors -
Selector types
- Type: Tag type - h1
- Class: Tag class -
- Id: Tag id -
- universal: Universal selector -
- attribute: Attribute selector-
- pseudo: Pseudo class selector-
Default:
The default configuration only lets you use class selectors in global scope. In local (nested) scope, type (h1),universal (*) and attribute ([type=checkbox]) are also allowed.
Configuration scheme:
`js
const config = {
global: {
type: false,
class: true,
id: false,
universal: false,
attribute: false,
psuedo: false,
},
local: {
type: true,
class: true,
id: false,
universal: true,
attribute: true,
psuedo: true,
},
options: {
excludedFiles: [''], // Allows filenames to be excluded from linting.
}
};
`
`sh``
npm test
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Maykin Media
* maykinmedia.nl
* github/maykinmedia
* twitter/maykinmedia
Copyright © 2020 Maykin Media
Licensed under the MIT license.