Package Exports

stylestats
stylestats/lib/defaultOptions

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stylestats) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

StyleStats

StyleStats is Node.js library collect css statistics.

Installation

Requires Node.js v0.10.x

$ npm install -g stylestats

Usage

$ stylestats path/to/stylesheet.css
StyleStats!
┌─────────────────────────────────┬────────────────┐
│ Stylesheets                     │ 1              │
├─────────────────────────────────┼────────────────┤
│ Size                            │ 240.0B         │
├─────────────────────────────────┼────────────────┤
│ Rules                           │ 7              │
├─────────────────────────────────┼────────────────┤
│ Selectors                       │ 12             │
├─────────────────────────────────┼────────────────┤
│ Simplicity                      │ 58.33%         │
├─────────────────────────────────┼────────────────┤
│ Most Identifers                 │ 3              │
├─────────────────────────────────┼────────────────┤
│ Most Identifers Selector        │ .foo .bar .baz │
├─────────────────────────────────┼────────────────┤
│ Lowest Cohesion                 │ 2              │
├─────────────────────────────────┼────────────────┤
│ Lowest Cohesion Selector        │ .foo           │
├─────────────────────────────────┼────────────────┤
│ Total Unique Font Sizes         │ 2              │
├─────────────────────────────────┼────────────────┤
│ Unique Font Size                │ 12px           │
│                                 │ 16px           │
├─────────────────────────────────┼────────────────┤
│ Total Unique Colors             │ 3              │
├─────────────────────────────────┼────────────────┤
│ Unique Color                    │ #333           │
│                                 │ #CCC           │
│                                 │ RED            │
├─────────────────────────────────┼────────────────┤
│ Id Selectors                    │ 1              │
├─────────────────────────────────┼────────────────┤
│ Universal Selectors             │ 1              │
├─────────────────────────────────┼────────────────┤
│ Unqualified Attribute Selectors │ 1              │
├─────────────────────────────────┼────────────────┤
│ Javascript Specific Selectors   │ 0              │
├─────────────────────────────────┼────────────────┤
│ Important Keywords              │ 1              │
├─────────────────────────────────┼────────────────┤
│ Float Properties                │ 1              │
├─────────────────────────────────┼────────────────┤
│ Media Queries                   │ 0              │
├─────────────────────────────────┼────────────────┤
│ Properties Count                │ color: 4       │
│                                 │ font-size: 3   │
│                                 │ margin: 2      │
│                                 │ float: 1       │
└─────────────────────────────────┴────────────────┘

StyleStats supports remote file analysis!!!

$ stylestats http://t32k.me/static/blog/skelton.css

StyleStats supports multiple input.

$ stylestats foo.css bar.css baz.css

-e option output JSON or CSV.

$ stylestats foo.css -e [json|csv]

Metrics

Simplicity

The Simplicity is measured as Rules divided by Selectors.

Lowest Cohesion

The Lowest Cohesion metrics is the number of selector declaration.

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 as 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 only for JavaScript hooks, you should not to hang any presentation off them.

Properties Count

The Properties Count is number of property declaration. Default option is set 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 of enabling 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.
    -e, --extension [format]  Specify the format to convert. <json|csv>
    -s, --simple              Show compact style's log.

$ 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 path's array.
config Optional String|Object Configuration's JSON file path or object.

`StyleStats.parse(fn)`

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

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

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

Above the stylesheet's stats tree:

{
  "stylesheets": 1,
  "size": 240,
  "rules": 7,
  "selectors": 12,
  "simplicity": 0.5833333333333334,
  "mostIdentifers": 3,
  "mostIdentifersSelector": ".foo .bar .baz",
  "lowestCohesion": 2,
  "lowestCohesionSelector": [ ".foo" ],
  "totalUniqueFontSizes": 2,
  "uniqueFontSize": [ "12px", "16px" ],
  "totalUniqueColors": 3,
  "uniqueColor": [ "#333", "#CCC", "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

(Coming soon)

Release History

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.