{"id":13565690,"url":"https://github.com/projectwallace/css-code-quality","last_synced_at":"2026-04-05T22:12:53.674Z","repository":{"id":39675397,"uuid":"443868854","full_name":"projectwallace/css-code-quality","owner":"projectwallace","description":"Calculate the Code Quality score of your CSS based on a range of different quality guards.","archived":false,"fork":false,"pushed_at":"2026-04-01T08:27:24.000Z","size":467,"stargazers_count":150,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-01T09:25:54.932Z","etag":null,"topics":["code-quality","css","wallace"],"latest_commit_sha":null,"homepage":"https://www.projectwallace.com/css-code-quality","language":"TypeScript","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":null,"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,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-01-02T21:00:12.000Z","updated_at":"2026-04-01T08:27:27.000Z","dependencies_parsed_at":"2023-12-19T01:52:32.402Z","dependency_job_id":"4a646c8a-5486-410e-86ea-c2b651bd52ed","html_url":"https://github.com/projectwallace/css-code-quality","commit_stats":{"total_commits":39,"total_committers":2,"mean_commits":19.5,"dds":0.1282051282051282,"last_synced_commit":"d1fd649e3e6d1009ba9e57afc02deee712873ce1"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/projectwallace/css-code-quality","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fcss-code-quality","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fcss-code-quality/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fcss-code-quality/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fcss-code-quality/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/projectwallace","download_url":"https://codeload.github.com/projectwallace/css-code-quality/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fcss-code-quality/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31451757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"ssl_error","status_checked_at":"2026-04-05T21:22:51.943Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["code-quality","css","wallace"],"created_at":"2024-08-01T13:01:53.079Z","updated_at":"2026-04-05T22:12:53.654Z","avatar_url":"https://github.com/projectwallace.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# CSS Code Quality calculator\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"logo.png\" 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-code-quality\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/v/@projectwallace/css-code-quality\" alt=\"version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/@projectwallace/css-code-quality\"\u003e\n    \u003cimg src=\"https://badgen.now.sh/npm/dm/@projectwallace/css-code-quality\" alt=\"downloads\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://packagephobia.com/result?p=%40projectwallace%2Fcss-code-quality\"\u003e\n    \u003cimg src=\"https://packagephobia.com/badge?p=%40projectwallace%2Fcss-code-quality\" alt=\"install size\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  Calculate the Code Quality score of your CSS based on a range of different quality guards.\n\u003c/div\u003e\n\n---\n\nThis package analyzes your CSS on a high level and comes up with a score, divided into three areas:\n\n- **Maintainability**: how difficult is it for someone looking at the CSS from a high level to find the exact spot to fix a bug?\n- **Complexity**: how difficult is it for someone to make a change and be confident that they can make that change without side effects?\n- **Performance**: How likely is the CSS to have a negative impact on performance, based on high-level metrics? (Not including using hardware accelerated transforms and the like, because other tools are more suited for that.)\n\n## Installation\n\n```bash\nnpm install @projectwallace/css-code-quality\n```\n\n## Usage\n\n```js\nimport { calculate } from '@projectwallace/css-code-quality'\n\nlet css = `my_css { /* ... */ }`\nlet result = calculate(css)\n\n/*\nThe result shape looks something like this:\n\n{\n  \"violations\": [ ],\n  \"passes\": [ ],\n  \"performance\": {\n    \"score\": 90,\n    \"violations\": [ ],\n    \"passes\": [ ]\n  },\n  \"maintainability\": {\n    \"score\": 100,\n    \"violations\": [ ],\n    \"passes\": [ ]\n  },\n  \"complexity\": {\n    \"score\": 97,\n    \"violations\": [ ],\n    \"passes\": [ ]\n  }\n}\n\nEach `passes` or `violations` array contains an object that looks like this:\n\n{\n  \"id\": \"EmptyRules\",\n  \"score\": 0,\n  \"value\": 0\n},\n{\n  \"id\": \"AverageSelectorsPerRule\",\n  \"score\": 0,\n  \"value\": 1.5,\n  \"actuals\": [\n    2,\n    1\n  ]\n}\n\netc. etc.\n\n*/\n```\n\n## Metrics\n\n### Performance\n\n| Metric                    | What is tested                               | Points deducted                             |\n| ------------------------- | -------------------------------------------- | ------------------------------------------- |\n| `Imports`                 | Number of `@import` rules                    | 10 per `@import`                            |\n| `EmptyRules`              | Number of empty rules                        | 1 per empty rule                            |\n| `SelectorDuplications`    | Ratio of duplicate selectors                 | Up to 10 (when uniqueness ratio \u003c 66%)      |\n| `DeclarationDuplications` | Ratio of duplicate declarations              | Up to 10 (when uniqueness ratio \u003c 66%)      |\n| `CssSize`                 | Total CSS file size                          | 5 if size exceeds 200,000 bytes             |\n| `TooMuchComments`         | Total size of comments                       | 1 per 250 bytes of comments, max 10         |\n| `TooMuchEmbeddedContent`  | Total size of embedded content (e.g. base64) | 1 per 250 bytes of embedded content, max 20 |\n\n### Maintainability\n\n| Metric                                  | What is tested                                               | Points deducted                                             |\n| --------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- |\n| `SourceLinesOfCode`                     | Total source lines of code                                   | 1 per 1,000 lines over 10,000, max 15                       |\n| `AverageSelectorsPerRule`               | Average number of selectors per rule                         | 5 per selector over 2 (average), max 15                     |\n| `AverageDeclarationsPerRule`            | Average number of declarations per rule                      | 5 per declaration over 5 (average), max 15                  |\n| `MaxSelectorsPerRule`                   | Maximum number of selectors in a single rule                 | 0.5 per selector over 10, max 15                            |\n| `MaxDeclarationsPerRule`                | Maximum number of declarations in a single rule              | 0.5 per declaration over 10, max 15                         |\n| `MoreThanMostCommonSelectorsPerRule`    | Rules that have more selectors than the most common count    | 0.01 per rule, max 15 (when \u003e 10% of rules exceed the mode) |\n| `MoreThanMostCommonDeclarationsPerRule` | Rules that have more declarations than the most common count | 0.01 per rule, max 15 (when \u003e 10% of rules exceed the mode) |\n\n### Complexity\n\n| Metric                                  | What is tested                                                     | Points deducted                                                     |\n| --------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------- |\n| `MoreThanMostCommonSelectorComplexity`  | Selectors more complex than the most common complexity             | 0.01 per selector, max 10 (when \u003e 10% of selectors exceed the mode) |\n| `MoreThanMostCommonSelectorSpecificity` | Selectors with higher specificity than the most common specificity | 0.01 per selector, max 10 (when \u003e 10% of selectors exceed the mode) |\n| `MaxSelectorComplexity`                 | Maximum complexity of a single selector                            | 0.5 per complexity unit over 5, max 5                               |\n| `AverageSelectorComplexity`             | Average selector complexity                                        | 2 per complexity unit over 2 (average), max 10                      |\n| `IdSelectorRatio`                       | Ratio of ID selectors                                              | Up to 5 (when ID selector ratio exceeds 1%)                         |\n| `ImportantRatio`                        | Ratio of `!important` declarations                                 | Up to 5 (when `!important` ratio exceeds 1%)                        |\n\n## Related projects\n\n- [CSS Analyzer](https://github.com/projectwallace/css-analyzer) -\n  A CSS Analyzer that goes through your CSS to find all kinds of relevant statistics.\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectwallace%2Fcss-code-quality","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprojectwallace%2Fcss-code-quality","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectwallace%2Fcss-code-quality/lists"}