csstree-validator

CSS Tree Validator

CSS validator built on CSSTree

How to use:

NPM package

> npm install csstree-validator

Manualy validate CSS string or CSSTree's AST:

const { validate } = require('./lib');

console.log(validate('.class { pading: 10px; border: 1px super red }', 'demo/example.css'));
// [
//   SyntaxError [SyntaxReferenceError]: Unknown property `pading` {
//     reference: 'pading',
//     property: 'pading',
//     offset: 9,
//     line: 1,
//     column: 10
//   },
//  SyntaxError [SyntaxMatchError]: Mismatch {
//    message: 'Invalid value for `border` property',
//    rawMessage: 'Mismatch',
//    syntax: '<line-width> || <line-style> || <color>',
//    css: '1px super red',
//    mismatchOffset: 4,
//    mismatchLength: 5,
//    offset: 35,
//    line: 1,
//    column: 36,
//    loc: { source: 'demo/example.css', start: [Object], end: [Object] },
//    property: 'border',
//    details: 'Mismatch\n' +
//      '  syntax: <line-width> || <line-style> || <color>\n' +
//      '   value: 1px super red\n' +
//      '  ------------^'
//  }
// ]

Another option is to use helpers to validate a file or directory and buildin reporters:

const { validateFile } = require('csstree-validator');
const reporter = require('csstree-validator').reporters.checkstyle;

console.log(reporter(validateFile('/path/to/style.css')));

API

Validate methods:

• validateAtrule(node)
• validateAtrulePrelude(atrule, prelude, preludeLoc)
• validateAtruleDescriptor(atrule, descriptor, value, descriptorLoc)
• validateDeclaration(property, value, valueLoc)
• validateRule(node)
• validate(css, filename)

Helpers:

• validateDictionary(dictionary)
• validateString(css, filename)
• validateFile(filename)
• validateFileList(list)
• validatePath(searchPath, filter)
• validatePathList(pathList, filter)

Reporters:

• json
• console
• checkstyle
• gnu

Library in a browser

<script src="csstree-validator/dist/csstree-validator.js"></script>
<script>
    const errors = csstreeValidator.validate('.some { css: source }');
</script>

NOTE: Helpers and reporters are not available for browser version at the moment.

CLI (terminal command)

> npm install -g csstree-validator
> csstree-validator /path/to/style.css

> csstree-validator -h
Usage:

  csstree-validate [fileOrDir] [options]

Options:

  -h, --help               Output usage information
  -r, --reporter <name>    Format of output: console (default), checkstyle, json, gnu
  -v, --version            Output version

Ready to use

Plugins that are using csstree-validator:

• Sublime plugin
• VS Code plugin
• Atom plugin
• Grunt plugin
• Gulp plugin

License

MIT

Changelog

2.0.1 (March 31, 2021)

• Fixed wrong require() in CLI that causes to crash
• Bumped csstree to 1.1.3 to fix the issue with parsing that causes to a failure on a value with function/brackets and !important (#18)