windicss / windicss-analysis Goto Github PK

🔍 A visual analyzer for Windi CSS

Home Page: https://analysis-demo.windicss.org

License: MIT License

JavaScript 0.08% HTML 0.70% TypeScript 55.83% Vue 40.80% CSS 2.59%

windicss-analysis's Introduction

⚠️ Windi CSS is Sunsetting ⚠️
We are sunsetting Windi CSS and we recommend new projects to seek for alternatives. Read the full blog post.

Windi CSS

Next generation utility-first CSS framework.

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

By scanning your HTML and CSS and generating utilities on demand, Windi CSS is able to provide faster load times and a speedy HMR in development, and does not require purging in production.

Integrations

Windi CSS provides first-class integrations for your favorite tools, select yours and get started.

Frameworks	Package	Version
CLI	Built-in
VSCode Extension	windicss-intellisense
Vite	vite-plugin-windicss
Rollup	rollup-plugin-windicss
Webpack	windicss-webpack-plugin
Nuxt	nuxt-windicss
Svelte	svelte-windicss-preprocess
StencilJS	stencil-windicss^Community

Plugins 🛠

Check out plugins available for windicss.

Documentation 📖

Check the documentation website.

Discussions

We’re using GitHub 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 before submitting a pull request.

Backers

License

Distributed under the MIT License.

windicss-analysis's People

Contributors

Stargazers

Watchers

Forkers

sibbng charlesokwuagwu uvacoder aki77 plugwind davidohalloran mrzhouzh

windicss-analysis's Issues

Custom base path for generated preview website

Context

I have a Nuxt project and I want to deploy the analyzer report in the same dist folder with the static generated output of Nuxt, in short, as a sub-page of my website.

Basically, I'm running nuxt generate && windicss-analysis --html dist/styles and everything is exported fine, however, the linked resources all start with a leading / so when the browser tries to load them all result in a 404 since they are not in the root folder (i.e. they are in /styles/* instead of /*).

Possible solutions

Try and remove the leading / from imported resources (it seems like Storybook does this)
Add another flag when exporting to specify a base path, e.g. --base-path

[Feature request] Support attributify mode

Looks like this is incompatible with attributify mode https://windicss.org/posts/attributify.html yet.

Redundant safelist

Showing safelist items that already been detected.

plugin support

give insight that utillities are from plugin

[FEATURE-REQUEST] separate duotone color

show dark colors as a separate section in the color palette

show that no windicss classes are used instead of empty

maybe not relevant for standalone, but for extension it would be better to show some warning that no windicss class was detected, instead of showing empty scaffold page

[FEATURE-REQUEST] Offline Build Version of App

@antfu thanks for this idea. here some insights and ideas + changes (i have adapted for use withour server port running in vscode, in vscode I think we do not need real time update. Just run it again if you want insights. Same behavior expected since it is similar to coverage of test).

We would need to allow running the UI offline with loading saved report.json from file (including using vscode webview URI's)
I would open PR, but I do not know how to make a second vite config, to build an additonal version. would be great if we can have it as an addtional script build, like build:app & build:app-offline

a) we would need another html base struct...
https://github.com/windicss/windicss-analysis/blob/main/index.html

// output.html
<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    window.localStorage.setItem("report", "###REPLACEJSON###")
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Windi Analyser</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet">
  <script type="module" crossorigin src="###REPLACESCRIPT###"></script>
  <link rel="stylesheet" href="###REPLACESTYLE###">
</head>
<body>
  <div id="app"></div>
  
</body>
</html>

b) we would include additional loader, maybe combine them with if, or do two differnt functions

windicss-analysis/src/logic/state.ts

Lines 7 to 12 in 3aec1f1

    
           export async function fetchData(refetch = false) { 
        
             data.value = await fetch(`/api/report.json${refetch ? '?force=true' : ''}`) 
        
               .then(r => r.json()) 
        
             return data.value 
        
           }

export async function fetchData(refetch = false) {
  data.value = await fetch(`/api/report.json${refetch ? '?force=true' : ''}`)
    .then(r => r.json())
  return data.value
}
export async function loadData() {
  data.value = JSON.parse(window.localStorage.getItem("report").toString())
  return data.value
}

c) we would need to choose which data to load, somehow (maybe based on some localStorage var)

windicss-analysis/src/main.ts

Line 20 in 3aec1f1

fetchData()

if (something) {
loadData()
} else {
fetchData()
}

[STYLE] improve code block

it's prism code block, so style set. But should make it more dynamic to match VS Code themes, somehow. (dark theme with white code block, is bad for eyes at night)

[BUG] Bundle of this package fails due to JSON

I need to bundle this extension (more runAnalysis function), so it works outside of DEBUG for VS Code Extension

import { runAnalysis } from "windicss-analysis";

[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
node_modules\statuses\codes.json (2:7)
1: {
2:   "100": "Continue",
          ^
3:   "101": "Switching Protocols",
4:   "102": "Processing",
Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
    at error (C:\Users\Alexander\Documents\projects\windicss\windicss-intellisense\node_modules\rollup\dist\shared\rollup.js:5305:30)
    at Module.error (C:\Users\Alexander\Documents\projects\windicss\windicss-intellisense\node_modules\rollup\dist\shared\rollup.js:9750:16)
    at Module.tryParse (C:\Users\Alexander\Documents\projects\windicss\windicss-intellisense\node_modules\rollup\dist\shared\rollup.js:10156:25)
    at Module.setSource (C:\Users\Alexander\Documents\projects\windicss\windicss-intellisense\node_modules\rollup\dist\shared\rollup.js:10057:24)
    at ModuleLoader.addModuleSource (C:\Users\Alexander\Documents\projects\windicss\windicss-intellisense\node_modules\rollup\dist\shared\rollup.js:18396:20)
    at async ModuleLoader.fetchModule (C:\Users\Alexander\Documents\projects\windicss\windicss-intellisense\node_modules\rollup\dist\shared\rollup.js:18452:9)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchStaticDependencies (C:\Users\Alexander\Documents\projects\windicss\windicss-intellisense\node_modules\rollup\dist\shared\rollup.js:18478:34)        
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (C:\Users\Alexander\Documents\projects\windicss\windicss-intellisense\node_modules\rollup\dist\shared\rollup.js:18454:9)

npm ERR! code 1
npm ERR! path C:\Users\Alexander\Documents\projects\windicss\windicss-intellisense
npm ERR! command failed
npm ERR! command C:\Program Files\PowerShell\7-preview\pwsh.exe -c cross-env NODE_ENV=production rollup -c

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Alexander\AppData\Local\npm-cache\_logs\2021-03-30T10_55_00_244Z-debug.log
 ERROR  npm failed with exit code 1

When the using prefix, the categories are all set to unknown

extra page to show custom stuff from config

should we build an extra page or modal, to show colors and shortcuts defined in config

reference https://ptb.discord.com/channels/810981250981953597/813781309184671765/830824830466129980

High frequency combinations

For potential shortcuts usage

RWD filter

Filter for breakpoints

[FEATURE-REQUEST] Serverless & VS Code Utility information

We should find a way to allow this in serverless & VS Code too. @antfu windi-runtime-dom maybe?

windicss-analysis/src/pages/utility.vue

Lines 50 to 55 in 53a3a94

    
           <template v-if="!isServerless"> 
        
             <div class="subheader"> 
        
               CSS 
        
             </div> 
        
             <CodeBlock lang="css" :code="css" /> 
        
           </template>

[BUG] page content just shown on reload in VS Code

2021-03-30_09-31-10.mp4

Originally posted by @alexanderniebuhr in #1 (comment)

support @apply in style block of sfc

<style global>
	.global {
		@apply bg-red-400;
	}
</style>

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

// windi.config.js

const typography = require('windicss/plugin/typography')
const aspect_ratio = require('windicss/plugin/aspect-ratio')

module.exports = {
    darkMode: 'class',
    plugins: [typography, aspect_ratio],
    theme: {
        extend: {
            colors: {
                primary: "#0074D9",
            },
        }
    },
    // Website not working when adding this👇
    extract: {
    include: [
      'src/**/*.{vue,jsx,tsx,svelte}',
      'shared/**/*.{vue,ts}',
    ],
  }
}

Running

Nuxt @ v2.15.7
[email protected]

support svelte class directive

class:bg-red-900={type == "danger"}

bg-red-900 should be also included in analysis, maybe with some info, that it is depended on variable.. could be interesting for other framework languages too

svelte class directives

should support svelte class directives

the syntax is quite simple and always the same: class:<classname>=<boolean>

<div class:bg-red-500={true}>Hello world</div>

color gradients

somehow support gradients in color pallete. 🤯

<div
  class="bg-gradient-to-br from-fuchsia-400 to-indigo-600"
/>

Analyzer doesn't work with Nuxtv3

Created empty Nuxt project with npx nuxi and added windicss

Rendering works fine, styles are visible in the page, but analyzer doesn't work

import { defineConfig } from '@windicss/plugin-utils';

export default defineConfig({
  /**
   * Write windi classes in html attributes.
   * @see https://windicss.org/features/attributify.html
   */
  attributify: true,
  darkMode: 'class',
  extract: {
    include: ['*/**/*.{vue,html,jsx,tsx}'],
  },
})

Filter out by rules

Rules like value-inferring, decimal, important prefix etc.

	export async function fetchData(refetch = false) {
	data.value = await fetch(`/api/report.json${refetch ? '?force=true' : ''}`)
	.then(r => r.json())
	return data.value
	}

	<template v-if="!isServerless">
	<div class="subheader">
	CSS
	</div>
	<CodeBlock lang="css" :code="css" />
	</template>