StyleStats

StyleStats is a Node.js library to collect CSS statistics.

Installation

StyleStats works on Node.js 0.10.x

$ npm install -g stylestats

Usage

$ stylestats path/to/stylesheet.css
StyleStats!
┌─────────────────────────────────┬────────────────┐
│ Style Sheets                    │ 1              │
├─────────────────────────────────┼────────────────┤
│ Size                            │ 240B           │
├─────────────────────────────────┼────────────────┤
│ Data URI Size                   │ 0              │
├─────────────────────────────────┼────────────────┤
│ Rules                           │ 7              │
├─────────────────────────────────┼────────────────┤
│ Selectors                       │ 12             │
├─────────────────────────────────┼────────────────┤
│ Simplicity                      │ 58.3%          │
├─────────────────────────────────┼────────────────┤
│ Most Identifier                 │ 3              │
├─────────────────────────────────┼────────────────┤
│ Most Identifier Selector        │ .foo .bar .baz │
├─────────────────────────────────┼────────────────┤
│ Lowest Cohesion                 │ 2              │
├─────────────────────────────────┼────────────────┤
│ Lowest Cohesion Selector        │ .foo           │
├─────────────────────────────────┼────────────────┤
│ Total Unique Font Sizes         │ 2              │
├─────────────────────────────────┼────────────────┤
│ Unique Font Size                │ 12px           │
│                                 │ 16px           │
├─────────────────────────────────┼────────────────┤
│ Total Unique Font Families      │ 0              │
├─────────────────────────────────┼────────────────┤
│ Unique Font Family              │ N/A            │
├─────────────────────────────────┼────────────────┤
│ Total Unique Colors             │ 3              │
├─────────────────────────────────┼────────────────┤
│ Unique Color                    │ #333333        │
│                                 │ #CCCCCC        │
│                                 │ RED            │
├─────────────────────────────────┼────────────────┤
│ 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/static/blog/skelton.css

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

$ stylestats http://t32k.me/

-t option outputs JSON, CSV and HTML.

$ stylestats foo.css -t [json|csv|html]

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

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

Grunt & Gulp modules

Metrics

Simplicity

The Simplicity is measured as Rules divided by Selectors.

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.

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 enable display gzipped size:

{
  "gzippedSize": true
}

gzippedSize attribute is false by default because it is pretty slow.

CLI Reference

$ stylestats -h

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

  Options:

    -h, --help           output usage information
    -V, --version        output the version number
    -c, --config [path]  Path and name of the incoming JSON file.
    -t, --type [format]  Specify the output format. <json|html|csv>
    -s, --simple         Show compact style log.
    -g, --gzip           Show gzipped file size.
    -n, --number         Show only numeral metrics.
    -u, --ua [OS]        Specify the user agent. <ios|android>

$ stylestats path/to/stylesheet.css -s -c path/to/.stylestatsrc
StyleStats!
┌───────────────────────────┬───────────────┐
│ Rules                     │ 7             │
│ Selectors                 │ 11            │
│ Lowest Cohesion           │ 6             │
│ Total Unique Font Sizes   │ 5             │
│ Total Unique Colors       │ 2             │
│ ID Selectors              │ 1             │
│ Important Keywords        │ 1             │
│ Media Queries             │ 1             │
└───────────────────────────┴───────────────┘

Plot StyleStats data with Jenkins

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": "2014-03-23T15:54:39.825Z",
  "paths": [ "test/fixture/example.css" ],
  "stylesheets": 1,
  "size": 240,
  "dataUriSize": 0,
  "rules": 7,
  "selectors": 12,
  "simplicity": 0.5833333333333334,
  "mostIdentifers": 3,
  "mostIdentifersSelector": ".foo .bar .baz",
  "lowestCohesion": 2,
  "lowestCohesionSelector": [ ".foo" ],
  "totalUniqueFontSizes": 2,
  "uniqueFontSize": [ "12px", "16px" ],
  "totalUniqueFontFamilies": 0,
  "uniqueFontFamily": [],
  "totalUniqueColors": 3,
  "uniqueColor": [ "#333333", "#CCCCCC", "RED" ],
  "idSelectors": 1,
  "universalSelectors": 1,
  "unqualifiedAttributeSelectors": 1,
  "javascriptSpecificSelectors": 0,
  "importantKeywords": 1,
  "floatProperties": 1,
  "mediaQueries": 0,
  "propertiesCount": [
    { "property": "color", "count": 4 },
    { "property": "font-size", "count": 3 },
    { "property": "margin", "count": 2 },
    { "property": "float", "count": 1 }
  ]
}

Online Tool

We launched online tool for StyleStats!

StyleStats

Release History

v4.2.0: Add totalUniqueFontFamilies, uniqueFontFamily metics.
v4.1.0: Fix uniqueColor metrics. Update gzip-size module.
v4.0.0: API is changed: StyleStats.parse(). Improve CLI tool.
v3.2.0: Support request option, and add ClI options.
v3.1.0: Support compiled Less/Stylus files.
v3.0.0: API is changed: CLI option. Support parse HTML page.
v2.3.0: Support HTML output CLI option.
v2.2.0: Add dataUriSize, ratioOfDataUriSize metics.
v2.1.0: Add javascriptSpecificSelectors metics, and fix counting properties in mediaQueries.
v2.0.0: API is changed: StyleStats.parse(). Add metrics.
v1.2.0: Support multiple input files.
v1.1.0: Add universalSelectors metrics.
v1.0.0: Major release.

License

Code is released under the MIT license.

yajinn / stylestats Goto Github PK

stylestats's Introduction