Integration for Rollup #

Installations #

npm i rollup-plugin-windicss -D # yarn add rollup-plugin-windicss -D

import WindiCSS from 'rollup-plugin-windicss'

export default {
  plugins: [
    ...WindiCSS(),
  ],
}

// your code entry
import 'virtual:windi.css'

That's all.

Configuration #

Preflight (style resetting) #

Preflight is enables on demanded, if you'd like to completely disable it, you can configure it as below

export default {
  plugins: [
    WindiCSS({
      preflight: false,
    }),
  ],
}

Safelist #

By default, we scan your source code statically and find all the usages of the utilities then generated corresponding CSS on-demand. However, there is some limitation that utilities that decided in the runtime can not be matched efficiently, for example

<!-- will not be detected -->
<div className={`p-${size}`}>

For that, you will need to specify the possible combinations in the safelist options of vite.config.js.

export default {
  plugins: [
    WindiCSS({
      safelist: 'p-1 p-2 p-3 p-4',
    }),
  ],
}

Or you can do it this way

function range(size, startAt = 1) {
  return Array.from(Array(size).keys()).map(i => i + startAt)
}

// rollup.config.js
export default {
  plugins: [
    WindiCSS({
      safelist: [
        range(30).map(i => `p-${i}`), // p-1 to p-3
        range(10).map(i => `mt-${i}`), // mt-1 to mt-10
      ],
    }),
  ],
}

Scanning #

On server start, vite-plugin-windicss will scan your source code and extract the utilities usages. By default, only files under src/ with extensions vue, html, mdx, pug, jsx, tsx will be included. If you want to enable scanning for other file type of locations, you can configure it via:

export default {
  plugins: [
    WindiCSS({
      scan: {
        dirs: ['.'], // all files in the cwd
        fileExtensions: ['vue', 'js', 'ts'], // also enabled scanning for js/ts
      },
    }),
  ],
}

More #

See options.ts for more configuration reference.