A test framework to assert that CSS doesn't exceeds certain thresholds.
Clone or download
Latest commit 76acfcf Dec 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Restructure tests (#26) Dec 29, 2018
test Restructure tests (#26) Dec 29, 2018
.gitignore Init commit Aug 12, 2018
.travis.yml Adds travis CI integration (#15) Nov 6, 2018
cli.js Restructure tests (#26) Dec 29, 2018
license Adds license and keywords Aug 12, 2018
package-lock.json 1.3.2 Dec 29, 2018
package.json 1.3.2 Dec 29, 2018
readme.md add npm version badge Dec 29, 2018

readme.md

Gromit

NPM Version Build Status Known Vulnerabilities XO code style Dependencies Status Dependencies Status

A test framework to assert that CSS doesn't exceed provided thresholds.

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

Usage

Gromit needs CSS input and a config file.

# Default usage (assuming a .gromitrc file in the current directory)
$ gromit style.css

# Read from StdIn (assuming a .gromitrc file in the current directory)
$ cat style.css | gromit

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

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 IE9 will drop any subsequent rules
	"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.

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"
	}
}

Related projects

  • CSS Analyzer - The analyzer that powers this module
  • Wallace - CLI tool for @projectwallace/css-analyzer
  • CSS Analyzer Diff - Calculates the diff between two sets of CSS analysis
  • Color Sorter - Sort CSS colors by hue, saturation, lightness and opacity

License

MIT © Bart Veneman