[Unmainted] postcss-stylestats

No longer actively maintaining this project due to lack of motivation. This project and source code keep on GitHub and on npm, but no longer maintaining in my side.

PostCSS plugin for StyleStats.

Examples

input (input.css)

div {
    width: 300px;
    height: 300px;
    margin: 10px;
    padding: 10px;
    background-color: #003760;
    color: #fff;
    text-align: center;
}

output (CSS statistics data for StyleStats)

┌─────────────────────────────────┬───────────────────────────┐
│ Published                       │ December 30, 2016 2:36 PM │
├─────────────────────────────────┼───────────────────────────┤
│ Paths                           │ N/A                       │
├─────────────────────────────────┼───────────────────────────┤
│ Style Sheets                    │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Style Elements                  │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Size                            │ 154B                      │
├─────────────────────────────────┼───────────────────────────┤
│ Data URI Size                   │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Ratio of Data URI Size          │ 0.0%                      │
├─────────────────────────────────┼───────────────────────────┤
│ Gzipped Size                    │ 126B                      │
├─────────────────────────────────┼───────────────────────────┤
│ Rules                           │ 1                         │
├─────────────────────────────────┼───────────────────────────┤
│ Selectors                       │ 1                         │
├─────────────────────────────────┼───────────────────────────┤
│ Declarations                    │ 7                         │
├─────────────────────────────────┼───────────────────────────┤
│ Simplicity                      │ 100.0%                    │
├─────────────────────────────────┼───────────────────────────┤
│ Average of Identifier           │ 1.000                     │
├─────────────────────────────────┼───────────────────────────┤
│ Most Identifier                 │ 1                         │
├─────────────────────────────────┼───────────────────────────┤
│ Most Identifier Selector        │ div                       │
├─────────────────────────────────┼───────────────────────────┤
│ Average of Cohesion             │ 7.000                     │
├─────────────────────────────────┼───────────────────────────┤
│ Lowest Cohesion                 │ 7                         │
├─────────────────────────────────┼───────────────────────────┤
│ Lowest Cohesion Selector        │ div                       │
├─────────────────────────────────┼───────────────────────────┤
│ Total Unique Font Sizes         │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Unique Font Sizes               │ N/A                       │
├─────────────────────────────────┼───────────────────────────┤
│ Total Unique Font Families      │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Unique Font Families            │ N/A                       │
├─────────────────────────────────┼───────────────────────────┤
│ Total Unique Colors             │ 1                         │
├─────────────────────────────────┼───────────────────────────┤
│ Unique Colors                   │ #FFFFFF                   │
├─────────────────────────────────┼───────────────────────────┤
│ Total Unique Background Images  │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Unique Background Images        │ N/A                       │
├─────────────────────────────────┼───────────────────────────┤
│ ID Selectors                    │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Universal Selectors             │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Unqualified Attribute Selectors │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ JavaScript Specific Selectors   │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Important Keywords              │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Float Properties                │ 0                         │
├─────────────────────────────────┼───────────────────────────┤
│ Properties Count                │ width: 1                  │
│                                 │ height: 1                 │
│                                 │ margin: 1                 │
│                                 │ padding: 1                │
│                                 │ background-color: 1       │
│                                 │ color: 1                  │
│                                 │ text-align: 1             │
├─────────────────────────────────┼───────────────────────────┤
│ Media Queries                   │ 0                         │
└─────────────────────────────────┴───────────────────────────┘

Install

npm install --save-dev postcss-stylestats

Usage

const fs = require('fs');
const stylestats = require('postcss-stylestats');

const css = fs.readFileSync('input.css', 'utf-8');

postcss([stylestats])
    .process(css)
    .then((result) => {
        if (result.messages[0].stats) {
            console.log(result.messages[0].stats);
        }
    });

Option

type

Output format specify. Default is table. Option specify example.

Can spefify format to json, html and md.

Contributions

We welcome your pull requests.

1. Fork the repo and create your branch from master.
2. Create your feature branch: git checkout -b foo-bar.
3. Commit your changes: git commit -am 'Add awesome feature'.
4. Push to the branch: git push origin foo-bar.
5. Ensure the test suite passes.
6. Submit Pull Request!