Awesome
CSS Analyzer
<div align="center">
<img src="logo.svg" height="160" width="160" alt="Analyzer logo">
</div>
<div align="center">
<a href="https://npmjs.org/package/@projectwallace/css-analyzer">
<img src="https://badgen.net/npm/v/@projectwallace/css-analyzer" alt="version" />
</a>
<a href="https://npmjs.org/package/@projectwallace/css-analyzer">
<img src="https://badgen.now.sh/npm/dm/@projectwallace/css-analyzer" alt="downloads" />
</a>
<a href="https://packagephobia.com/result?p=%40projectwallace%2Fcss-analyzer">
<img src="https://packagephobia.com/badge?p=%40projectwallace%2Fcss-analyzer" alt="install size" />
</a>
</div>
<div align="center">
A <b>CSS analyzer</b> that goes through your CSS to find all kinds of relevant statistics.
</div>
Features
- Extremely detailed (150+ metrics)
- Super fast
- Supports both NodeJS and browsers
Install
npm install @projectwallace/css-analyzer
Usage
Analyzing CSS
import { analyze } from "@projectwallace/css-analyzer";
const result = analyze(`
p {
color: blue;
font-size: 100%;
}
.component[data-state="loading"] {
background-color: whitesmoke;
}
`);
<details>
<summary>More examples output can be found in <a href="src/__fixtures__">the fixtures folder</a> and looks roughly like this:</summary>
{
"stylesheet": {
"sourceLinesOfCode": 5,
"linesOfCode": 8,
"size": 113,
"comments": {
"total": 0,
"size": 0
}
},
"atrules": {
"fontface": {
"total": 0,
"totalUnique": 0,
"unique": [],
"uniquenessRatio": 1
},
"import": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
},
"media": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
},
"charset": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
},
"supports": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
},
"keyframes": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0,
"prefixed": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0,
"ratio": null
}
},
"container": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
}
},
"rules": {
"total": 2,
"empty": {
"total": 0,
"ratio": 0
},
"selectors": {
"min": 1,
"max": 1,
"mean": 1,
"mode": 1,
"range": 0,
"sum": 2,
"items": [1, 1]
},
"declarations": {
"min": 1,
"max": 2,
"mean": 1.5,
"mode": 1.5,
"range": 1,
"sum": 3,
"items": [2, 1]
}
},
"selectors": {
"total": 2,
"totalUnique": 2,
"uniquenessRatio": 1,
"specificity": {
"sum": [0, 2, 1],
"min": [0, 0, 1],
"max": [0, 2, 0],
"mean": [0, 1, 0.5],
"mode": [0, 1, 0.5],
"items": [
[0, 0, 1],
[0, 2, 0]
]
},
"complexity": {
"min": 1,
"max": 3,
"mean": 2,
"mode": 2,
"range": 2,
"sum": 4,
"total": 2,
"totalUnique": 2,
"unique": {
"1": 1,
"3": 1
},
"uniquenessRatio": 1,
"items": [1, 3]
},
"id": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0,
"ratio": 0
},
"accessibility": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0,
"ratio": 0
},
"keyframes": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0,
"ratio": 0
}
},
"declarations": {
"total": 3,
"unique": {
"total": 3,
"ratio": 1
},
"importants": {
"total": 0,
"ratio": 0,
"inKeyframes": {
"total": 0,
"ratio": 0
}
}
},
"properties": {
"total": 3,
"totalUnique": 3,
"unique": {
"color": 1,
"font-size": 1,
"background-color": 1
},
"uniquenessRatio": 1,
"prefixed": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0,
"ratio": 0
},
"custom": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0,
"ratio": 0
},
"browserhacks": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0,
"ratio": 0
}
},
"values": {
"colors": {
"total": 2,
"totalUnique": 2,
"unique": {
"blue": 1,
"whitesmoke": 1
},
"uniquenessRatio": 1,
"itemsPerContext": {
"color": {
"total": 1,
"totalUnique": 1,
"unique": {
"blue": 1
},
"uniquenessRatio": 1
},
"background-color": {
"total": 1,
"totalUnique": 1,
"unique": {
"whitesmoke": 1
},
"uniquenessRatio": 1
}
}
},
"fontFamilies": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
},
"fontSizes": {
"total": 1,
"totalUnique": 1,
"unique": {
"100%": 1
},
"uniquenessRatio": 1
},
"zindexes": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
},
"textShadows": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
},
"boxShadows": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
},
"animations": {
"durations": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
},
"timingFunctions": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
}
},
"prefixes": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0
},
"units": {
"total": 0,
"totalUnique": 0,
"unique": {},
"uniquenessRatio": 0,
"itemsPerContext": {}
}
},
"__meta__": {
"parseTime": 4,
"analyzeTime": 5,
"total": 10
}
}
</details>
Comparing specificity
import { compareSpecificity } from "@projectwallace/css-analyzer";
const result = [
[0, 1, 1],
[2, 0, 0],
[0, 0, 1],
].sort((a, b) => compareSpecificity(a, b));
// => result:
// [
// [2,0,0],
// [0,1,1],
// [0,0,1],
// ]
const isSpecificityEqual = compareSpecificity([0, 1, 0], [0, 1, 0]) === 0;
// => isSpecificityEqual: true
Related projects