Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
css-analyzer
Analyze your CSS
A module that goes through your CSS to find all kinds of relevant statistics,
like the amount of rules, the amount of !importants, unique colors, and so on.
Install
npm install @projectwallace/css-analyzeror
yarn add @projectwallace/css-analyzerUsage
const analyze = require('@projectwallace/css-analyzer');
analyze(`
p {
color: blue;
font-size: 100%;
}
.component[data-state="loading"] {
background-color: whitesmoke;
}
`)
.then(result => console.log(result))
.catch(error => console.error(error))
}{
"stylesheets.size.uncompressed.totalBytes": 115,
"stylesheets.size.compressed.gzip.totalBytes": 121,
"stylesheets.size.compressed.gzip.compressionRatio": -0.05217391304347818,
"stylesheets.simplicity": 1,
"stylesheets.cohesion.average": 1.5,
"stylesheets.cohesion.min.count": 2,
"stylesheets.cohesion.min.value.declarations": [
{
"property": "color",
"value": "blue",
"important": false
},
{
"property": "font-size",
"value": "100%",
"important": false
}
],
"stylesheets.cohesion.min.value.selectors": [
"p"
],
"stylesheets.browserhacks.total": 0,
"stylesheets.browserhacks.totalUnique": 0,
"stylesheets.linesOfCode.total": 10,
"stylesheets.linesOfCode.sourceLinesOfCode.total": 5,
"atrules.charsets.total": 0,
"atrules.charsets.unique": [],
"atrules.charsets.totalUnique": 0,
"atrules.documents.total": 0,
"atrules.documents.unique": [],
"atrules.documents.totalUnique": 0,
"atrules.fontfaces.total": 0,
"atrules.fontfaces.unique": [],
"atrules.fontfaces.totalUnique": 0,
"atrules.imports.total": 0,
"atrules.imports.unique": [],
"atrules.imports.totalUnique": 0,
"atrules.keyframes.total": 0,
"atrules.keyframes.unique": [],
"atrules.keyframes.totalUnique": 0,
"atrules.keyframes.prefixed.total": 0,
"atrules.keyframes.prefixed.unique": [],
"atrules.keyframes.prefixed.totalUnique": 0,
"atrules.keyframes.prefixed.share": 0,
"atrules.mediaqueries.total": 0,
"atrules.mediaqueries.unique": [],
"atrules.mediaqueries.totalUnique": 0,
"atrules.mediaqueries.browserhacks.total": 0,
"atrules.mediaqueries.browserhacks.unique": [],
"atrules.mediaqueries.browserhacks.totalUnique": 0,
"atrules.namespaces.total": 0,
"atrules.namespaces.unique": [],
"atrules.namespaces.totalUnique": 0,
"atrules.pages.total": 0,
"atrules.pages.unique": [],
"atrules.pages.totalUnique": 0,
"atrules.supports.total": 0,
"atrules.supports.unique": [],
"atrules.supports.totalUnique": 0,
"atrules.supports.browserhacks.total": 0,
"atrules.supports.browserhacks.unique": [],
"atrules.supports.browserhacks.totalUnique": 0,
"rules.total": 2,
"rules.empty.total": 0,
"rules.selectors.average": 1,
"rules.selectors.minimum.count": 1,
"rules.selectors.minimum.value": [
".component[data-state=\"loading\"]"
],
"rules.selectors.maximum.count": 1,
"rules.selectors.maximum.value": [
"p"
],
"selectors.total": 2,
"selectors.totalUnique": 2,
"selectors.js.total": 0,
"selectors.js.unique": [],
"selectors.js.totalUnique": 0,
"selectors.id.total": 0,
"selectors.id.unique": [],
"selectors.id.totalUnique": 0,
"selectors.universal.total": 0,
"selectors.universal.unique": [],
"selectors.universal.totalUnique": 0,
"selectors.accessibility.total": 0,
"selectors.accessibility.unique": [],
"selectors.accessibility.totalUnique": 0,
"selectors.specificity.top": [
{
"count": 1,
"value": ".component[data-state=\"loading\"]",
"specificity": {
"a": 0,
"b": 0,
"c": 2,
"d": 0
}
},
{
"count": 1,
"value": "p",
"specificity": {
"a": 0,
"b": 0,
"c": 0,
"d": 1
}
}
],
"selectors.specificity.max.value.a": 0,
"selectors.specificity.max.value.b": 0,
"selectors.specificity.max.value.c": 2,
"selectors.specificity.max.value.d": 0,
"selectors.specificity.max.count": 1,
"selectors.specificity.max.selectors": [
{
"count": 1,
"value": ".component[data-state=\"loading\"]",
"specificity": {
"a": 0,
"b": 0,
"c": 2,
"d": 0
}
}
],
"selectors.complexity.max.value": 3,
"selectors.complexity.max.selectors": [
{
"value": ".component[data-state=\"loading\"]",
"count": 1
}
],
"selectors.complexity.max.count": 1,
"selectors.complexity.average": 2,
"selectors.complexity.sum": 4,
"selectors.complexity.unique": [
{
"value": 1,
"count": 1
},
{
"value": 3,
"count": 1
}
],
"selectors.complexity.totalUnique": 2,
"selectors.browserhacks.total": 0,
"selectors.browserhacks.unique": [],
"selectors.browserhacks.totalUnique": 0,
"declarations.total": 3,
"declarations.totalUnique": 3,
"declarations.importants.total": 0,
"declarations.importants.share": 0,
"properties.total": 3,
"properties.unique": [
{
"value": "background-color",
"count": 1
},
{
"value": "color",
"count": 1
},
{
"value": "font-size",
"count": 1
}
],
"properties.totalUnique": 3,
"properties.prefixed.total": 0,
"properties.prefixed.unique": [],
"properties.prefixed.totalUnique": 0,
"properties.prefixed.share": 0,
"properties.browserhacks.total": 0,
"properties.browserhacks.unique": [],
"properties.browserhacks.totalUnique": 0,
"values.total": 3,
"values.prefixed.total": 0,
"values.prefixed.unique": [],
"values.prefixed.totalUnique": 0,
"values.prefixed.share": 0,
"values.fontsizes.total": 1,
"values.fontsizes.unique": [
{
"value": "100%",
"count": 1
}
],
"values.fontsizes.totalUnique": 1,
"values.fontfamilies.total": 0,
"values.fontfamilies.unique": [],
"values.fontfamilies.totalUnique": 0,
"values.colors.total": 2,
"values.colors.unique": [
{
"value": "blue",
"count": 1
},
{
"value": "whitesmoke",
"count": 1
}
],
"values.colors.totalUnique": 2,
"values.colors.duplicates.unique": [],
"values.colors.duplicates.totalUnique": 0,
"values.colors.duplicates.total": 0,
"values.browserhacks.total": 0,
"values.browserhacks.unique": [],
"values.browserhacks.totalUnique": 0,
"values.boxshadows.total": 0,
"values.boxshadows.unique": [],
"values.boxshadows.totalUnique": 0,
"values.textshadows.total": 0,
"values.textshadows.unique": [],
"values.textshadows.totalUnique": 0,
"values.zindexes.total": 0,
"values.zindexes.unique": [],
"values.zindexes.totalUnique": 0,
"values.animations.durations.total": 0,
"values.animations.durations.unique": [],
"values.animations.durations.totalUnique": 0,
"values.animations.timingFunctions.total": 0,
"values.animations.timingFunctions.unique": [],
"values.animations.timingFunctions.totalUnique": 0
}Related projects
- Wallace CLI - CLI tool for @projectwallace/css-analyzer
- Constyble - CSS Complexity linter
- Color Sorter - Sort CSS colors by hue, saturation, lightness and opacity
