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 !important
s, unique colors, and so on.
npm install --save @projectwallace/css-analyzer
or
yarn add @projectwallace/css-analyzer
const analyze = require('css-analyzer');
analyze('foo {}')
.then(result => console.log(result))
.catch(err => console.error(err))
}
//=>
// {
// atrules: {
// charsets: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// documents: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// fontfaces: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// imports: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// keyframes: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// mediaqueries: {
// total: 0,
// totalUnique: 0,
// unique: [],
// browserhacks: {
// total: 0,
// unique: [],
// totalUnique: 0
// }
// },
// namespaces: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// pages: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// supports: {
// total: 0,
// totalUnique: 0,
// unique: [],
// browserhacks: {
// total: 0,
// unique: [],
// totalUnique: 0
// }
// }
// },
// declarations: {
// importants: {
// share: 0,
// total: 0
// },
// total: 0,
// totalUnique: 0
// },
// properties: {
// prefixed: {
// share: 0,
// total: 0,
// totalUnique: 0,
// unique: []
// },
// total: 0,
// totalUnique: 0,
// unique: [],
// browserhacks: {
// total: 0,
// unique: [],
// totalUnique: 0
// }
// },
// rules: {
// total: 1,
// empty: {
// total: 1
// }
// },
// selectors: {
// accessibility: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// id: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// identifiers: {
// average: 1,
// top: [
// {
// identifiers: 1,
// selector: 'foo'
// }
// ]
// },
// js: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// specificity: {
// top: [
// {
// selector: 'foo',
// specificity: {
// a: 0,
// b: 0,
// c: 0,
// d: 1
// }
// }
// ]
// },
// total: 1,
// totalUnique: 1,
// universal: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// browserhacks: {
// total: 0,
// unique: [],
// totalUnique: 0
// }
// },
// stylesheets: {
// cohesion: {
// average: 0
// },
// simplicity: 1,
// size: 5,
// browserhacks: {
// total: 0,
// totalUnique: 0
// }
// },
// values: {
// colors: {
// total: 0,
// totalUnique: 0,
// unique: [],
// duplicates: []
// },
// fontfamilies: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// fontsizes: {
// total: 0,
// totalUnique: 0,
// unique: []
// },
// prefixed: {
// share: 0,
// total: 0,
// totalUnique: 0,
// unique: []
// },
// browserhacks: {
// total: 0,
// unique: [],
// totalUnique: 0
// },
// total: 0
// }
// }
- Wallace - CLI tool for @projectwallace/css-analyzer
- CSS Analyzer Diff - Calculates the diff between two sets of CSS analysis
- Gromit - A test framework to assert that CSS doesn't exceeds certain thresholds
- Color Sorter - Sort CSS colors by hue, saturation, lightness and opacity