{"id":18786885,"url":"https://github.com/kitze/styles-debugger","last_synced_at":"2026-03-09T06:31:12.381Z","repository":{"id":40002822,"uuid":"75823799","full_name":"kitze/styles-debugger","owner":"kitze","description":"A helper for visually debugging styles in CSS-in-JS","archived":false,"fork":false,"pushed_at":"2023-05-25T15:05:28.000Z","size":54,"stargazers_count":130,"open_issues_count":2,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-27T06:47:56.136Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kitze.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2016-12-07T10:09:00.000Z","updated_at":"2024-05-20T11:09:48.000Z","dependencies_parsed_at":"2024-06-21T02:37:02.698Z","dependency_job_id":"310df0a7-9c82-4246-a83d-3507fd30bb15","html_url":"https://github.com/kitze/styles-debugger","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kitze/styles-debugger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Fstyles-debugger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Fstyles-debugger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Fstyles-debugger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Fstyles-debugger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kitze","download_url":"https://codeload.github.com/kitze/styles-debugger/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitze%2Fstyles-debugger/sbom","scorecard":{"id":561973,"data":{"date":"2025-08-11","repo":{"name":"github.com/kitze/styles-debugger","commit":"e1a8b35bada7cffce05b8f6c72d136afd0f11cf4"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/19 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"35 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-832h-xg76-4gv6","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f","Warn: Project is vulnerable to: GHSA-ff6r-5jwm-8292","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T13:58:36.572Z","repository_id":40002822,"created_at":"2025-08-20T13:58:36.573Z","updated_at":"2025-08-20T13:58:36.573Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30284774,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T02:57:19.223Z","status":"ssl_error","status_checked_at":"2026-03-09T02:56:26.373Z","response_time":61,"last_error":"SSL_read: 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":[],"created_at":"2024-11-07T20:52:52.377Z","updated_at":"2026-03-09T06:31:12.352Z","avatar_url":"https://github.com/kitze.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### 🙋‍♂️ Made by [@thekitze](https://twitter.com/thekitze)  \n\n### Other projects:\n- 🏫 [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops\n- 💌 [Twizzy](https://twizzy.app) - A standalone app for Twitter DM\n- 💻 [Sizzy](https://sizzy.co) - A tool for testing responsive design on multiple devices at once\n- 🤖 [JSUI](https://github.com/kitze/JSUI) - A powerful UI toolkit for managing JavaScript apps\n\n\u003ca href=\"https://zerotoshipped.com\"\u003e\u003cimg style=\"width:450px\" src=\"https://i.ibb.co/WKQPDv5/twitter-image.jpg\" alt=\"Zero To Shipped\"\u003e\u003c/a\u003e\n\n---\n\n# Styles Debugger\n### A helper for visually debugging css-in-js styles. \n\n- Works both with template literals and objects. \n- It also works with inline styles but it won't show any text.\n\nMade by [Kitze](https://twitter.com/thekitze)\n\n## Install\n\n`yarn add styles-debugger`\n\n## Demos\n\n- [CodeSandbox example with styled-components](https://codesandbox.io/s/j0yq16l7v)\n- [CodeSandbox example with emotion](https://codesandbox.io/s/0or563w2yv)\n- [CodeSandbox example with a custom debugger](https://codesandbox.io/s/ry65nyvr6p)\n\n![](https://i.imgur.com/ceORWWQ.png)\n\n## Basic usage\n\n### With template literals\n\n```js\nimport { debug } from 'styles-debugger';\nimport styled from 'styled-components';\n\nconst Header = styled.div`\n  ${debug()};\n`;\n```\n\n### With objects\n\n```js\nimport { debug } from 'styles-debugger';\nimport emotion from 'react-emotion';\n\nconst Header = emotion('div')({\n  ...debug()\n});\n```\n\n### Show text along the border\n\n```js\nconst Wrapper = styled.div`\n  ${debug('Wrapper')};\n`;\n```\n\n### Show text + customize options\n\n```js\nconst Footer = styled.div`\n  ${debug('Footer', { color: 'blue', debugWith: 'background' })};\n`;\n```\n\n### Available params for `debug`\n\n`debug(text: String, params: Object)`\n\nEach `debug` function call can override the default params object for the debugger with a custom object. So for example if for some element you would like to use specific options for debugging you can just pass them as the `params` parameter. [See the available options](https://github.com/kitze/styles-debugger/#configuration-options).\n\n## Initialize custom instance\n\nInstead of using the default `debug` function you can create your own debugger.\nInitialize it in some file and customize it the way you want.\n\n```js\nimport { CreateStylesDebugger } from 'styles-debugger';\n\nconst debug = CreateStylesDebugger({\n  color: 'blue',\n  borderSize: 3,\n  position: 2,\n  styles: {\n    text: {\n      color: 'red'\n    }\n  },\n  debugWith: 'background'\n});\n\nexport default debug;\n```\n\n### Configuration options\n\n- `enabled`: if this is set to `false` debug mode will be turned off for all the components (default is `true`)\n- `position`: pick the corner position for the text: options are `1 | 2 | 3 | 4` (default is `1`)\n- `color`: which should be a default color for the border of the element (by default it's a random color)\n- `debugWith`: what should be used for debugging the elements: `border` or `background` (default is `border`)\n- `borderSize`: if using border for debugging, specify the size of the border (default is 1)\n- `showText`: enable or disable showing text with pseudo elements for each component (default is true)\n- `pseudoElement`: which pseudo element to be used: `after` or `before`\n- `styles`: an object that can be passed to completely override the styles for `element` (the element that is debugged), and `text` (the pseudo element with the text).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitze%2Fstyles-debugger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitze%2Fstyles-debugger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitze%2Fstyles-debugger/lists"}