How to use windicss in vuepress-next with vite

[riderx]

I have try to update my theme config like this

import type { ViteBundlerOptions } from '@vuepress/bundler-vite'
import { defineUserConfig } from '@vuepress/cli'
import type { DefaultThemeOptions } from '@vuepress/theme-default'
import WindiCSS from 'vite-plugin-windicss'
import { path } from '@vuepress/utils'

export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
    title: 'Captime',
    description: 'Just playing around.2',
    theme: path.resolve(__dirname, './theme'),
    bundler: '@vuepress/bundler-vite',
    // options for vite bundler
    bundlerConfig: {
        viteOptions: {
            plugins: [WindiCSS()], 
        },
    },
})

And then I don't know where I should put :

import 'virtual:windi.css'
import 'virtual:windi-devtools'

I did try in the layout component on my theme, but it seems not the right place as @meteorlxy told me here: #548
He linked me to this :
https://github.com/vuepress/vuepress-next/blob/66c035402e01e63e465e82a03728fb8e135c6381/docs/advanced/architecture.md?plain=1#L12-L15

but I don't understand this sentence :

 - The entry file of a plugin or a theme will be loaded in Node App. So you need to use CommonJS format for them.
- Client files will be loaded in Client App, which will be handled by bundler. For example, layouts, components, app setup files, app enhance files, etc. You'd better use ESM format for them.

The second line says layout will be client file but the first one says all theme is node app.
So I have no idea where put theses import

Edit: I found a way to make windi load by creating the file clientAppEnhance.ts in .vuepress folder.

import 'virtual:windi.css'
import 'virtual:windi-devtools'
import "./theme/main.css"

import { defineClientAppEnhance } from '@vuepress/client'

export default defineClientAppEnhance(({ app, router, siteData }) => {
  // ...
    console.log('defineClientAppEnhance')

})

But now it seems, my class are not apply, my windi config is :

import defaultTheme from 'windicss/defaultTheme'
import typography from 'windicss/plugin/typography'

module.exports = {
  extract: {
     include: ['./docs/.vuepress/theme/**/*.{vue,js,ts,jsx,tsx,md}', './docs/**/*.{vue,js,ts,jsx,tsx,md}'],
  },
  darkMode: false, // or 'media' or 'class'
  shortcuts: {
    'timer-point-mini': '-right-1 iv:-right-2 md:-right-4 lg:-right-5',
    'timer-point-big': '-right-4 lg:-right-5',
    'timer-big':
      'text-[8rem] tab:text-[9rem] sm:text-[11rem] ix:text-[13rem] md:text-[14rem] lg:text-[18rem] xl:text-[22rem] 2xl:text-[28rem] 4xl:text-[30rem] tracking-[-14px] xl:tracking-[-25px]',
    'timer-mini':
      'text-[4rem] tab:text-[5rem] sm:text-[6rem] ix:text-[7rem] md:text-[8rem] lg:text-[10rem] xl:text-[12rem] 2xl:text-[14rem] 4xl:text-[20rem] tracking-[-5px] xl:tracking-[-15px]',
  },
  theme: {
    fontFamily: {
      alarm: ['Alarm_Clock', ...defaultTheme.fontFamily.sans],
      handel: ['Handel_Gothic', ...defaultTheme.fontFamily.sans],
    },
  },
  plugins: [typography],
}

Do I need to use import { path } from '@vuepress/utils' in the wind config to define the extract path ?

[riderx]

i was finally able to make it work with the deprecated flow of windi with postcss:

import type { ViteBundlerOptions } from '@vuepress/bundler-vite'
import { defineUserConfig } from '@vuepress/cli'
import type { DefaultThemeOptions } from '@vuepress/theme-default'

export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
    bundler: '@vuepress/bundler-vite',
    // options for vite bundler
    bundlerConfig: {
        viteOptions: {
            css: {
                postcss: {
                    plugins: [require("postcss-windicss")]
                },
            },
        },
    },
})

and clientAppEnhance.ts

import "./theme/main.css"
import { defineClientAppEnhance } from '@vuepress/client'

export default defineClientAppEnhance(({ app, router, siteData }) => {
})

And main.css

@windicss;

And windi.config.js

import defaultTheme from 'windicss/defaultTheme'
import typography from 'windicss/plugin/typography'

module.exports = {
  extract: {
     include: ['./docs/.vuepress/theme/**/*.{vue,js,ts,jsx,tsx,md}', './docs/**/*.{vue,js,ts,jsx,tsx,md}'],
  },
  darkMode: false,
  plugins: [typography],
}

this is not optimal I hope to have better solution soon.

[gotjoshua]

this is not optimal I hope to have better solution soon.

any luck finding a better solution?

[tennox]

yes

[meteorlxy]

The second line says layout will be client file but the first one says all theme is node app.
So I have no idea where put theses import

I'm not a native English speaker.

The entry file of a plugin or a theme will be loaded in Node App

What I really mean is "The entry file of a plugin or the entry file of a theme". What's the suggestion about the description? 🤔

[hrishikesh-k]

I was struggling with this too, but I was able to get this to work with Webpack. I did this:

npm i windicss-webpack-plugin

Then in Vuepress config (./docs/.vuepress/config.js):

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
module.exports = {
  bundler: '@vuepress/bundler-webpack',
  bundlerConfig: {
    configureWebpack: () => {
      return {
        plugins: [new WindiCSSWebpackPlugin()]
      }
    }
  }
}

And finally in ./docs/.vuepress/clientAppEnhance.js:

import 'windi.css'

At least Webpack is better supported than PostCSS as per Windi CSS docs.

[riderx]

@hrishikesh-k thanks, i didn't try webpack. I really don't want to use it anymore ^^ so PostCSS was the only solution working for vite.

[tennox]

Took me only 5 hours of debugging 🤓, I found the problem:

Windi was searching for files in .vuepress/.temp/vite-root which only had index.html 🤷

and the solution: 😎 (stupidly simple)

page/.vuepress/config.ts

import WindiCSS from 'vite-plugin-windicss'

module.exports = {
  bundlerConfig: {
    viteOptions: {
      plugins: [
        WindiCSS({
          root: __dirname, // default is .temp/vite-root
          scan: {
            dirs: ['.'], // default is ['src']
          },
        }),
      ],
    },
  },

page/.vuepress/clientAppEnhance.ts

import 'virtual:windi.css'
import 'virtual:windi-devtools'

// needs dummy export
import { defineClientAppEnhance } from '@vuepress/client'
export default defineClientAppEnhance(({ app, router }) => {})