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