Windi CSS CLI

安裝

添加包：

npm i -g windicss

用法

打印幫助信息

windicss --help  // windicss -h

應(yīng)該像下面這樣打印幫助信息。

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.

初始測(cè)試項(xiàng)目

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

文件名

[filenames] 參數(shù)可以包含文件路徑和 glob 模式（由 node-glob 提供支持）。

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

編譯 CSS 文件

生成普通的css

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

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

最小化構(gòu)建

使用 -m 或 --minify 生成最小化的 CSS 文件。此參數(shù)主要用于構(gòu)建時(shí)間。

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

使用編譯模式

編譯模式會(huì)將所有 windi 實(shí)用程序組合到一個(gè)新類中，您可以使用 -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>

使用歸因模式

您可以將屬性模式與解釋模式或編譯模式結(jié)合使用。

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>

傳遞一個(gè)配置文件

通過 -f 或 --config 參數(shù)傳遞配置文件，目前僅支持 js 配置文件。

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

例如

?windi.config.js?

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

開發(fā)模式

開發(fā)模式將開啟熱重載，并會(huì)觀察您的文件更改以實(shí)時(shí)更新您的 CSS 文件。

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

注意：為了獲得更好的熱加載體驗(yàn)（~5ms），我們不會(huì)在開發(fā)時(shí)刪除構(gòu)建的 CSS，因此您應(yīng)該在發(fā)布時(shí)使用最小化命令重建一次，以獲得最佳的開發(fā)和構(gòu)建體驗(yàn)。比如 ?windicss './**/*.html' -mto windi.css?

模糊模式

默認(rèn)情況下 windi 匹配傳入文件中的 class/className='...'，如果您的文件類型不匹配，您可以打開此選項(xiàng)。它將匹配文件中包含的所有可能的 windi 實(shí)用程序

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>