Logo Windi CSS

Интеграция для Rollup

Установки 

npm i rollup-plugin-windicss -D # yarn add rollup-plugin-windicss -D
rollup.config.js
import WindiCSS from 'rollup-plugin-windicss'

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

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

Это все.

Конфигурация

Предпечатная проверка (сброс стиля)

Предполетная проверка включается по требованию, если вы хотите полностью отключить ее, вы можете настроить ее, как показано ниже

rollup.config.js
export default {
  plugins: [
    WindiCSS({
      preflight: false,
    }),
  ],
}

Надежный список (Safelist)

По умолчанию мы сканируем ваш исходный код статически и находим все случаи использования утилит, а затем сгенерировали соответствующий CSS по запросу. Однако существует некоторое ограничение, заключающееся в том, что утилиты, которые решили во время выполнения, не могут быть эффективно сопоставлены, например:

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

Для этого вам нужно будет указать возможные комбинации в опциях safelist файла vite.config.js.

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

Или вы можете сделать это так

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
      ],
    }),
  ],
}

Сканирование

При запуске сервера vite-plugin-windicss просканирует ваш исходный код и извлечет использованные утилиты. По умолчанию будут включены только файлы из каталога src/ с расширениями vue, html, mdx, pug, jsx, tsx. Если вы хотите включить сканирование для других типов файлов, вы можете настроить его с помощью:

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

Еще

Смотрите options.ts для получения дополнительных сведений о конфигурации.