Home

Awesome

CSS Analyzer

<div align="center"> <img src="logo.svg" height="160" width="160" alt="Analyzer logo"> </div> <div align="center"> <a href="https://npmjs.org/package/@projectwallace/css-analyzer"> <img src="https://badgen.net/npm/v/@projectwallace/css-analyzer" alt="version" /> </a> <a href="https://npmjs.org/package/@projectwallace/css-analyzer"> <img src="https://badgen.now.sh/npm/dm/@projectwallace/css-analyzer" alt="downloads" /> </a> <a href="https://packagephobia.com/result?p=%40projectwallace%2Fcss-analyzer"> <img src="https://packagephobia.com/badge?p=%40projectwallace%2Fcss-analyzer" alt="install size" /> </a> </div> <div align="center"> A <b>CSS analyzer</b> that goes through your CSS to find all kinds of relevant statistics. </div>

Features

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;
	}
`);
<details> <summary>More examples output can be found in <a href="src/__fixtures__">the fixtures folder</a> and looks roughly like this:</summary>
{
  "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
  }
}
</details>

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