CSS Statistics
Parses stylesheets and returns an object with statistics
Used in http://cssstats.com
Installation
npm install --save cssstats
Usage
var fs = require('fs');
var cssstats = require('csstats');
var css = fs.readFileSync('./styles.css', 'utf8');
var obj = cssstats(css);
Instead of a CSS string, you can also pass the PostCSS AST:
var fs = require('fs');
var postcss = require('postcss');
var cssstats = require('csstats');
var css = fs.readFileSync('./styles.css', 'utf8');
var ast = postcss.parse(css);
var obj = cssstats(ast);
Using the CLI
npm i -g cssstats
cssstats file path/to/file.css > results.json
You can also pipe CSS to cssstats:
cat some-css-file.css | cssstats
getcss google.com | cssstats
Returned Object
size
: The size of the file in bytes
gzipSize
: The size of the stylesheet gzipped in bytes
selectors
: An array of selectors sorted by source order with the selector string, specificity score, and parts array
declarations
: An object of declarations.
declarations.all
: An array of declaration objects from PostCSS.declarations.byProperty
: An object with keys for each property found in the stylesheet.declarations.unique
: An object with keys for each unique property/value found in the stylesheet.declarations.byMedia
: An object with keys for each media query found in the stylesheet.declarations.propertyResetDeclarations
: An object with keys for each property with a value of0
found in the stylesheet. (Actually only margins and paddings are counted)declarations.importantCount
: The number of declarations with values that contain!important
declarations.vendorPrefixCount
: The number of declaration properties that have vendor prefixes.declarations.displayNoneCount
: The number ofdisplay: none;
declarations.declarations.uniqueDeclarationsCount
: The number of unique declarations.
rules
: Flattened array of rules from PostCSS.
aggregates
: Aggregate data for the entire stylesheet.
selectors
- total number of selectorsdeclarations
- total number of declarationsproperties
- an array of properties used in the stylesheetmediaQueries
- an array of media query strings used in the stylesheetidSelectors
- total number of selectors containing an idclassSelectors
- total number of selectors containing a classpseudoElementSelectors
- total number of selectors containing an pseudo elementpseudoClassSelectors
- total number of selectors containing a pseudo classrepeatedSelectors
- array of selectors that were declared more than once
For every unique property found in the stylesheet, aggregates
also includes these values:
[property].total
- total number of [property] declarations[property].unique
- number of unique [property] declarations
See the /test/results
folder for example JSON results.