PostCSS is very flexible CSS parser, so we can extend CSS syntax easily. But, The output of PostCSS plugins may not be valid CSS string. postcss-validator can check if an input string is valid CSS.
postcss-validator can check to using the followings:
- Nested selector (like Sass)
- Unknown properties
Input:
.class {
color: tomato;
.nested {
color: lime;
}
}
Yield:
CssSyntaxError: postcss-validator: <css input>:2:3: Nested rules [.nested]
Input:
.class {
margintop: 10px;
}
Yield:
CssSyntaxError: postcss-validator: <css input>:2:3: Unknown property [margintop] is used
$ npm install postcss-validator
Set postcss-validator at the bottom of loaded PostCSS plugins.
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var customProperties = require("postcss-custom-properties")
var nesting = require("postcss-nesting")
var validator = require("postcss-validator")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css
var output = postcss()
.use(customProperties())
.use(nesting())
.use(validator())
.process(css)
.css
The MIT License (MIT)
Copyright (c) 2017 Masaaki Morishita