{"id":13893811,"url":"https://github.com/windicss/windicss-analysis","last_synced_at":"2025-09-07T23:37:07.912Z","repository":{"id":45609291,"uuid":"352617454","full_name":"windicss/windicss-analysis","owner":"windicss","description":"🔍 A visual analyzer for Windi CSS","archived":false,"fork":false,"pushed_at":"2022-09-26T18:32:26.000Z","size":189,"stargazers_count":129,"open_issues_count":15,"forks_count":7,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-07-08T07:45:45.867Z","etag":null,"topics":["analyzer","design-system","windcss"],"latest_commit_sha":null,"homepage":"https://analysis-demo.windicss.org","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/windicss.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}},"created_at":"2021-03-29T11:22:59.000Z","updated_at":"2023-06-27T14:23:25.000Z","dependencies_parsed_at":"2022-08-30T13:21:34.783Z","dependency_job_id":null,"html_url":"https://github.com/windicss/windicss-analysis","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/windicss/windicss-analysis","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fwindicss-analysis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fwindicss-analysis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fwindicss-analysis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fwindicss-analysis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/windicss","download_url":"https://codeload.github.com/windicss/windicss-analysis/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fwindicss-analysis/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265568012,"owners_count":23789573,"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","design-system","windcss"],"created_at":"2024-08-06T18:01:17.676Z","updated_at":"2025-07-17T08:30:52.452Z","avatar_url":"https://github.com/windicss.png","language":"TypeScript","readme":"# Windi Analysis\n\nAn analyser tool for [Windi CSS](https://github.com/windicss/windicss). Browse your utilities usages, have an overview of your design system, identify \"bad practices\", and more!\n\n![](https://user-images.githubusercontent.com/11247099/113150805-0c43f880-9267-11eb-85a6-ec1a2f1eed37.png)\n\n## Get Started\n\nRun the following command under your project root\n\n```bash\nnpx windicss-analysis\n```\n\nThe analysis report will be available at http://localhost:8113/\n\n### NPM\n\nOr you can install locally to reuse the same version of your local `windicss` module\n\n```bash\nnpm i -D windicss-analysis\n```\n\n```jsonc\n// package.json\n{\n  \"scripts\": {\n    \"analysis\": \"windicss-analysis\"\n  }\n}\n```\n\n### VS Code Extension\n\nFrom v0.8.0 of [Windi CSS Intellisense](https://github.com/windicss/windicss-intellisense), it has this analyser built-in.\n\n- Open a project using Windi CSS in VS Code\n- Open the Command Palette (⇧⌘P / Ctrl+Shift+P)\n- Run command: `Windi CSS: Run \u0026 Open Analysis`\n- See Analyser in the second editor column\n\n### Online Preview\n\nYou can have a preview the analysing report of the analyser itself\n\n[analysis-demo.windicss.org](http://analysis-demo.windicss.org)\n\nYou can genreate your own report and host it statically by running the following command\n\n```bash\nnpx windicss-analysis --html dist\n```\n\n## FAQ\n\n### It does not detecting my files\n\nYou will need to configure the `extract.include` options in `windi.config.js` instead of your framework's configurations file so it can be understood by the analyzer so as other intergations support. For example\n\n```ts\n// windi.config.js\nimport { defineConfig } from 'windicss/helpers'\nimport colors from 'windicss/colors'\n\nexport default defineConfig({\n  extract: {\n    include: [\n      'src/**/*.{vue,jsx,tsx,svelte}',\n      'shared/**/*.{vue,ts}',\n    ],\n  },\n})\n```\n\n### Can I use the report for other tools?\n\nYes. You can get the raw json file via the CLI\n\n```bash\nnpx windicss-analysis --json report.json\n```\n\nand process it as you need.\n\nYou can also have type support for it via:\n\n```ts\nimport type { AnalysisReport } from 'windicss-analysis'\nimport rawReport from './report.json'\n\nconst report = rawReport as AnalysisReport\n```\n\n### Programmatic Use?\n\nYes. Just like a normal Node package:\n\n```ts\nimport { startServer } from 'windicss-analysis'\n\nstartServer({ /*...* / })\n```\n\nCheck out the type decrations for more APIs avaliable.\n\n## License\n\nMIT\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindicss%2Fwindicss-analysis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwindicss%2Fwindicss-analysis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindicss%2Fwindicss-analysis/lists"}