constyble
A CSS complexity linter, based on css-analyzer. Don't let your CSS grow beyond the thresholds that you provide.
Installation
npm install constyble
yarn add constyble
Usage
We need a config with thresholds and CSS to compare it to.
$ constyble style.css
$ cat style.css | constyble
$ constyble style.css --config my-config.json
The result will look like something like this:
TAP version 13
ok 1 - selectors.id.total should not be larger than 0 (actual: 0)
1..1
ok 1 - selectors.id.total
1..1
Note that this example uses only 1 test (total ID selectors).
Config file
constyble will try to fetch a .constyblerc
file in your current directory. You
can also specify a different JSON config file with the --config
option
(see usage). The config JSON should look similar to this:
{
"selectors.total": 4095,
"selectors.id.total": 0,
"values.colors.totalUnique": 2,
"values.colors.unique": ["#fff", "#000"]
}
All the possible options for the config file can be found at
@projectwallace/css-analyzer.
JSON comments are allowed.
Custom reporter
By default, constyble will report in the
TAP format, but you can pipe the output
into something you may find prettier, like
tap-nyan,
tap-dot or any other
TAP-reporter.
tap-nyan
$ constyble style.css | tap-nyan
1 -_,------,
0 -_| /\_/\
0 -^|__( ^ .^)
- "" ""
Pass!
Usage in CI
If any test fails, constyble will exit with a non-zero exit code. When you run
constyble in your CI builds, this may cause the build to fail. This is exactly
what constyble was designed to do.
Example usage with package.json:
{
"name": "my-package",
"version": "0.1.0",
"scripts": {
"test": "constyble compiled-styles.css"
},
"devDependencies": {
"constyble": "*"
}
}
The name
constyble is a mix of the words Style and Constable. This package is like a
police officer (constable) for your styles. Previously this package was called
Gromit, but that was dropped because it's too closely related to the main
'Wallace' project that this package is part of.
Related projects
License
MIT © Bart Veneman