Windi CSS CLI

安装

添加包：

npm i -g windicss

用法

打印帮助信息

windicss --help  // windicss -h

应该像下面这样打印帮助信息。

Generate css from text files that containing windi classes.
By default, it will use interpretation mode to generate a single css file.

Usage:
  windicss [filenames]
  windicss [filenames] -c -m -d
  windicss [filenames] -c -s -m -d
  windicss [filenames] [-c | -i] [-a] [-b | -s] [-m] [-d] [-p <prefix:string>] [-o <path:string>] [--args arguments]

Options:
  -h, --help            Print this help message and exit.
  -v, --version         Print windicss current version and exit.

  -i, --interpret       Interpretation mode, generate class selectors. This is the default behavior.
  -c, --compile         Compilation mode, combine the class name in each row into a single class.
  -a, --attributify     Attributify mode, generate attribute selectors. Attributify mode can be mixed with the other two modes.
  -t, --preflight       Add preflights, default is false.

  -b, --combine         Combine all css into one single file. This is the default behavior.
  -s, --separate        Generate a separate css file for each input file.

  -d, --dev             Enable hot reload and watch mode.
  -m, --minify          Generate minimized css file.
  -z, --fuzzy           Enable fuzzy match, only works in interpration mode.
  -p, --prefix PREFIX   Set the css class name prefix, only valid in compilation mode. The default prefix is 'windi-'.
  -o, --output PATH     Set output css file path.
  -f, --config PATH     Set config file path.

  --style               Parse and transform windi style block.
  --init PATH           Start a new project on the path.

初始测试项目

windicss --init <project>  // windicss --init .
windicss --init <project> --compile  // windicss --init hello_world --compile

文件名

[filenames] 参数可以包含文件路径和 glob 模式（由 node-glob 提供支持）。

windicss './hello.html' './world.html'
windicss './**/*.html'
windicss './src/**/*.html'
windicss './hello.html' './world.html', './src/**/*.svelte'

编译 CSS 文件

生成普通的css

使用-o参数指定生成的CSS文件名，-t参数指定是否添加preflight(basestyles)。

windicss './**/*.html'
windicss './**/*.html' -to windi.css
windicss './test.html' -to windi.css
windicss './test.html' --preflight --output windi.css

最小化构建

使用 -m 或 --minify 生成最小化的 CSS 文件。此参数主要用于构建时间。

windicss './**/*.html' -mto windi.min.css
windicss './**/*.html' -to windi.css --minify

使用编译模式

编译模式会将所有 windi 实用程序组合到一个新类中，您可以使用 -p 或 --prefix 指定

windicss './**/*.html' -cto windi.css
windicss './**/*.html' -ctom windi.min.css
windicss './**/*.html' -cto windi.css --minify
windicss './**/*.html' -cto windi.css --minify --prefix 'tw-'
windicss './test.html' --compile --preflight --output windi.css

例如

<div class="windi-15wa4me">
  <img class="windi-1q7lotv" src="/img/erin-lindford.jpg" alt="Woman's Face">
  <div class="windi-7831z4">
    <div class="windi-x3f008">
      <p class="windi-2lluw6">
        Erin Lindford
      </p>
      <p class="windi-1caa1b7">
        Product Engineer
      </p>
    </div>
    <button class="windi-d2pog2">Message</button>
  </div>
</div>

使用归因模式

您可以将属性模式与解释模式或编译模式结合使用。

windicss './**/*.html' -ato windi.css
windicss './**/*.html' -atom windi.min.css
windicss './**/*.html' -ato windi.css --minify
windicss './test.html' --attributify --preflight --output windi.css
windicss './test.html' --attributify --compile --preflight --output windi.css

例如

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

传递一个配置文件

通过 -f 或 --config 参数传递配置文件，目前仅支持 js 配置文件。

windicss './**/*.html' -to windi.css --config windi.config.js

例如

​windi.config.js​

module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: '#1c1c1e',
      },
      // ...
    },
  },
}

开发模式

开发模式将开启热重载，并会观察您的文件更改以实时更新您的 CSS 文件。

windicss './**/*.html' -to windi.css --dev

注意：为了获得更好的热加载体验（~5ms），我们不会在开发时删除构建的 CSS，因此您应该在发布时使用最小化命令重建一次，以获得最佳的开发和构建体验。比如 ​windicss './**/*.html' -mto windi.css​

模糊模式

默认情况下 windi 匹配传入文件中的 class/className='...'，如果您的文件类型不匹配，您可以打开此选项。它将匹配文件中包含的所有可能的 windi 实用程序

windicss './**/*.html' -to windi.css --dev --fuzzy

您还可以为特定文件类型配置提取器

​windi.config.js​

module.exports = {
  // ...
  extract: {
    extractors: [
      {
        extractor: (content) => {
          return { classes: content.match(/(?<=class:)[!@\w-]+/g) ?? [] }
        },
        extensions: ['svelte'],
      },
    ],
  },
  // ...
}

样式块

要启用样式块，您需要使用 --style arg。

windicss './**/*.html' -to windi.css --dev --style

像这样定义样式块：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>cli</title>
  <link rel="stylesheet" href="windi.css">
  <style lang='windi'>
    .btn-blue {
      @apply bg-blue-500 hover:bg-blue-700 text-white;
      padding-top: 1rem;
    }
  </style>
</head>