Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

windicss-analysis

Package Overview
Dependencies
Maintainers
4
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

windicss-analysis

Analyser for Windi CSS

  • 0.3.5
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.7K
decreased by-44.46%
Maintainers
4
Weekly downloads
 
Created
Source

Windi Analysis

An analyser tool for Windi CSS. Browse your utilities usages, have an overview of your design system, identify "bad practices", and more!

Get Started

Run the following command under your project root

npx windicss-analysis

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

NPM

Or you can install locally to reuse the same version of your local windicss module

npm i -D windicss-analysis
// package.json
{
  "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 have a preview the analysing report of the analyser itself

analysis-demo.windicss.org

You can genreate your own report and host it statically by running the following command

npx windicss-analysis --html dist

FAQ

It does not detecting my files

You 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

// windi.config.js
import { defineConfig } from 'windicss/helpers'
import colors from 'windicss/colors'

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 type { AnalysisReport } from 'windicss-analysis'
import rawReport from './report.json'

const report = rawReport as AnalysisReport

Programmatic Use?

Yes. Just like a normal Node package:

import { startServer } from 'windicss-analysis'

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

Check out the type decrations for more APIs avaliable.

License

MIT

Keywords

FAQs

Package last updated on 05 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc