A CSS analyzer that goes through your CSS to find all kinds of relevant statistics.
- Extremely detailed (150+ metrics)
- Super fast
- Supports both NodeJS and browsers
npm install @projectwallace/css-analyzerimport { 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 } }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- 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
