A visual analyser tool for Windi CSS. Browse your utility usages, get an overview of your design system, identify "bad practices", and more!
Run the following command in your project root
npx windicss-analysis
The analysis report will be available at http://localhost:8113/
Or you can install it locally to use the same version as your local windicss
module
npm i -D windicss-analysis
{
"scripts": {
"analysis": "windicss-analysis"
}
}
From v0.8.0 of Windi CSS Intellisense, it has this analyser built-in.
Windi CSS: Run & Open Analysis
You can preview the report of the analyser itself at analysis-demo.windicss.org
You can generate your own report and host it statically by running the following command:
npx windicss-analysis --html dist
You will need to explicitly configure the extract.include
option in windi.config.js
instead of your framework's configuration file so it can be understood by the analyzer. For example:
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
extract: {
include: [
'src/**/*.{vue,jsx,tsx,svelte}',
'shared/**/*.{vue,ts}',
],
},
})
Yes. You can get the raw JSON file via the CLI
npx windicss-analysis --json report.json
and process it as you need.
You can also have type support for it via:
import rawReport from './report.json'
import type { AnalysisReport } from 'windicss-analysis'
const report = rawReport as AnalysisReport
Yes, just like a normal Node package:
import { startServer } from 'windicss-analysis'
startServer({ /* ... */ })
Check out the type declarations to see available APIs.