@bartveneman/gromit

A test framework to assert that CSS doesn't exceeds certain tresholds.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@bartveneman/gromit
Minified + gzip package size for @bartveneman/gromit in KB

Readme

Gromit

A test framework to assert that CSS doesn't exceeds certain tresholds.

  • Provide a config file with tresholds to check
  • Pass in the CSS
  • Gromit will let you know whether your CSS passes the test

Usage

Gromit relies on you passing in CSS and a config.

# Default usage
$ gromit style.css

# Custom config
$ gromit style.css --config=my-config.json

# Read from StdIn
$ cat style.css | gromit

The result will look like something like this:

TAP version 13
# Subtest: selectors.id.total
    ok 1 - selectors.id.total should not be larger than 0 (actual: 0)
    1..1
ok 1 - selectors.id.total # time=6.024ms

1..1
# time=15.076ms

 ✔ "Well done, lad! Very well done..."

Note that this example uses only 1 test (total ID selectors).

Config file

Gromit will try to fetch a .gromitrc 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:

{
    // Do not exceed 4095, otherwise IE will drop any subsequent rules
    "rules.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.

Custom reporter

By default, Gromit will report in the TAP format, but you can pipe the output into something you may find prettier, like tap-nyan or any other TAP-reporter.

$ gromit style.css | tap-nyan

 1   -_,------,
 0   -_|   /\_/\
 0   -^|__( ^ .^)
     -  ""  ""
  Pass!

Usage in CI

If any test fails, Gromit will exit with a non-zero exit code. When you run Gromit in your CI builds, this may cause the build to fail. This is exactly what Gromit was designed to do.

Example usage with package.json:

{
    "name": "my-package",
    "version": "0.1.0",
    "scripts": {
        "test": "gromit compiled-styles.css"
    }
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.