Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

css-analyzer

NPM Version Node.js CI Coverage Status Dependencies Status Dependencies Status

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-analyzer

or

yarn add @projectwallace/css-analyzer

Usage

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