5.14.0 • Published 2 months ago
@projectwallace/css-analyzer v5.14.0
CSS Analyzer
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;
}
`)
{
"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: true
Related 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
5.14.0
2 months ago
5.13.2
4 months ago
5.13.1
4 months ago
5.13.0
4 months ago
5.13.4
4 months ago
5.13.3
4 months ago
5.11.0
9 months ago
5.11.0-alpha.2
9 months ago
5.11.0-alpha.3
9 months ago
5.12.2
6 months ago
5.12.1
6 months ago
5.12.0
8 months ago
5.11.0-alpha.1
1 year ago
5.10.1
11 months ago
5.10.0
1 year ago
5.9.0
1 year ago
5.8.0
1 year ago
5.7.3
1 year ago
5.7.2
1 year ago
5.7.1
1 year ago
5.7.0
1 year ago
5.6.0
2 years ago
5.5.0
2 years ago
5.4.0
2 years ago
5.3.0
2 years ago
5.2.1
2 years ago
5.1.1
2 years ago
5.0.2
2 years ago
5.1.0
2 years ago
5.0.1
2 years ago
5.0.0
2 years ago
5.0.0-alpha.2
2 years ago
5.0.0-alpha.1
2 years ago
4.0.3
3 years ago
4.0.2
3 years ago
4.0.1
3 years ago
4.0.0
3 years ago
2.7.1
4 years ago
2.6.0
5 years ago
2.5.1
5 years ago
2.5.0
5 years ago
2.4.0
5 years ago
2.3.0
5 years ago
2.2.2
5 years ago
2.2.1
5 years ago
2.2.0
5 years ago
2.2.0-0
5 years ago
2.1.1
5 years ago
2.1.0
5 years ago
2.0.0
5 years ago
2.0.0-0
5 years ago
1.8.0
5 years ago
1.7.0
5 years ago
1.6.0
5 years ago
1.5.2
5 years ago
1.5.1
6 years ago
1.5.0
6 years ago
1.4.1
6 years ago
1.4.0
6 years ago
1.3.1
6 years ago
1.3.0
6 years ago
1.2.0
6 years ago
1.1.0
6 years ago
1.0.0
6 years ago