projectwallaceCSS Analyzer
A CSS analyzer that goes through your CSS to find all kinds of relevant statistics.
Features
- Extremely detailed (150+ metrics)
- Super fast
- Supports both NodeJS and browsers
Install
npm install @projectwallace/css-analyzerUsage
Analyzing CSS
import { analyze } from "@projectwallace/css-analyzer";
const result = analyze(`
p {
color: blue;
font-size: 100%;
}
.component[data-state="loading"] {
background-color: whitesmoke;
}
`);
<summary>More examples output can be found in the fixtures folder and looks roughly like this:</summary>
json
{
"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
}
}
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: trueRelated projects
- CSS Code Quality Analyzer - A Code Quality analyzer that tells you how maintainable, complex and performant your CSS is
- Wallace CLI - CLI tool for @projectwallace/css-analyzer
- Constyble - CSS Complexity linter
- Color Sorter - Sort CSS colors by hue, saturation, lightness and opacity