postcss-validator

PostCSS plugin to check if an input string is valid CSS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
postcss-validator
0.2.06 years ago6 years agoMinified + gzip package size for postcss-validator in KB

Readme

postcss-validator Build Status
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.

Features

postcss-validator can check to using the followings:
  • Nested selector (like Sass)
  • Unknown properties

Example

Using nested selectors

Input:
.class {
  color: tomato;

  .nested {
    color: lime;
  }
}

Yield:
CssSyntaxError: postcss-validator: <css input>:2:3: Nested rules [.nested]

Using unknown property

Input:
.class {
  margintop: 10px;
}

Yield:
CssSyntaxError: postcss-validator: <css input>:2:3: Unknown property [margintop] is used

Installation

$ npm install postcss-validator

Usage

Set postcss-validator at the bottom of loaded PostCSS plugins.

in Node.js

// 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

License

The MIT License (MIT)
Copyright (c) 2017 Masaaki Morishita