Пресет Wind4

Компактный пресет Tailwind4 CSS для UnoCSS. Совместим со всеми функциями PresetWind3 и расширяет его еще больше.

Исходный код

TIP

Вы можете уделить немного времени, чтобы прочитать этот документ и понять изменения

Установка

pnpm

pnpm add -D @unocss/preset-wind4

yarn

yarn add -D @unocss/preset-wind4

npm

npm install -D @unocss/preset-wind4

bun

bun add -D @unocss/preset-wind4

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    //  ^?
  ],
})

Совместимость

Обратитесь к Совместимости Tailwind, чтобы узнать о поддержке браузеров и совместимости.

Тема

Тема PresetWind4 почти идентична теме PresetWind3, но некоторые ключи темы были скорректированы.

WARNING

Обратите внимание при переходе на PresetWind4, обратитесь к таблице ниже, чтобы проверить конфигурацию ключей темы и внести соответствующие корректировки.

PresetWind3	PresetWind4
fontFamily	font
fontSize	Перемещен в свойство fontSize в text
lineHeight	Перемещен в свойство lineHeight в text или использовать leading
letterSpacing	Перемещен в свойство letterSpacing в text или использовать tracking
borderRadius	radius
easing	ease
breakpoints	breakpoint
verticalBreakpoints	verticalBreakpoint
boxShadow	shadow
-	insetShadow
Свойства размера, такие как width, height, maxWidth, maxHeight, minWidth, minHeight	Унифицированы для использования spacing
transitionProperty	property
gridAutoColumn, gridAutoRow, gridColumn, gridRow, gridTemplateColumn, gridTemplateRow	-
container.maxWidth	containers.maxWidth
-	defaults

Theme.defaults

Theme.defaults - это глобальная конфигурация темы по умолчанию, которая будет применяться к стилям reset или использоваться в качестве значений по умолчанию для определенных правил.

Ниже приведены значения по умолчанию для Theme.defaults, которые вы можете переопределить в конфигурации темы.

Нажмите, чтобы просмотреть значения по умолчанию

import type { Theme } from '@unocss/preset-wind4/theme'

export const defaults: Theme['defaults'] = {
  transition: {
    duration: '150ms',
    timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
  },
  font: {
    family: 'var(--font-sans)',
    featureSettings: 'var(--font-sans--font-feature-settings)',
    variationSettings: 'var(--font-sans--font-variation-settings)',
  },
  monoFont: {
    family: 'var(--font-mono)',
    featureSettings: 'var(--font-mono--font-feature-settings)',
    variationSettings: 'var(--font-mono--font-variation-settings)',
  },
}

Параметры

Базовая конфигурация PresetWind4 похожа на PresetWind3, со следующими важными изменениями.

Стили сброса

В PresetWind4 мы выравниваем стили сброса с tailwind4 и интегрируем их внутренне. Вам не нужно устанавливать дополнительный пакет CSS-сброса, такой как @unocss/reset или normalize.css.

import '@unocss/reset/tailwind.css'
import '@unocss/reset/tailwind-compact.css'

Вам нужно только контролировать включение стилей сброса через переключатель:

import presetWind4 from '@unocss/preset-wind4'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      reset: true, 
      // ^?
    }),
  ],
})

Резолвер утилит

В PresetWind4 мы обновили хук postProcess, чтобы предоставить более лаконичный API. Теперь вы можете напрямую настраивать utilities в пресете.

Например, если вы хотите использовать пресет presetRemToPx для преобразования rem в px, вам больше не нужно импортировать этот пресет отдельно, так как presetWind4 предоставляет эту функциональность внутренне.

import { createRemToPxResolver } from '@unocss/preset-wind4/utils'
import { defineConfig, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4({
      utilityResolver: createRemToPxResolver() 
    }),
  ],
})

Вы можете настроить больше наборов резолверов для обработки utilities и вывода нужного вам CSS.

Для конкретных методов реализации обратитесь к postProcess или тестовому случаю presetWind4

Префайл темы

Выберите, как генерировать CSS-переменные темы.

Движок UnoCSS с установленным presetWind4 автоматически собирает зависимости темы при разборе утилит и генерирует CSS-переменные в конце.

• true: Полностью генерировать ключи темы.
• false: Отключить ключи темы. (Не рекомендуется ⚠️)
• 'on-demand': Генерировать ключи темы только при использовании. -> ✅ (По умолчанию)

Сгенерированный CSS

В выводе PresetWind4 добавлены два новых слоя: theme и cssvar-property.

Название слоя	Описание	порядок
cssvar-property	CSS-свойства, определенные @property	-200
theme	CSS-переменные, связанные с темой	-150

Слой cssvar-property

Мы использовали @property для определения CSS-свойств во многих правилах для достижения лучшей производительности и меньшего размера.

Например, часто используемые утилиты, такие как text-op-xx, bg-op-xx и т.д.

@property --un-text-opacity {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

Слой theme

Мы разместили CSS-переменные, связанные с темой, в слое theme, чтобы вам было легче переопределять и использовать их напрямую. Он может быть всеобъемлющим или по требованию. Всегда исходит из вашей конфигурации темы.

:root,
:host {
  --spacing: 0.25rem;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --colors-black: #000;
  --colors-white: #fff;
  /* ... */
}

Совместимость с другими пресетами

PresetWind4 улучшает и совместим с PresetWind3. Поскольку другие пакеты изначально были разработаны для PresetWind3, при их совместном использовании могут возникнуть некоторые проблемы. Известные проблемы включают:

presetWebFonts

При использовании presetWebFonts с PresetWind4 ключ темы fontFamily больше не поддерживается. Пожалуйста, внесите следующие изменения:

import { defineConfig, presetWebFonts, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetWind4(),
    presetWebFonts({
      themeKey: 'font', 
      // ^?
    }),
  ],
})

presetLegacyCompat

В presetWind4 мы используем цветовую модель oklch для поддержки лучшей цветовой контрастности и восприятия цвета. Поэтому он не совместим с presetLegacyCompat и не рекомендуется для совместного использования.

Пожалуйста, обратитесь к разделу Совместимость для получения дополнительной информации.

transformDirectives

transformDirectives плохо работает с PresetWind4. Существуют некоторые известные проблемы, поэтому используйте его с осторожностью.

WARNING

• Когда используется @apply для обработки правил, которые имеют @property, могут возникнуть конфликты между различными уровнями.