{"id":13397824,"url":"https://github.com/projectwallace/css-analyzer","last_synced_at":"2026-02-27T22:17:39.158Z","repository":{"id":22450182,"uuid":"91230164","full_name":"projectwallace/css-analyzer","owner":"projectwallace","description":"Analytics for CSS","archived":false,"fork":false,"pushed_at":"2024-03-16T10:50:35.000Z","size":11567,"stargazers_count":302,"open_issues_count":30,"forks_count":14,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-14T08:31:41.735Z","etag":null,"topics":["analyzer","audit","complexity","css","css-analyzer","cssstats","projectwallace","statistics","stats","wallace"],"latest_commit_sha":null,"homepage":"https://www.projectwallace.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/projectwallace.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/funding.yml","license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["bartveneman"],"patreon":"bartveneman","open_collective":"projectwallace","custom":["https://www.projectwallace.com/sponsor","https://www.paypal.me/bartveneman"]}},"created_at":"2017-05-14T08:31:39.000Z","updated_at":"2024-06-08T22:20:10.326Z","dependencies_parsed_at":"2023-09-24T06:32:17.988Z","dependency_job_id":"83a40258-d058-482e-9b19-db8e966f9de7","html_url":"https://github.com/projectwallace/css-analyzer","commit_stats":{"total_commits":339,"total_committers":5,"mean_commits":67.8,"dds":"0.34513274336283184","last_synced_commit":"7ba9ee7cdb643e6bb99f965deeb1403902adb84d"},"previous_names":[],"tags_count":68,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fcss-analyzer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fcss-analyzer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fcss-analyzer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fcss-analyzer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/projectwallace","download_url":"https://codeload.github.com/projectwallace/css-analyzer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247155565,"owners_count":20893065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analyzer","audit","complexity","css","css-analyzer","cssstats","projectwallace","statistics","stats","wallace"],"created_at":"2024-07-30T18:01:47.352Z","updated_at":"2026-02-27T22:17:39.107Z","avatar_url":"https://github.com/projectwallace.png","language":"CSS","readme":"# CSS Analyzer\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"logo.svg\" height=\"160\" width=\"160\" alt=\"Analyzer logo\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.org/package/@projectwallace/css-analyzer\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/v/@projectwallace/css-analyzer\" alt=\"version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/@projectwallace/css-analyzer\"\u003e\n    \u003cimg src=\"https://badgen.now.sh/npm/dm/@projectwallace/css-analyzer\" alt=\"downloads\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://packagephobia.com/result?p=%40projectwallace%2Fcss-analyzer\"\u003e\n    \u003cimg src=\"https://packagephobia.com/badge?p=%40projectwallace%2Fcss-analyzer\" alt=\"install size\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\nA \u003cb\u003eCSS analyzer\u003c/b\u003e that goes through your CSS to find all kinds of relevant statistics.\n\u003c/div\u003e\n\n## Features\n\n- Extremely **detailed** (150+ metrics)\n- Super **[fast](/benchmark)**\n- Supports both NodeJS and browsers\n\n## Install\n\n```sh\nnpm install @projectwallace/css-analyzer\n```\n\n## Usage\n\n### Analyzing CSS\n\n```js\nimport { analyze } from \"@projectwallace/css-analyzer\";\n\nconst result = analyze(`\n\tp {\n\t\tcolor: blue;\n\t\tfont-size: 100%;\n\t}\n\n\t.component[data-state=\"loading\"] {\n\t\tbackground-color: whitesmoke;\n\t}\n`);\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eMore examples output can be found in \u003ca href=\"src/__fixtures__\"\u003ethe fixtures folder\u003c/a\u003e and looks roughly like this:\u003c/summary\u003e\n\n```json\n{\n  \"stylesheet\": {\n    \"sourceLinesOfCode\": 5,\n    \"linesOfCode\": 8,\n    \"size\": 113,\n    \"comments\": {\n      \"total\": 0,\n      \"size\": 0\n    }\n  },\n  \"atrules\": {\n    \"fontface\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": [],\n      \"uniquenessRatio\": 1\n    },\n    \"import\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0\n    },\n    \"media\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0\n    },\n    \"charset\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0\n    },\n    \"supports\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0\n    },\n    \"keyframes\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0,\n      \"prefixed\": {\n        \"total\": 0,\n        \"totalUnique\": 0,\n        \"unique\": {},\n        \"uniquenessRatio\": 0,\n        \"ratio\": null\n      }\n    },\n    \"container\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0\n    }\n  },\n  \"rules\": {\n    \"total\": 2,\n    \"empty\": {\n      \"total\": 0,\n      \"ratio\": 0\n    },\n    \"selectors\": {\n      \"min\": 1,\n      \"max\": 1,\n      \"mean\": 1,\n      \"mode\": 1,\n      \"range\": 0,\n      \"sum\": 2,\n      \"items\": [1, 1]\n    },\n    \"declarations\": {\n      \"min\": 1,\n      \"max\": 2,\n      \"mean\": 1.5,\n      \"mode\": 1.5,\n      \"range\": 1,\n      \"sum\": 3,\n      \"items\": [2, 1]\n    }\n  },\n  \"selectors\": {\n    \"total\": 2,\n    \"totalUnique\": 2,\n    \"uniquenessRatio\": 1,\n    \"specificity\": {\n      \"sum\": [0, 2, 1],\n      \"min\": [0, 0, 1],\n      \"max\": [0, 2, 0],\n      \"mean\": [0, 1, 0.5],\n      \"mode\": [0, 1, 0.5],\n      \"items\": [\n        [0, 0, 1],\n        [0, 2, 0]\n      ]\n    },\n    \"complexity\": {\n      \"min\": 1,\n      \"max\": 3,\n      \"mean\": 2,\n      \"mode\": 2,\n      \"range\": 2,\n      \"sum\": 4,\n      \"total\": 2,\n      \"totalUnique\": 2,\n      \"unique\": {\n        \"1\": 1,\n        \"3\": 1\n      },\n      \"uniquenessRatio\": 1,\n      \"items\": [1, 3]\n    },\n    \"id\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0,\n      \"ratio\": 0\n    },\n    \"accessibility\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0,\n      \"ratio\": 0\n    },\n    \"keyframes\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0,\n      \"ratio\": 0\n    }\n  },\n  \"declarations\": {\n    \"total\": 3,\n    \"unique\": {\n      \"total\": 3,\n      \"ratio\": 1\n    },\n    \"importants\": {\n      \"total\": 0,\n      \"ratio\": 0,\n      \"inKeyframes\": {\n        \"total\": 0,\n        \"ratio\": 0\n      }\n    }\n  },\n  \"properties\": {\n    \"total\": 3,\n    \"totalUnique\": 3,\n    \"unique\": {\n      \"color\": 1,\n      \"font-size\": 1,\n      \"background-color\": 1\n    },\n    \"uniquenessRatio\": 1,\n    \"prefixed\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0,\n      \"ratio\": 0\n    },\n    \"custom\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0,\n      \"ratio\": 0\n    },\n    \"browserhacks\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0,\n      \"ratio\": 0\n    }\n  },\n  \"values\": {\n    \"colors\": {\n      \"total\": 2,\n      \"totalUnique\": 2,\n      \"unique\": {\n        \"blue\": 1,\n        \"whitesmoke\": 1\n      },\n      \"uniquenessRatio\": 1,\n      \"itemsPerContext\": {\n        \"color\": {\n          \"total\": 1,\n          \"totalUnique\": 1,\n          \"unique\": {\n            \"blue\": 1\n          },\n          \"uniquenessRatio\": 1\n        },\n        \"background-color\": {\n          \"total\": 1,\n          \"totalUnique\": 1,\n          \"unique\": {\n            \"whitesmoke\": 1\n          },\n          \"uniquenessRatio\": 1\n        }\n      }\n    },\n    \"fontFamilies\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0\n    },\n    \"fontSizes\": {\n      \"total\": 1,\n      \"totalUnique\": 1,\n      \"unique\": {\n        \"100%\": 1\n      },\n      \"uniquenessRatio\": 1\n    },\n    \"zindexes\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0\n    },\n    \"textShadows\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0\n    },\n    \"boxShadows\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0\n    },\n    \"animations\": {\n      \"durations\": {\n        \"total\": 0,\n        \"totalUnique\": 0,\n        \"unique\": {},\n        \"uniquenessRatio\": 0\n      },\n      \"timingFunctions\": {\n        \"total\": 0,\n        \"totalUnique\": 0,\n        \"unique\": {},\n        \"uniquenessRatio\": 0\n      }\n    },\n    \"prefixes\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0\n    },\n    \"units\": {\n      \"total\": 0,\n      \"totalUnique\": 0,\n      \"unique\": {},\n      \"uniquenessRatio\": 0,\n      \"itemsPerContext\": {}\n    }\n  },\n  \"__meta__\": {\n    \"parseTime\": 4,\n    \"analyzeTime\": 5,\n    \"total\": 10\n  }\n}\n```\n\n\u003c/details\u003e\n\n### Comparing specificity\n\n```js\nimport { compareSpecificity } from \"@projectwallace/css-analyzer\";\n\nconst result = [\n  [0, 1, 1],\n  [2, 0, 0],\n  [0, 0, 1],\n].sort((a, b) =\u003e compareSpecificity(a, b));\n\n// =\u003e result:\n// [\n//   [2,0,0],\n//   [0,1,1],\n//   [0,0,1],\n// ]\n\nconst isSpecificityEqual = compareSpecificity([0, 1, 0], [0, 1, 0]) === 0;\n// =\u003e isSpecificityEqual: true\n```\n\n## Related projects\n\n- [CSS Code Quality Analyzer](https://github.com/projectwallace/css-code-quality) -\n  A Code Quality analyzer that tells you how maintainable, complex and performant your CSS is\n- [Wallace CLI](https://github.com/projectwallace/wallace-cli) - CLI tool for\n  @projectwallace/css-analyzer\n- [Constyble](https://github.com/projectwallace/constyble) - CSS Complexity linter\n- [Color Sorter](https://github.com/projectwallace/color-sorter) - Sort CSS colors\n  by hue, saturation, lightness and opacity\n","funding_links":["https://github.com/sponsors/bartveneman","https://patreon.com/bartveneman","https://opencollective.com/projectwallace","https://www.projectwallace.com/sponsor","https://www.paypal.me/bartveneman"],"categories":["JavaScript","CSS","TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectwallace%2Fcss-analyzer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprojectwallace%2Fcss-analyzer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectwallace%2Fcss-analyzer/lists"}