JSPM

  • Created
  • Published
  • Downloads 604
  • Score
    100M100P100Q113968F
  • License MIT

Stylestats is a efficient Node.js library for keeping stylesheet statistics.

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 a efficient Node.js library for keeping stylesheet statistics.

Build Status NPM version Dependency Status devDependency Status

Installation

$ npm install stylestats

Usage

$ stylestats path/to/stylesheet.css
StyleStats!
┌───────────────────────────┬───────────────┐
│ Size                      │ 498.0B        │
├───────────────────────────┼───────────────┤
│ Rules                     │ 8             │
├───────────────────────────┼───────────────┤
│ Selectors                 │ 11            │
├───────────────────────────┼───────────────┤
│ Simplicity                │ 72.73%        │
├───────────────────────────┼───────────────┤
│ Lowest Cohesion           │ 6             │
├───────────────────────────┼───────────────┤
│ Lowest Cohesion Selecotor │ hr            │
├───────────────────────────┼───────────────┤
│ Total Unique Font Sizes   │ 5             │
├───────────────────────────┼───────────────┤
│ Unique Font Size          │ 10px          │
│                           │ 12px          │
│                           │ 14px          │
│                           │ 16px          │
│                           │ 18px          │
├───────────────────────────┼───────────────┤
│ Total Unique Colors       │ 2             │
├───────────────────────────┼───────────────┤
│ Unique Color              │ #333          │
│                           │ #CCC          │
├───────────────────────────┼───────────────┤
│ Id Selectors              │ 1             │
├───────────────────────────┼───────────────┤
│ Important Keywords        │ 1             │
├───────────────────────────┼───────────────┤
│ Media Queries             │ 1             │
├───────────────────────────┼───────────────┤
│ Properties Count          │ font-size: 5  │
│                           │ margin: 4     │
│                           │ padding: 3    │
│                           │ color: 2      │
│                           │ display: 1    │
│                           │ height: 1     │
│                           │ border: 1     │
│                           │ border-top: 1 │
└───────────────────────────┴───────────────┘

Metrics

Simplicity

The Simplicity is measured as Rules divided by Selectors.

Lowest Cohesion

The Lowest Cohesion metric is the count of the declarations of the most declared selector.

Properties Count

The Properties Count is ranking of declared properties. Default option is display the top 10.

Configuration

You must configure Stylestats before use.

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 configuration's JSON example of enabling display gzipped size:

{
  "gzippedSize": true
}

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              Display compact log.
$ stylestats path/to/stylesheet.css -s -c path/to/.stylestatsrc
StyleStats!
┌───────────────────────────┬───────────────┐
│ Rules                     │ 8             │
│ Selectors                 │ 11            │
│ Lowest Cohesion           │ 6             │
│ Total Unique Font Sizes   │ 5             │
│ Total Unique Colors       │ 2             │
│ Id Selectors              │ 1             │
│ Important Keywords        │ 1             │
│ Media Queries             │ 1             │
└───────────────────────────┴───────────────┘

API Reference

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

console.log(JSON.stringify(stats.parse(), null, 2));

Example

This stylesheet's stats tree:

{
  "size": 498,
  "rules": 8,
  "selectors": 11,
  "simplicity": 0.7272727272727273,
  "lowestCohesion": 6,
  "lowestCohesionSelecotor": [ "hr" ],
  "totalUniqueFontSizes": 5,
  "uniqueFontSize": [ "10px","12px","14px","16px","18px" ],
  "totalUniqueColors": 2,
  "uniqueColor": [ "#333", "#CCC" ],
  "idSelectors": 1,
  "importantKeywords": 1,
  "mediaQueries": 1,
  "propertiesCount": [
    [ "font-size", 5], [ "margin", 4 ], [ "padding", 3 ], [ "color", 2 ], [ "display", 1 ], [ "height", 1 ], [ "border", 1 ], [ "border-top", 1 ]
  ]
}

Online Tool

(Coming soon)

License

Code released under the MIT license.