Konfiguracja UnoCSS

Konfiguracja

Konfiguracje są tym, co czyni UnoCSS potężnym.

• Reguły - Definiowanie narzędzi atomic CSS
• Skróty - Łączenie wielu reguł w pojedynczy skrót.
• Motyw - Definiowanie zmiennych motywu.
• Warianty - Stosowanie niestandardowych konwencji do reguł.
• Ekstraktory - Definiowanie gdzie i jak użycia narzędzi są ekstrahowane.
• Preflights - Definiowanie globalnego surowego CSS.
• Warstwy - Definiowanie kolejności każdej warstwy narzędzi.
• Presety - Predefiniowane konfiguracje dla typowych przypadków użycia.
• Transformery - Transformatory kodu do obsługi konwencji kodu źródłowego.
• Autouzupełnianie - Definiowanie niestandardowych sugestii autouzupełniania.

Opcje

rules

• Typ: Rule<Theme>[]

Reguły do generowania narzędzi CSS. Późniejsze wpisy mają wyższy priorytet.

shortcuts

• Typ: UserShortcuts<Theme>

Podobnie jak skróty w Windi CSS, pozwala tworzyć nowe narzędzia łącząc istniejące. Późniejsze wpisy mają wyższy priorytet.

theme

• Typ: Theme

Obiekt motywu dla wspólnej konfiguracji między regułami.

extendTheme

• Typ: Arrayable<ThemeExtender<Theme>> Niestandardowe funkcje mutujące obiekt motywu.

Możliwe jest również zwrócenie nowego obiektu motywu, aby całkowicie zastąpić oryginalny.

variants

• Typ: Variant<Theme>[]

Warianty, które wstępnie przetwarzają selektory, mając zdolność do przepisywania obiektu CSS.

extractors

• Typ: Extractor[]

Ekstraktory do obsługi pliku źródłowego i wyprowadzania możliwych klas/selektorów. Mogą być świadome języka.

preflights

• Typ: Preflight<Theme>[]

Wstrzykiwanie surowego CSS.

layers

• Typ: Record<string, number>

Kolejność warstw. Domyślnie 0.

outputToCssLayers

• Typ: boolean | UseCssLayersOptions
• Domyślnie: false

Wyprowadza warstwy do CSS Cascade Layers.

cssLayerName

• Typ: (internalLayer: string) => string | undefined | null

Określa nazwę warstwy CSS, do której warstwa wewnętrzna powinna być wyprowadzana (może być podwarstwą np. "mylayer.mysublayer").

Jeśli zwrócone zostanie undefined, nazwa warstwy wewnętrznej zostanie użyta jako nazwa warstwy CSS. Jeśli zwrócone zostanie null, warstwa wewnętrzna nie zostanie wyprowadzona do warstwy CSS.

sortLayers

• Typ: (layers: string[]) => string[]

Niestandardowa funkcja do sortowania warstw.

presets

• Typ: (PresetOrFactory<Theme> | PresetOrFactory<Theme>[])[]

Predefiniowane konfiguracje dla typowych przypadków użycia.

transformers

• Typ: SourceCodeTransformer[]

Niestandardowe transformatory kodu źródłowego.

blocklist

• Typ: BlocklistRule[]

Reguły do wykluczania selektorów dla Twojego systemu designu (aby zawęzić możliwości). Połączenie opcji warnExcluded może również pomóc zidentyfikować błędne użycia.

safelist

• Typ: string[]

Narzędzia, które są zawsze dołączone.

preprocess

• Typ: Arrayable<Preprocessor>

Wstępne przetwarzanie przychodzących narzędzi, zwrócenie wartości falsy, aby wykluczyć.

postprocess

• Typ: Arrayable<Postprocessor>

Końcowe przetwarzanie wygenerowanych obiektów narzędzi.

separators

• Typ: Arrayable<string>
• Domyślnie: [':', '-']

Separator wariantów.

extractorDefault

• Typ: Extractor | null | false
• Domyślnie: import('@unocss/core').defaultExtractor

Domyślny ekstraktor, który jest zawsze stosowany. Domyślnie dzieli kod źródłowy przez białe znaki i cudzysłowy.

Może być zastąpiony przez preset lub konfigurację użytkownika, może być obecny tylko jeden domyślny ekstraktor, późniejszy zastąpi poprzedni.

Przekaż null lub false, aby wyłączyć domyślny ekstraktor.

autocomplete

Dodatkowe opcje autouzupełniania.

templates

• Typ: Arrayable<AutoCompleteFunction | AutoCompleteTemplate>

Niestandardowe funkcje / szablony do dostarczania sugestii autouzupełniania.

extractors

• Typ: Arrayable<AutoCompleteExtractor>

Niestandardowe ekstraktory do pobierania możliwych klas i przekształcania sugestii stylu nazwy klasy do poprawnego formatu.

shorthands

• Typ: Record<string, string | string[]>

Niestandardowe skróty do dostarczania sugestii autouzupełniania. jeśli wartości są tablicą, zostaną połączone z | i opakowane przez ().

content

Opcje dla źródeł do ekstrahowania jako użycia narzędzi.

Obsługiwane źródła:

• filesystem - ekstrahowanie z systemu plików
• inline - ekstrahowanie z plain text inline
• pipeline - ekstrahowanie z pipeline narzędzi budowania, takich jak Vite i Webpack

Użycia ekstrahowane z każdego źródła zostaną połączone razem.

filesystem

• Typ: string[]
• Domyślnie: []

Wzorce glob do ekstrahowania z systemu plików, oprócz innych źródeł zawartości.

W trybie dev pliki będą obserwowane i wyzwalać HMR.

inline

• Typ: string | { code: string; id?: string } | (() => Awaitable<string | { code: string; id?: string }>)) []

Inline tekst do ekstrahowania.

pipeline

Filtry do określenia, czy ekstrahować określone moduły z pipeline transformacji narzędzi budowania.

Obecnie działa tylko dla integracji Vite i Webpack.

Ustaw false, aby wyłączyć.

include

• Typ: FilterPattern
• Domyślnie: [/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/]

Wzorce filtrujące pliki ekstrahowane. Obsługuje wyrażenia regularne i wzorce glob picomatch.

Domyślnie pliki .ts i .js NIE są ekstrahowane.

exclude

• Typ: FilterPattern
• Domyślnie: [/\.(css|postcss|sass|scss|less|stylus|styl)($|\?)/]

Wzorce filtrujące pliki NIE ekstrahowane. Obsługuje wyrażenia regularne i wzorce glob picomatch.

Domyślnie node_modules i dist są również ekstrahowane.

configResolved

• Typ: (config: ResolvedConfig) => void

Hook do modyfikowania rozwiązanej konfiguracji.

Najpierw działają presety, a potem konfiguracja użytkownika.

configFile

• Typ: string | false

Ładowanie z plików konfiguracyjnych.

Ustaw false, aby wyłączyć.

configDeps

• Typ: string[]

Lista plików, które również wyzwolą przeładowanie konfiguracji.

cli

Opcje CLI UnoCSS.

entry

• Typ: Arrayable<CliEntryItem>

Punkty wejścia CLI UnoCSS.

patterns

• Typ: string[]

Wzorce glob do ekstrahowania z systemu plików.

outFile

• Typ: string

Ścieżka pliku wyjściowego.

shortcutsLayer

• Typ: string
• Domyślnie: 'shortcuts'

Nazwa warstwy skrótów.

• Type: 'dev' | 'build'
• Default: 'build'

Environment mode.

details

• Type: boolean

Expose internal details for debugging / inspecting.

warn

• Type: boolean
• Default: true

Emit warning when matched selectors are presented in blocklist.