Logo Windi CSS

Windi CSS CLI

Установка

Добавить пакет:

npm i -g windicss

Применение

Вывести справочное сообщение 

windicss --help  // windicss -h

should print the help message like bellow.


Сгенерируйте CSS из текстовых файлов, содержащих классы windi.
По умолчанию он будет использовать режим интерпретации для создания одного файла css.

Применение:
  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]

Параметры:
  -h, --help            Распечатайте это справочное сообщение и выйдите.
  -v, --version         Распечатать текущую версию windicss и выйти.

  -i, --interpret       Режим интерпретации, сгенерируйте селекторы классов. Это поведение по умолчанию.
  -c, --compile         Режим компиляции, объедините имя класса в каждой строке в один класс.
  -a, --attributify     Режим атрибуции, создание селекторов атрибутов. Режим атрибуции можно смешивать с двумя другими режимами.
  -t, --preflight       Добавить предполетные рейсы, по умолчанию - false.

  -b, --combine         Объедините все CSS в один файл. Это поведение по умолчанию.
  -s, --separate        Создайте отдельный файл css для каждого входного файла.

  -d, --dev             Включить горячую перезагрузку и режим просмотра.
  -m, --minify          Создать минимизированный файл css.
  -z, --fuzzy           Включить нечеткое совпадение, работает только в режиме интерполяции.
  -p, --prefix PREFIX   Установите префикс имени класса css, действителен только в режиме компиляции. Префикс по умолчанию 'windi-'.
  -o, --output PATH     Установить путь к выходному файлу css.
  -f, --config PATH     Установить путь к файлу конфигурации.

  --style               Разбор и преобразование блока стиля windi.
  --init PATH           Начать новый проект по пути.

Первоначальный тестовый проект 

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

Имена файлов

Параметр [filenames] может включать пути к файлам и шаблоны глобусов (на основе node-glob).

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

Скомпилировать файл CSS

Создать нормальный CSS

Используйте параметр -o, чтобы указать имя сгенерированного файла css, и параметр -t, чтобы указать, следует ли добавлять предварительную проверку (базовые стили).

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">
        Эрин Линдфорд
      </p>
      <p class="windi-1caa1b7">
        Инженер по продукту
      </p>
    </div>
    <button class="windi-d2pog2">Сообщение</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>

Передайте файл конфигурации

Передайте файл конфигурации с параметром -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

Примечание. Для лучшего опыта горячей загрузки (~ 5мс) мы не удаляем встроенный CSS во время разработки, поэтому ожидается, что вы перестроите его один раз во время выпуска, используя команду минимизации, чтобы получить лучший опыт как при разработке, так и при сборке. Например, windicss './**/*.html' -mto windi.css

Нечеткий режим

По умолчанию windi соответствует class/className='...' во входящих файлах, если ваш тип файла не совпадает, вы можете включить эту опцию. Он будет соответствовать всем возможным утилитам windi, содержащимся в файле

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

Вы также можете настроить экстракторы extractors для определенных типов файлов

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

Блок стилей

Чтобы включить блокировку стилей, вам нужно использовать аргумент --style.

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>