Skip to content

projectwallace/css-analyzer

Repository files navigation

css-analyzer Build Status Known Vulnerabilities Coverage Status Dependencies Status Dependencies Status XO code style

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 --save @projectwallace/css-analyzer

or

yarn add @projectwallace/css-analyzer

Usage

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
//   }
// }

Related projects

  • 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