{"id":13826749,"url":"https://github.com/projectwallace/constyble","last_synced_at":"2025-09-19T04:31:24.124Z","repository":{"id":39663838,"uuid":"173959335","full_name":"projectwallace/constyble","owner":"projectwallace","description":"CSS complexity linter","archived":false,"fork":false,"pushed_at":"2023-06-19T12:13:24.000Z","size":1730,"stargazers_count":101,"open_issues_count":11,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T09:58:50.930Z","etag":null,"topics":["analysis","branding","complexity","css","css-linter","linter","performance","projectwallace","static-analysis","stats","test","threshold"],"latest_commit_sha":null,"homepage":"https://www.projectwallace.com/blog/introducing-gromit/","language":"JavaScript","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},"funding":{"github":[],"patreon":"bartveneman","open_collective":"projectwallace","custom":["https://www.projectwallace.com/sponsor","https://www.paypal.me/bartveneman"]}},"created_at":"2019-03-05T14:14:10.000Z","updated_at":"2024-04-07T03:33:23.000Z","dependencies_parsed_at":"2023-02-04T06:45:45.103Z","dependency_job_id":"30fecde0-20e5-4ec5-bcaf-7a6dd9918063","html_url":"https://github.com/projectwallace/constyble","commit_stats":{"total_commits":34,"total_committers":4,"mean_commits":8.5,"dds":0.5588235294117647,"last_synced_commit":"48133339334c9cac69e4cf4458c8baf34b60534b"},"previous_names":["bartveneman/constyble"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fconstyble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fconstyble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fconstyble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectwallace%2Fconstyble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/projectwallace","download_url":"https://codeload.github.com/projectwallace/constyble/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233550310,"owners_count":18692826,"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":["analysis","branding","complexity","css","css-linter","linter","performance","projectwallace","static-analysis","stats","test","threshold"],"created_at":"2024-08-04T09:01:43.539Z","updated_at":"2025-09-19T04:31:18.746Z","avatar_url":"https://github.com/projectwallace.png","language":"JavaScript","readme":"\u003ccenter\u003e\n\t\u003ch1\u003econstyble\u003c/h1\u003e\n\t\u003cp\u003eA CSS complexity linter, based on css-analyzer. Don't let your CSS grow beyond the thresholds that you provide.\u003c/p\u003e\n\u003c/center\u003e\n\n[![NPM Version](https://img.shields.io/npm/v/constyble.svg)](https://www.npmjs.com/package/constyble)\n[![Build Status](https://travis-ci.org/bartveneman/constyble.svg?branch=master)](https://travis-ci.org/bartveneman/constyble)\n[![Known Vulnerabilities](https://snyk.io/test/github/bartveneman/constyble/badge.svg)](https://snyk.io/test/github/bartveneman/constyble)\n[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)\n![Dependencies Status](https://img.shields.io/david/bartveneman/constyble.svg)\n![Dependencies Status](https://img.shields.io/david/dev/bartveneman/constyble.svg)\n[![Project: Wallace](https://img.shields.io/badge/Project-Wallace-29c87d.svg)](https://www.projectwallace.com/oss)\n\n## Installation\n\n```sh\nnpm install constyble\n# or\nyarn add constyble\n```\n\n## Usage\n\nWe need a config with thresholds and CSS to compare it to.\n\n```sh\n# Default usage (assuming a .constyblerc file in the current directory)\n$ constyble style.css\n\n# Read from StdIn (assuming a .constyblerc file in the current directory)\n$ cat style.css | constyble\n\n# Custom config\n$ constyble style.css --config my-config.json\n```\n\nThe result will look like something like this:\n\n```sh\nTAP version 13\n# Subtest: selectors.id.total\n    ok 1 - selectors.id.total should not be larger than 0 (actual: 0)\n    1..1\nok 1 - selectors.id.total # time=6.024ms\n\n1..1\n# time=15.076ms\n```\n\nNote that this example uses only 1 test (total ID selectors).\n\n## Config file\n\nconstyble will try to fetch a `.constyblerc` file in your current directory. You\ncan also specify a different JSON config file with the `--config` option\n([see usage](#usage)). The config JSON should look similar to this:\n\n```jsonc\n{\n\t// Do not exceed 4095, otherwise IE9 will drop any subsequent rules\n\t\"selectors.total\": 4095,\n\t\"selectors.id.total\": 0,\n\t\"values.colors.totalUnique\": 2,\n\t\"values.colors.unique\": [\"#fff\", \"#000\"]\n}\n```\n\nAll the possible options for the config file can be found at\n[@projectwallace/css-analyzer](https://github.com/projectwallace/css-analyzer#usage).\nJSON comments are allowed.\n\n## Custom reporter\n\nBy default, constyble will report in the\n[TAP format](https://www.node-tap.org/tap-format/), but you can pipe the output\ninto something you may find prettier, like\n[tap-nyan](https://www.npmjs.com/package/tap-nyan),\n[tap-dot](https://github.com/scottcorgan/tap-dot) or any other\n[TAP-reporter](https://github.com/substack/tape#pretty-reporters).\n\ntap-nyan\n\n```sh\n$ constyble style.css | tap-nyan\n\n 1   -_,------,\n 0   -_|   /\\_/\\\n 0   -^|__( ^ .^)\n     -  \"\"  \"\"\n  Pass!\n```\n\n## Usage in CI\n\nIf any test fails, constyble will exit with a non-zero exit code. When you run\nconstyble in your CI builds, this may cause the build to fail. This is exactly\nwhat constyble was designed to do.\n\nExample usage with package.json:\n\n```json\n{\n\t\"name\": \"my-package\",\n\t\"version\": \"0.1.0\",\n\t\"scripts\": {\n\t\t\"test\": \"constyble compiled-styles.css\"\n\t},\n\t\"devDependencies\": {\n\t\t\"constyble\": \"*\"\n\t}\n}\n```\n\n## The name\n\nconstyble is a mix of the words Style and Constable. This package is like a\npolice officer (constable) for your styles. Previously this package was called\nGromit, but that was dropped because it's too closely related to the main\n'Wallace' project that this package is part of.\n\n## Related projects\n\n- [CSS Analyzer](https://github.com/projectwallace/css-analyzer) - The analyzer\n  that powers this module\n- [Wallace CLI](https://github.com/bartveneman/wallace-cli) - CLI tool for\n  @projectwallace/css-analyzer\n- [CSS Analyzer Diff](https://github.com/bartveneman/css-analyzer-diff) -\n  Calculates the diff between two sets of CSS analysis\n- [Color Sorter](https://github.com/bartveneman/color-sorter) - Sort CSS colors\n  by hue, saturation, lightness and opacity\n\n## License\n\nMIT © Bart Veneman\n","funding_links":["https://patreon.com/bartveneman","https://opencollective.com/projectwallace","https://www.projectwallace.com/sponsor","https://www.paypal.me/bartveneman"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectwallace%2Fconstyble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprojectwallace%2Fconstyble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectwallace%2Fconstyble/lists"}