postcss-bad-selectors

PostCSS plugin that slaps you, if you write wrong selectors.

Install

npm install postcss-bad-selectors

Example

var path    = require('path');
var postcss = require('postcss');
var bad     = require('postcss-bad-selectors');

postcss([bad(getToken)])
	.process(css, { from: './css/_module.logo.css' })
	.catch(function(err) {
		console.log(err); // Wrong selector error
	})


function getToken(file) {
	var file        = path.basename(file);
	var prefixRegex = /^_module/gi;
	var token       = null;

	if (prefixRegex.test(file)) {
		token = file.replace(prefixRegex, '');
		token = path.basename(token, '.css');
	}

	return token; // 'Valid CSS selector e.g. _module.logo.css => .logo'
}

Note: getToken can return String or RegExp.

Input

.logo {}
.wrapper .logo-blue {}

Output

postcss-bad-selectors: /Users/john/Server/project/css/_module.logo.css:8:2: Wrong selector
@media (max-width: 767px) {
	.logo,
 ^
	.wrapper .logo-blue {}

Contributing

Pull requests are welcome.

License

MIT © 2createStudio