[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.
- Fork the repo and create your branch from master.
- Create your feature branch:
git checkout -b foo-bar. - Commit your changes:
git commit -am 'Add awesome feature'. - Push to the branch:
git push origin foo-bar. - Ensure the test suite passes.
- Submit Pull Request!