CSS Analyzer

A CSS analyzer that goes through your CSS to find all kinds of relevant statistics.

Features

• Extremely detailed (150+ metrics)
• Super fast
• Supports both NodeJS and browsers

Install

npm install @projectwallace/css-analyzer

Usage

Analyzing CSS

import { 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,
      "range": 0,
      "sum": 2,
      "items": [1, 1]
    },
    "declarations": {
      "min": 1,
      "max": 2,
      "mean": 1.5,
      "mode": 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],
      "items": [
        [0, 0, 1],
        [0, 2, 0]
      ]
    },
    "complexity": {
      "min": 1,
      "max": 3,
      "mean": 2,
      "mode": 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
  }
}

Comparing specificity

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

Related projects

• 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