StyleStats

Installation

StyleStats works on Node.js 4.x.

$ npm install -g stylestats

Usage

$ stylestats path/to/stylesheet.css
StyleStats!
┌─────────────────────────────────┬──────────────────────────┐
│ Published                       │ June 14, 2016 10:35 AM   │
├─────────────────────────────────┼──────────────────────────┤
│ Paths                           │ path/to/stylesheet.css   │
├─────────────────────────────────┼──────────────────────────┤
│ Style Sheets                    │ 1                        │
├─────────────────────────────────┼──────────────────────────┤
│ Style Elements                  │ 0                        │
├─────────────────────────────────┼──────────────────────────┤
│ Size                            │ 240B                     │
├─────────────────────────────────┼──────────────────────────┤
│ Data URI Size                   │ 0                        │
├─────────────────────────────────┼──────────────────────────┤
│ Ratio of Data URI Size          │ 0.0%                     │
├─────────────────────────────────┼──────────────────────────┤
│ Gzipped Size                    │ 158B                     │
├─────────────────────────────────┼──────────────────────────┤
│ Rules                           │ 7                        │
├─────────────────────────────────┼──────────────────────────┤
│ Selectors                       │ 12                       │
├─────────────────────────────────┼──────────────────────────┤
│ Simplicity                      │ 58.3%                    │
├─────────────────────────────────┼──────────────────────────┤
│ Average of Identifier           │ 1.250                    │
├─────────────────────────────────┼──────────────────────────┤
│ Most Identifier                 │ 3                        │
├─────────────────────────────────┼──────────────────────────┤
│ Most Identifier Selector        │ .foo .bar .baz           │
├─────────────────────────────────┼──────────────────────────┤
│ Average of Cohesion             │ 1.429                    │
├─────────────────────────────────┼──────────────────────────┤
│ Lowest Cohesion                 │ 2                        │
├─────────────────────────────────┼──────────────────────────┤
│ Lowest Cohesion Selector        │ .foo                     │
├─────────────────────────────────┼──────────────────────────┤
│ Total Unique Font Sizes         │ 2                        │
├─────────────────────────────────┼──────────────────────────┤
│ Unique Font Sizes               │ 12px                     │
│                                 │ 16px                     │
├─────────────────────────────────┼──────────────────────────┤
│ Total Unique Font Families      │ 0                        │
├─────────────────────────────────┼──────────────────────────┤
│ Unique Font Families            │ N/A                      │
├─────────────────────────────────┼──────────────────────────┤
│ Total Unique Colors             │ 3                        │
├─────────────────────────────────┼──────────────────────────┤
│ Unique Colors                   │ #333333                  │
│                                 │ #CCCCCC                  │
│                                 │ RED                      │
├─────────────────────────────────┼──────────────────────────┤
│ Total Unique Background Images  │ 0                        │
├─────────────────────────────────┼──────────────────────────┤
│ Unique Background Images        │ N/A                      │
├─────────────────────────────────┼──────────────────────────┤
│ ID Selectors                    │ 1                        │
├─────────────────────────────────┼──────────────────────────┤
│ Universal Selectors             │ 1                        │
├─────────────────────────────────┼──────────────────────────┤
│ Unqualified Attribute Selectors │ 1                        │
├─────────────────────────────────┼──────────────────────────┤
│ JavaScript Specific Selectors   │ 0                        │
├─────────────────────────────────┼──────────────────────────┤
│ Important Keywords              │ 1                        │
├─────────────────────────────────┼──────────────────────────┤
│ Float Properties                │ 1                        │
├─────────────────────────────────┼──────────────────────────┤
│ Properties Count                │ color: 4                 │
│                                 │ font-size: 3             │
│                                 │ margin: 2                │
│                                 │ float: 1                 │
├─────────────────────────────────┼──────────────────────────┤
│ Media Queries                   │ 0                        │
└─────────────────────────────────┴──────────────────────────┘

Specified css file will be analyzed.

# Providing multiple input is also supported.
$ stylestats foo.css bar.css baz.css

CSS files in specified directory will be analyzed.

$ stylestats path/to/dir

Glob input is supported (quotes are required).

$ stylestats 'path/**/*.css'

You can specify a remote CSS file.

$ stylestats http://t32k.me/wisteria/css/wisteria.css

If you specify an HTML page, StyleStats will analyze stylesheets and style elements.

$ stylestats http://t32k.me/

--format option outputs JSON, HTML, Markdown and CSV.

$ stylestats foo.css -f <json|html|md|csv>

If you have gist installed, you can upload StyleStats data to GitHub Gist with a one-liner command.

$ stylestats http://t32k.me/ -f md > stats.md && gist stats.md
https://gist.github.com/9725673

Other tools

Metrics

Simplicity

The Simplicity is measured as Rules divided by Selectors.

Average of Identifier

The Average of Identifier is measured as Total Identifiers divided by Selectors.

Average of Cohesion

The Average of Cohesion is measured as Total declarations divided by Rules.

Lowest Cohesion

The Lowest Cohesion metric is the number of selector declarations.

Unqualified Attribute Selectors

The Unqualified Attribute Selectors metrics is the number of unqualified attribute selectors.

The following patterns will be counted:

[type=text] {
    color: red;
}

.selected [type=text] {
    color: red;
}

The following patterns are considered to be okay and will not be counted:

/* unqualified attribute selector is not key */
.selected [type=text] a {
    color: red;
}

JavaScript Specific Selectors

The JavaScript Specific Selectors metrics is the number of JavaScript-specific selectors, such as js-*. The selectors are only for JavaScript hooks; you should not to hang any presentation off them.

User Specified Selectors

The User Specified Selectors metrics is the number of user-specified selectors. Default is false. For instance, you can count the number of components if you specify "\\.component\\-" using reqular expression in .stylestatsrc .

Properties Count

The Properties Count is the number of property declarations. The default is to display the top 10 properties.

Configuration

You can configure StyleStats.

CLI:

$ stylestats -c path/to/.stylestatsrc

API:

var StyleStats = require('stylestats');
var stats = new StyleStats('path/to/stylesheet.css', 'path/to/.stylestatsrc');

Default configuration is here.

Here is an example JSON to disable display gzipped size:

{
  "gzippedSize": false
}

CLI Reference

Help:

$ stylestats --help

  Usage: stylestats [options] <file ...>

  Options:

    -h, --help             output usage information
    -V, --version          output the version number
    -c, --config <path>    set configurations
    -f, --format <format>  set the output format <json|html|md|csv>
    -t, --template <path>  set the template path for output format
    -s, --specs <path>     run test with your test specs file
    -n, --number           show only numeral metrics
    -m, --mobile           set the mobile user agent

Example:

$ stylestats path/to/stylesheet.css -c .stylestatsrc
 StyleStats!
┌────────────────────────────┬────────┐
│ Style Sheets               │ 1      │
├────────────────────────────┼────────┤
│ Size                       │ 19.0KB │
├────────────────────────────┼────────┤
│ Gzipped Size               │ 3.7KB  │
├────────────────────────────┼────────┤
│ Total Unique Font Families │ 3      │
└────────────────────────────┴────────┘

Integration

API Reference

`new StyleStats(stylesheet, config)`

stylesheet Required String|Array Stylesheet file path or its array.
config Optional String|Object Configuration JSON file path or object.

`StyleStats.parse(fn)`

var StyleStats = require('stylestats');
var stats = new StyleStats('path/to/stylesheet.css');

stats.parse(function (error, result) {
  console.log(JSON.stringify(result, null, 2));
});

Example

CSS example:

* { float: left; }
body { color: #333; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
a[src] { color: red !important; }
.foo { color: #ccc; font-size: 12px; }
.foo .bar .baz { color: #ccc; font-size: 12px; }
#bar { margin: 10px; font-size: 16px; }

Statistics tree of above css:

{
  "published": "2016-06-14T10:24:30.124Z",
  "paths": [ "test/fixture/example.css" ],
  "stylesheets": 1,
  "styleElements": 0,
  "size": 240,
  "dataUriSize": 0,
  "ratioOfDataUriSize": 0,
  "gzippedSize": 158,
  "rules": 7,
  "selectors": 12,
  "simplicity": 0.5833333333333334,
  "averageOfIdentifier": 1.25,
  "mostIdentifier": 3,
  "mostIdentifierSelector": ".foo .bar .baz",
  "averageOfCohesion": 1.4285714285714286,
  "lowestCohesion": 2,
  "lowestCohesionSelector": [ ".foo" ],
  "totalUniqueFontSizes": 2,
  "uniqueFontSizes": [ "12px", "16px" ],
  "totalUniqueFontFamilies": 0,
  "uniqueFontFamilies": [],
  "totalUniqueColors": 3,
  "uniqueColors": [ "#333333", "#CCCCCC", "RED" ],
  "totalUniqueBackgroundImages": 0,
  "uniqueBackgroundImages": [],
  "idSelectors": 1,
  "universalSelectors": 1,
  "unqualifiedAttributeSelectors": 1,
  "javascriptSpecificSelectors": 0,
  "importantKeywords": 1,
  "floatProperties": 1,
  "propertiesCount": [
    { "property": "color", "count": 4 },
    { "property": "font-size", "count": 3 },
    { "property": "margin", "count": 2 },
    { "property": "float", "count": 1 }
  ],
  "mediaQueries": 0
}

License

Code is released under the MIT license.

Failed to load latest commit information.
assets	Add background-image metrics	Jan 17, 2016
bin	remove underscore	Sep 23, 2015
lib	Accept gzipped stylesheets	Feb 8, 2016
test	Fix tests	Jan 17, 2016
.editorconfig	Bump up v6.0.1	Jan 7, 2016
.gitignore	Bump up v6.0.1	Jan 7, 2016
.jshintrc	Bump up v6.0.1	Jan 7, 2016
.travis.yml	disable npm update, test only with stable version	Feb 3, 2016
LICENSE	Delete preprocessor parts	Jan 10, 2016
Makefile	Bump up v6.0.1	Jan 7, 2016
README.md	Bump up v6.2.0	Jan 18, 2016
package.json	Accept gzipped stylesheets	Feb 8, 2016
testem.json	fix testem command	Feb 19, 2015

t32k/stylestats

README.md