npm package: @projectwallace/css-analyzer
Description: The best CSS analyzer out there. Check design tokens, complexity, specificity, performance and more.
Author: Bart Veneman
Latest version: 9.6.3

# 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

- Extremely **detailed** (150+ metrics)
- Super **[fast](/benchmark)**
- Supports both NodeJS and browsers

## Install

```sh
npm install @projectwallace/css-analyzer
```

## Usage

### Analyzing CSS

```js
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>

```json
{
	"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

```js
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](https://github.com/projectwallace/css-code-quality) -
  A Code Quality analyzer that tells you how maintainable, complex and performant your CSS is
- [Wallace CLI](https://github.com/projectwallace/wallace-cli) - CLI tool for
  @projectwallace/css-analyzer
- [Constyble](https://github.com/projectwallace/constyble) - CSS Complexity linter
- [Color Sorter](https://github.com/projectwallace/color-sorter) - Sort CSS colors
  by hue, saturation, lightness and opacity