/css-statistics

Node module to parse a stylesheet and return an object with stats

Primary LanguageJavaScript

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 of 0 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 of display: 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 selectors
  • declarations - total number of declarations
  • properties - an array of properties used in the stylesheet
  • mediaQueries - an array of media query strings used in the stylesheet
  • idSelectors - total number of selectors containing an id
  • classSelectors - total number of selectors containing a class
  • pseudoElementSelectors - total number of selectors containing an pseudo element
  • pseudoClassSelectors - total number of selectors containing a pseudo class
  • repeatedSelectors - 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.