CSS 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;
}
`)More examples output can be found in the fixtures folder and looks roughly like this:
{
"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,
"median": 1,
"range": 0,
"sum": 2,
"items": [
1,
1
]
},
"declarations": {
"min": 1,
"max": 2,
"mean": 1.5,
"mode": 1.5,
"median": 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
],
"median": [
0,
1,
0.5
],
"items": [
[
0,
0,
1
],
[
0,
2,
0
]
]
},
"complexity": {
"min": 1,
"max": 3,
"mean": 2,
"mode": 2,
"median": 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
- CSS Diff Github Action - A GitHub action that comments on your PR to tell you how your code quality has changed