Visual Analyzer #

A visual analyser tool for Windi CSS. Browse your utility usages, get an overview of your design system, identify "bad practices", and more!

Get Started #

Run the following command in your project root

npx windicss-analysis

The analysis report will be available at http://localhost:8113/

NPM #

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"
  }
}

VS Code Extension #

From v0.8.0 of Windi CSS Intellisense, it has this analyser built-in.

• Open a project using Windi CSS in VS Code
• Open the Command Palette (⇧⌘P / Ctrl+Shift+P)
• Run command: Windi CSS: Run & Open Analysis
• See Analyser in the second editor column

Online Preview #

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

FAQ #

It does not detect my files #

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}',
    ],
  },
})

Can I use the report for other tools? #

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

Can I use Windi CSS programmatically? #

Yes, just like a normal Node package:

import { startServer } from 'windicss-analysis'

startServer({ /* ... */ })

Check out the type declarations to see available APIs.