windicss

windicss

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Open Source

⚠️ Windi CSS is Sunsetting ⚠️ We are sunsetting Windi CSS and we recommend new projects to seek for alternatives. Read the <a href="https://windicss.org/posts/sunsetting.html">full blog post</a>. <hr> <h1 align="center"> <a href="https://github.com/windicss/windicss/wiki"> <img src="https://next.windicss.org/assets/logo.svg" alt="Windi CSS Logo" height="120" width="120"/> </a> Windi CSS </h1> <a href="https://www.npmjs.com/package/windicss"><img src="https://img.shields.io/npm/v/windicss.svg?color=0EA5E9" alt="Npm Version"></a> <a href="https://www.npmjs.com/package/windicss"><img src="https://img.shields.io/npm/dt/windicss.svg?color=1388bd" alt="Total Downloads"></a> <a href="https://github.com/windicss/windicss/actions"><img src="https://img.shields.io/github/workflow/status/windicss/windicss/Node.js%20CI" alt="Build Status"></a> <a href="https://codecov.io/gh/windicss/windicss"><img src="https://img.shields.io/codecov/c/github/windicss/windicss/dev.svg?sanitize=true" alt="Coverage"></a> <a href="https://discord.gg/aRYWm8r8Eq"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord&logoColor=white&label=&color=7289da" alt="Discord Chat"></a> Next generation utility-first CSS framework. [windi css]: https://windicss.org [website]: https://windicss.org [video comparison]: https://twitter.com/antfu7/status/1361398324587163648 ## Why Windi CSS? 🤔 A quote from the author should illustrate his motivation to create [Windi CSS]: > When my project became larger and there were about dozens of components, the initial compilation time reached 3s, and hot updates took more than 1s with Tailwind CSS. - [@voorjaar](https://github.com/voorjaar) By scanning your HTML and CSS and generating utilities on demand, [Windi CSS] is able to provide [faster load times][video comparison] and a speedy HMR in development, and does not require purging in production. Read more about it in the [Introduction](https://windicss.org/guide/). ## Integrations Windi CSS provides first-class integrations for your favorite tools, select yours and get started. | Frameworks | Package | Version | | :-- | :-- | :-- | | CLI | [Built-in](https://windicss.org/guide/cli) | ![](https://img.shields.io/npm/v/windicss?label=&color=0EA5E9) | | VSCode Extension | [windicss-intellisense](https://github.com/windicss/windicss-intellisense) | ![](https://img.shields.io/visual-studio-marketplace/v/voorjaar.windicss-intellisense.svg?label=&color=1388bd) | | Vite | [vite-plugin-windicss](https://github.com/windicss/vite-plugin-windicss) | ![](https://img.shields.io/npm/v/vite-plugin-windicss?label=&color=0EA5E9) | | Rollup | [rollup-plugin-windicss](https://github.com/windicss/vite-plugin-windicss/tree/main/packages/rollup-plugin-windicss) | ![](https://img.shields.io/npm/v/rollup-plugin-windicss?label=&color=1388bd) | | Webpack | [windicss-webpack-plugin](https://github.com/windicss/windicss-webpack-plugin) | ![](https://img.shields.io/npm/v/windicss-webpack-plugin?label=&color=1388bd) | | Nuxt | [nuxt-windicss](https://github.com/windicss/nuxt-windicss-module) | ![](https://img.shields.io/npm/v/nuxt-windicss?label=&color=1388bd) | | Svelte | [svelte-windicss-preprocess](https://github.com/windicss/svelte-windicss-preprocess) | ![](https://img.shields.io/npm/v/svelte-windicss-preprocess?label=&color=1388bd) | | StencilJS | [stencil-windicss](https://github.com/codeperate/stencil-windicss)Community | ![](https://img.shields.io/npm/v/@codeperate/stencil-windicss?label=&color=1388bd) | ## Plugins 🛠 Check out [plugins available for windicss](https://github.com/windicss/plugins). ## Documentation 📖 Check [the documentation website][website]. ## Discussions We’re using [GitHub Discussions](https://github.com/windicss/windicss/discussions) as a place to connect with other members of our community. You are free to ask questions and share ideas, so enjoy yourself. ## Contributing If you're interested in contributing to windicss, please read our [contributing docs](https://github.com/windicss/windicss/blob/main/CONTRIBUTING.md) **before submitting a pull request**. ## Sponsors <a href="https://opencollective.com/windicss" target="_blank"> <img src="https://opencollective.com/windicss/sponsors.svg"> </a> ## Backers <a href="https://opencollective.com/windicss" target="_blank"> <img src="https://opencollective.com/windicss/backers.svg"> </a> ## License Distributed under the [MIT License](https://github.com/windicss/windicss/blob/main/LICENSE).

CSS Frameworks & UI Kits

6.5K Github Stars

Open Source

windicss-analysis

# Windi Analysis An 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! ![](https://user-images.githubusercontent.com/11247099/113150805-0c43f880-9267-11eb-85a6-ec1a2f1eed37.png) ## Get Started Run the following command under your project root ```bash 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 ```bash npm i -D windicss-analysis ``` ```jsonc // package.json { "scripts": { "analysis": "windicss-analysis" } } ``` ### VS Code Extension From v0.8.0 of [Windi CSS Intellisense](https://github.com/windicss/windicss-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](http://analysis-demo.windicss.org) You can genreate your own report and host it statically by running the following command ```bash 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 ```ts // 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 ```bash npx windicss-analysis --json report.json ``` and process it as you need. You can also have type support for it via: ```ts 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: ```ts import { startServer } from 'windicss-analysis' startServer({ /*...* / }) ``` Check out the type decrations for more APIs avaliable. ## License MIT

CSS Frameworks & UI Kits Design Systems & Tokens

128 Github Stars

windicss

Software by windicss

windicss

windicss-analysis