From 94672d75b1fe208766a3490b92f8b013f65dc2cf Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Mon, 30 May 2022 11:58:26 +0800 Subject: [PATCH] fix(preset-wind): rework base of `transform`, `filter`, `backdrop-filter` (#1028) --- packages/core/src/config.ts | 1 + packages/preset-mini/src/index.ts | 3 + packages/preset-mini/src/preflights.ts | 14 ++ packages/preset-mini/src/rules/transform.ts | 130 +++++++----------- packages/preset-mini/src/theme/default.ts | 2 + packages/preset-mini/src/theme/index.ts | 1 + packages/preset-mini/src/theme/preflight.ts | 5 + packages/preset-mini/src/theme/types.ts | 3 + packages/preset-uno/src/index.ts | 2 + packages/preset-web-fonts/src/index.ts | 2 +- packages/preset-wind/src/index.ts | 4 +- packages/preset-wind/src/rules/filters.ts | 89 ++++-------- packages/preset-wind/src/theme.ts | 7 + playground/src/auto-imports.d.ts | 13 +- test/__snapshots__/cli.test.ts.snap | 8 +- test/__snapshots__/order.test.ts.snap | 4 +- test/__snapshots__/postprocess.test.ts.snap | 5 +- test/__snapshots__/prefix.test.ts.snap | 8 +- .../preset-attributify.test.ts.snap | 24 ++-- test/__snapshots__/preset-icons.test.ts.snap | 8 +- test/__snapshots__/preset-mini.test.ts.snap | 59 ++------ .../preset-prefixes.test.ts.snap | 8 +- .../preset-typography.test.ts.snap | 33 +++-- .../preset-web-fonts.test.ts.snap | 4 +- test/__snapshots__/preset-wind.test.ts.snap | 67 +-------- test/__snapshots__/runtime.test.ts.snap | 10 +- test/__snapshots__/scope.test.ts.snap | 4 +- test/__snapshots__/shortcuts.test.ts.snap | 75 ++++++++-- .../transformer-directives.test.ts.snap | 64 --------- test/blocklist.test.ts | 6 +- test/preset-icons.test.ts | 4 +- test/preset-mini.test.ts | 2 +- test/preset-tagify.test.ts | 8 +- test/preset-uno.test.ts | 10 +- test/transformer-compile-class.test.ts | 7 +- 35 files changed, 306 insertions(+), 388 deletions(-) create mode 100644 packages/preset-mini/src/preflights.ts create mode 100644 packages/preset-mini/src/theme/preflight.ts diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts index 444c29c50c..f7e25923e8 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.ts @@ -11,6 +11,7 @@ export function resolveShortcuts(shortcuts: UserShortcuts): Shortcut[] { } const defaultLayers = { + preflights: -100, shortcuts: -1, default: 0, } diff --git a/packages/preset-mini/src/index.ts b/packages/preset-mini/src/index.ts index 0a830479ff..985c5f7c87 100644 --- a/packages/preset-mini/src/index.ts +++ b/packages/preset-mini/src/index.ts @@ -1,9 +1,11 @@ import type { Postprocessor, Preset, PresetOptions } from '@unocss/core' +import { preflights } from './preflights' import { rules } from './rules' import type { Theme, ThemeAnimation } from './theme' import { theme } from './theme' import { variants } from './variants' +export { preflights } from './preflights' export { theme, colors } from './theme' export { parseColor } from './utils' @@ -37,6 +39,7 @@ export const presetMini = (options: PresetMiniOptions = {}): Preset => { postprocess: options.variablePrefix && options.variablePrefix !== 'un-' ? VarPrefixPostprocessor(options.variablePrefix) : undefined, + preflights, } } diff --git a/packages/preset-mini/src/preflights.ts b/packages/preset-mini/src/preflights.ts new file mode 100644 index 0000000000..57158dd124 --- /dev/null +++ b/packages/preset-mini/src/preflights.ts @@ -0,0 +1,14 @@ +import type { Preflight, PreflightContext } from '@unocss/core' +import { entriesToCss } from '@unocss/core' +import type { Theme } from './theme' + +export const preflights: Preflight[] = [ + { + layer: 'preflights', + getCSS(ctx: PreflightContext) { + if (ctx.theme.preflightBase) + return `*,::before,::after{${entriesToCss(Object.entries(ctx.theme.preflightBase))}}` + }, + }, +] + diff --git a/packages/preset-mini/src/rules/transform.ts b/packages/preset-mini/src/rules/transform.ts index 86bcf77f44..3d4e84c057 100644 --- a/packages/preset-mini/src/rules/transform.ts +++ b/packages/preset-mini/src/rules/transform.ts @@ -1,41 +1,37 @@ import type { CSSValues, Rule, RuleContext } from '@unocss/core' -import { CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core' import type { Theme } from '../theme' -import { CONTROL_MINI_NO_NEGATIVE, handler as h, positionMap, xyzMap } from '../utils' +import { handler as h, positionMap, xyzMap } from '../utils' -const transformGpu = { - '--un-transform': [ - 'translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))', - 'rotate(var(--un-rotate))', - 'rotateX(var(--un-rotate-x))', - 'rotateY(var(--un-rotate-y))', - 'rotateZ(var(--un-rotate-z))', - 'skewX(var(--un-skew-x))', - 'skewY(var(--un-skew-y))', - 'scaleX(var(--un-scale-x))', - 'scaleY(var(--un-scale-y))', - 'scaleZ(var(--un-scale-z))', - ].join(' '), -} +const transformCpu = [ + 'translateX(var(--un-translate-x))', + 'translateY(var(--un-translate-y))', + 'translateZ(var(--un-translate-z))', + 'rotate(var(--un-rotate))', + 'rotateX(var(--un-rotate-x))', + 'rotateY(var(--un-rotate-y))', + 'rotateZ(var(--un-rotate-z))', + 'skewX(var(--un-skew-x))', + 'skewY(var(--un-skew-y))', + 'scaleX(var(--un-scale-x))', + 'scaleY(var(--un-scale-y))', + 'scaleZ(var(--un-scale-z))', +].join(' ') -const transformCpu = { - '--un-transform': [ - 'translateX(var(--un-translate-x))', - 'translateY(var(--un-translate-y))', - 'translateZ(var(--un-translate-z))', - 'rotate(var(--un-rotate))', - 'rotateX(var(--un-rotate-x))', - 'rotateY(var(--un-rotate-y))', - 'rotateZ(var(--un-rotate-z))', - 'skewX(var(--un-skew-x))', - 'skewY(var(--un-skew-y))', - 'scaleX(var(--un-scale-x))', - 'scaleY(var(--un-scale-y))', - 'scaleZ(var(--un-scale-z))', - ].join(' '), -} +const transformGpu = [ + 'translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z))', + 'rotate(var(--un-rotate))', + 'rotateX(var(--un-rotate-x))', + 'rotateY(var(--un-rotate-y))', + 'rotateZ(var(--un-rotate-z))', + 'skewX(var(--un-skew-x))', + 'skewY(var(--un-skew-y))', + 'scaleX(var(--un-scale-x))', + 'scaleY(var(--un-scale-y))', + 'scaleZ(var(--un-scale-z))', +].join(' ') -const transformBase = { +export const transformBase = { + // transform '--un-rotate': 0, '--un-rotate-x': 0, '--un-rotate-y': 0, @@ -48,9 +44,7 @@ const transformBase = { '--un-translate-x': 0, '--un-translate-y': 0, '--un-translate-z': 0, - ...transformCpu, - [CONTROL_SHORTCUT_NO_MERGE]: '', - [CONTROL_MINI_NO_NEGATIVE]: '', + '--un-transform': transformCpu, } export const transforms: Rule[] = [ @@ -93,12 +87,9 @@ export const transforms: Rule[] = [ [/^(?:transform-)?preserve-flat$/, () => ({ 'transform-style': 'flat' })], // base - [/^transform$/, () => [ - transformBase, - { transform: 'var(--un-transform)' }, - ]], - ['transform-gpu', transformGpu], - ['transform-cpu', transformCpu], + ['transform', { transform: 'var(--un-transform)' }], + ['transform-cpu', { transform: 'var(--un-transform)' }], + ['transform-gpu', { transform: transformGpu }], ['transform-none', { transform: 'none' }], ] @@ -106,11 +97,8 @@ function handleTranslate([, d, b]: string[], { theme }: RuleContext): CSS const v = theme.spacing?.[b] ?? h.bracket.cssvar.fraction.rem(b) if (v != null) { return [ - transformBase, - [ - ...xyzMap[d].map((i): [string, string] => [`--un-translate${i}`, v]), - ['transform', 'var(--un-transform)'], - ], + ...xyzMap[d].map((i): [string, string] => [`--un-translate${i}`, v]), + ['transform', 'var(--un-transform)'], ] } } @@ -119,11 +107,8 @@ function handleScale([, d, b]: string[]): CSSValues | undefined { const v = h.bracket.cssvar.fraction.percent(b) if (v != null) { return [ - transformBase, - [ - ...xyzMap[d].map((i): [string, string] => [`--un-scale${i}`, v]), - ['transform', 'var(--un-transform)'], - ], + ...xyzMap[d].map((i): [string, string] => [`--un-scale${i}`, v]), + ['transform', 'var(--un-transform)'], ] } } @@ -132,26 +117,20 @@ function handleRotate([, d = '', b]: string[]): CSSValues | undefined { const v = h.bracket.cssvar.degree(b) if (v != null) { if (d) { - return [ - transformBase, - { - '--un-rotate': 0, - [`--un-rotate-${d}`]: v, - 'transform': 'var(--un-transform)', - }, - ] + return { + '--un-rotate': 0, + [`--un-rotate-${d}`]: v, + 'transform': 'var(--un-transform)', + } } else { - return [ - transformBase, - { - '--un-rotate-x': 0, - '--un-rotate-y': 0, - '--un-rotate-z': 0, - '--un-rotate': v, - 'transform': 'var(--un-transform)', - }, - ] + return { + '--un-rotate-x': 0, + '--un-rotate-y': 0, + '--un-rotate-z': 0, + '--un-rotate': v, + 'transform': 'var(--un-transform)', + } } } } @@ -159,12 +138,9 @@ function handleRotate([, d = '', b]: string[]): CSSValues | undefined { function handleSkew([, d, b]: string[]): CSSValues | undefined { const v = h.bracket.cssvar.degree(b) if (v != null) { - return [ - transformBase, - { - [`--un-skew-${d}`]: v, - transform: 'var(--un-transform)', - }, - ] + return { + [`--un-skew-${d}`]: v, + transform: 'var(--un-transform)', + } } } diff --git a/packages/preset-mini/src/theme/default.ts b/packages/preset-mini/src/theme/default.ts index 33fffc71fc..ccb4bd83be 100644 --- a/packages/preset-mini/src/theme/default.ts +++ b/packages/preset-mini/src/theme/default.ts @@ -4,6 +4,7 @@ import { borderRadius, boxShadow, breakpoints, duration, easing, lineWidth, ring import { blur, dropShadow } from './filters' import { height, maxHeight, maxWidth, width } from './size' import type { Theme } from './types' +import { preflightBase } from './preflight' export const theme: Theme = { width, @@ -38,4 +39,5 @@ export const theme: Theme = { spacing, duration, ringWidth, + preflightBase, } diff --git a/packages/preset-mini/src/theme/index.ts b/packages/preset-mini/src/theme/index.ts index 9dd7cb679d..4ae91615e5 100644 --- a/packages/preset-mini/src/theme/index.ts +++ b/packages/preset-mini/src/theme/index.ts @@ -5,4 +5,5 @@ export * from './filters' export * from './font' export * from './misc' export * from './size' +export * from './preflight' export * from './types' diff --git a/packages/preset-mini/src/theme/preflight.ts b/packages/preset-mini/src/theme/preflight.ts new file mode 100644 index 0000000000..e45f0c3f79 --- /dev/null +++ b/packages/preset-mini/src/theme/preflight.ts @@ -0,0 +1,5 @@ +import { transformBase } from '../rules' + +export const preflightBase = { + ...transformBase, +} diff --git a/packages/preset-mini/src/theme/types.ts b/packages/preset-mini/src/theme/types.ts index fd8ca4b8a0..12e1e846be 100644 --- a/packages/preset-mini/src/theme/types.ts +++ b/packages/preset-mini/src/theme/types.ts @@ -51,4 +51,7 @@ export interface Theme { gridRow?: Record gridTemplateColumn?: Record gridTemplateRow?: Record + // vars + /** Used to generate CSS variables placeholder in preflight */ + preflightBase?: Record } diff --git a/packages/preset-uno/src/index.ts b/packages/preset-uno/src/index.ts index c467bbbb55..fc43892a92 100644 --- a/packages/preset-uno/src/index.ts +++ b/packages/preset-uno/src/index.ts @@ -1,6 +1,7 @@ import type { Preset } from '@unocss/core' import type { PresetMiniOptions, Theme } from '@unocss/preset-mini' import { rules, shortcuts, theme, variants } from '@unocss/preset-wind' +import { preflights } from '@unocss/preset-mini' import { variantColorMix } from './variants/mix' export type { Theme } @@ -21,6 +22,7 @@ export const presetUno = (options: PresetUnoOptions = {}): Preset => { variantColorMix, ], options, + preflights, } } diff --git a/packages/preset-web-fonts/src/index.ts b/packages/preset-web-fonts/src/index.ts index b97d6dfc2b..e98ed7302e 100644 --- a/packages/preset-web-fonts/src/index.ts +++ b/packages/preset-web-fonts/src/index.ts @@ -67,7 +67,7 @@ const preset = (options: WebFontsOptions = {}): Preset => { const preset: Preset = { name: '@unocss/preset-web-fonts', layers: { - [layerName]: -Infinity, + [layerName]: -20, }, preflights: [ { diff --git a/packages/preset-wind/src/index.ts b/packages/preset-wind/src/index.ts index 3d0ce1b1fd..b0923b57cd 100644 --- a/packages/preset-wind/src/index.ts +++ b/packages/preset-wind/src/index.ts @@ -1,11 +1,12 @@ import type { Preset } from '@unocss/core' import type { PresetMiniOptions, Theme } from '@unocss/preset-mini' +import { preflights } from '@unocss/preset-mini' import { rules } from './rules' import { shortcuts } from './shortcuts' import { theme } from './theme' import { variants } from './variants' -export { colors } from '@unocss/preset-mini' +export { colors, preflights } from '@unocss/preset-mini' export type { Theme } from '@unocss/preset-mini' @@ -24,6 +25,7 @@ export const presetWind = (options: PresetWindOptions = {}): Preset => { shortcuts, variants: variants(options), options, + preflights, } } diff --git a/packages/preset-wind/src/rules/filters.ts b/packages/preset-wind/src/rules/filters.ts index 0b2ff7924b..90dad382e9 100644 --- a/packages/preset-wind/src/rules/filters.ts +++ b/packages/preset-wind/src/rules/filters.ts @@ -1,10 +1,9 @@ import type { CSSValues, Rule, RuleContext } from '@unocss/core' -import { CONTROL_SHORTCUT_NO_MERGE } from '@unocss/core' import type { Theme } from '@unocss/preset-mini' import { colorResolver, colorableShadows, handler as h } from '@unocss/preset-mini/utils' import { varEmpty } from '@unocss/preset-mini/rules' -const filterBase = { +export const filterBase = { '--un-blur': varEmpty, '--un-brightness': varEmpty, '--un-contrast': varEmpty, @@ -15,10 +14,9 @@ const filterBase = { '--un-saturate': varEmpty, '--un-sepia': varEmpty, '--un-filter': 'var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia)', - [CONTROL_SHORTCUT_NO_MERGE]: '', } -const backdropFilterBase = { +export const backdropFilterBase = { '--un-backdrop-blur': varEmpty, '--un-backdrop-brightness': varEmpty, '--un-backdrop-contrast': varEmpty, @@ -29,7 +27,6 @@ const backdropFilterBase = { '--un-backdrop-saturate': varEmpty, '--un-backdrop-sepia': varEmpty, '--un-backdrop-filter': 'var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia)', - [CONTROL_SHORTCUT_NO_MERGE]: '', } const percentWithDefault = (str?: string) => { @@ -47,23 +44,17 @@ const toFilter = (varName: string, resolver: (str: string, theme: Theme) => stri const value = resolver(s, theme) ?? (s === 'none' ? '0' : '') if (value !== '') { if (b) { - return [ - backdropFilterBase, - { - [`--un-${b}${varName}`]: `${varName}(${value})`, - '-webkit-backdrop-filter': 'var(--un-backdrop-filter)', - 'backdrop-filter': 'var(--un-backdrop-filter)', - }, - ] + return { + [`--un-${b}${varName}`]: `${varName}(${value})`, + '-webkit-backdrop-filter': 'var(--un-backdrop-filter)', + 'backdrop-filter': 'var(--un-backdrop-filter)', + } } else { - return [ - filterBase, - { - [`--un-${varName}`]: `${varName}(${value})`, - filter: 'var(--un-filter)', - }, - ] + return { + [`--un-${varName}`]: `${varName}(${value})`, + filter: 'var(--un-filter)', + } } } } @@ -72,24 +63,18 @@ const dropShadowResolver = ([, s]: string[], { theme }: RuleContext) => { let v = theme.dropShadow?.[s || 'DEFAULT'] if (v != null) { const shadows = colorableShadows(v, '--un-drop-shadow-color') - return [ - filterBase, - { - '--un-drop-shadow': `drop-shadow(${shadows.join(') drop-shadow(')})`, - 'filter': 'var(--un-filter)', - }, - ] + return { + '--un-drop-shadow': `drop-shadow(${shadows.join(') drop-shadow(')})`, + 'filter': 'var(--un-filter)', + } } v = h.bracket.cssvar(s) if (v != null) { - return [ - filterBase, - { - '--un-drop-shadow': `drop-shadow(${v})`, - 'filter': 'var(--un-filter)', - }, - ] + return { + '--un-drop-shadow': `drop-shadow(${v})`, + 'filter': 'var(--un-filter)', + } } } @@ -110,36 +95,20 @@ export const filters: Rule[] = [ }], [/^(?:filter-)?drop-shadow-color-(.+)$/, colorResolver('--un-drop-shadow-color', 'drop-shadow')], [/^(?:filter-)?drop-shadow-color-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-drop-shadow-opacity': h.bracket.percent(opacity) })], - [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter('grayscale', percentWithDefault), { - autocomplete: ['(backdrop|filter)-grayscale', '(backdrop|filter)-grayscale-', 'grayscale-'], - }], + [/^(?:(backdrop-)|filter-)?grayscale(?:-(.+))?$/, toFilter('grayscale', percentWithDefault), { autocomplete: ['(backdrop|filter)-grayscale', '(backdrop|filter)-grayscale-', 'grayscale-'] }], [/^(?:(backdrop-)|filter-)?hue-rotate-(.+)$/, toFilter('hue-rotate', s => h.bracket.cssvar.degree(s))], - [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter('invert', percentWithDefault), { - autocomplete: ['(backdrop|filter)-invert', '(backdrop|filter)-invert-', 'invert-'], - }], + [/^(?:(backdrop-)|filter-)?invert(?:-(.+))?$/, toFilter('invert', percentWithDefault), { autocomplete: ['(backdrop|filter)-invert', '(backdrop|filter)-invert-', 'invert-'] }], // opacity only on backdrop-filter - [/^(backdrop-)op(?:acity)-(.+)$/, toFilter('opacity', s => h.bracket.cssvar.percent(s)), { - autocomplete: ['backdrop-(op|opacity)', 'backdrop-(op|opacity)-'], - }], - [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter('saturate', s => h.bracket.cssvar.percent(s)), { - autocomplete: ['(backdrop|filter)-saturate', '(backdrop|filter)-saturate-', 'saturate-'], - }], - [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter('sepia', percentWithDefault), { - autocomplete: ['(backdrop|filter)-sepia', '(backdrop|filter)-sepia-', 'sepia-'], - }], + [/^(backdrop-)op(?:acity)-(.+)$/, toFilter('opacity', s => h.bracket.cssvar.percent(s)), { autocomplete: ['backdrop-(op|opacity)', 'backdrop-(op|opacity)-'] }], + [/^(?:(backdrop-)|filter-)?saturate-(.+)$/, toFilter('saturate', s => h.bracket.cssvar.percent(s)), { autocomplete: ['(backdrop|filter)-saturate', '(backdrop|filter)-saturate-', 'saturate-'] }], + [/^(?:(backdrop-)|filter-)?sepia(?:-(.+))?$/, toFilter('sepia', percentWithDefault), { autocomplete: ['(backdrop|filter)-sepia', '(backdrop|filter)-sepia-', 'sepia-'] }], // base - [/^filter$/, () => [ - filterBase, - { filter: 'var(--un-filter)' }, - ]], - [/^backdrop-filter$/, () => [ - backdropFilterBase, - { - '-webkit-backdrop-filter': 'var(--un-backdrop-filter)', - 'backdrop-filter': 'var(--un-backdrop-filter)', - }, - ], { autocomplete: 'backdrop-filter' }], + ['filter', { filter: 'var(--un-filter)' }], + ['backdrop-filter', { + '-webkit-backdrop-filter': 'var(--un-backdrop-filter)', + 'backdrop-filter': 'var(--un-backdrop-filter)', + }], // nones ['filter-none', { filter: 'none' }], diff --git a/packages/preset-wind/src/theme.ts b/packages/preset-wind/src/theme.ts index 88b8d1875a..3a6f56e5e7 100644 --- a/packages/preset-wind/src/theme.ts +++ b/packages/preset-wind/src/theme.ts @@ -1,5 +1,7 @@ import type { Theme } from '@unocss/preset-mini' +import { transformBase } from '@unocss/preset-mini/rules' import { theme as miniTheme } from '@unocss/preset-mini/theme' +import { backdropFilterBase, filterBase } from './rules' export const theme: Theme = { ...miniTheme, @@ -172,4 +174,9 @@ export const theme: Theme = { mouse: '(hover) and (pointer: fine)', hd_color: '(dynamic-range: high)', }, + preflightBase: { + ...transformBase, + ...filterBase, + ...backdropFilterBase, + }, } diff --git a/playground/src/auto-imports.d.ts b/playground/src/auto-imports.d.ts index dd68b78bb0..11ac8f4b87 100644 --- a/playground/src/auto-imports.d.ts +++ b/playground/src/auto-imports.d.ts @@ -1,6 +1,7 @@ // Generated by 'unplugin-auto-import' -// We suggest you to commit this file into source control +export {} declare global { + const EffectScope: typeof import('vue')['EffectScope'] const asyncComputed: typeof import('@vueuse/core')['asyncComputed'] const autoResetRef: typeof import('@vueuse/core')['autoResetRef'] const computed: typeof import('vue')['computed'] @@ -24,7 +25,6 @@ declare global { const defineComponent: typeof import('vue')['defineComponent'] const eagerComputed: typeof import('@vueuse/core')['eagerComputed'] const effectScope: typeof import('vue')['effectScope'] - const EffectScope: typeof import('vue')['EffectScope'] const extendRef: typeof import('@vueuse/core')['extendRef'] const getCurrentInstance: typeof import('vue')['getCurrentInstance'] const getCurrentScope: typeof import('vue')['getCurrentScope'] @@ -117,8 +117,8 @@ declare global { const useDark: typeof import('@vueuse/core')['useDark'] const useDateFormat: typeof import('@vueuse/core')['useDateFormat'] const useDebounce: typeof import('@vueuse/core')['useDebounce'] - const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory'] const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn'] + const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory'] const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion'] const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation'] const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio'] @@ -196,8 +196,8 @@ declare global { const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList'] const useTextSelection: typeof import('@vueuse/core')['useTextSelection'] const useThrottle: typeof import('@vueuse/core')['useThrottle'] - const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory'] const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn'] + const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory'] const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo'] const useTimeout: typeof import('@vueuse/core')['useTimeout'] const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn'] @@ -208,10 +208,10 @@ declare global { const useTransition: typeof import('@vueuse/core')['useTransition'] const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams'] const useUserMedia: typeof import('@vueuse/core')['useUserMedia'] - const useVibrate: typeof import('@vueuse/core')['useVibrate'] - const useVirtualList: typeof import('@vueuse/core')['useVirtualList'] const useVModel: typeof import('@vueuse/core')['useVModel'] const useVModels: typeof import('@vueuse/core')['useVModels'] + const useVibrate: typeof import('@vueuse/core')['useVibrate'] + const useVirtualList: typeof import('@vueuse/core')['useVirtualList'] const useWakeLock: typeof import('@vueuse/core')['useWakeLock'] const useWebNotification: typeof import('@vueuse/core')['useWebNotification'] const useWebSocket: typeof import('@vueuse/core')['useWebSocket'] @@ -231,4 +231,3 @@ declare global { const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter'] const whenever: typeof import('@vueuse/core')['whenever'] } -export {} diff --git a/test/__snapshots__/cli.test.ts.snap b/test/__snapshots__/cli.test.ts.snap index c5506fce2d..7d54afad76 100644 --- a/test/__snapshots__/cli.test.ts.snap +++ b/test/__snapshots__/cli.test.ts.snap @@ -1,13 +1,17 @@ // Vitest Snapshot v1 exports[`cli > builds uno.css 1`] = ` -"/* layer: default */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: default */ .max-w-screen-md{max-width:768px;} .p-4{padding:1rem;}" `; exports[`cli > supports unocss.config.js 1`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .box{--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;} .box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0,0,0,0.05));box-shadow:var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow);}" `; diff --git a/test/__snapshots__/order.test.ts.snap b/test/__snapshots__/order.test.ts.snap index 7ff414bff7..a05d637401 100644 --- a/test/__snapshots__/order.test.ts.snap +++ b/test/__snapshots__/order.test.ts.snap @@ -3,7 +3,9 @@ exports[`order > movePseudoElementsEnd 1`] = `".marker\\\\:file\\\\:hover\\\\:selection\\\\:mb-4:hover::marker::file-selector-button::selection"`; exports[`order > multiple variant sorting 1`] = ` -"/* layer: default */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} +/* layer: default */ .dark .group:hover:focus-within .dark\\\\:group-hover\\\\:group-focus-within\\\\:bg-blue-600{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));} .group:hover:focus-within .dark .group-hover\\\\:group-focus-within\\\\:dark\\\\:bg-red-600{--un-bg-opacity:1;background-color:rgba(220,38,38,var(--un-bg-opacity));}" `; diff --git a/test/__snapshots__/postprocess.test.ts.snap b/test/__snapshots__/postprocess.test.ts.snap index 52dc8b0fa8..4640204c88 100644 --- a/test/__snapshots__/postprocess.test.ts.snap +++ b/test/__snapshots__/postprocess.test.ts.snap @@ -1,8 +1,9 @@ // Vitest Snapshot v1 exports[`postprocess 1`] = ` -"/* layer: default */ -.scale-100{--hello-rotate:0;--hello-rotate-x:0;--hello-rotate-y:0;--hello-rotate-z:0;--hello-scale-x:1;--hello-scale-y:1;--hello-scale-z:1;--hello-skew-x:0;--hello-skew-y:0;--hello-translate-x:0;--hello-translate-y:0;--hello-translate-z:0;--hello-transform:translateX(var(--hello-translate-x)) translateY(var(--hello-translate-y)) translateZ(var(--hello-translate-z)) rotate(var(--hello-rotate)) rotateX(var(--hello-rotate-x)) rotateY(var(--hello-rotate-y)) rotateZ(var(--hello-rotate-z)) skewX(var(--hello-skew-x)) skewY(var(--hello-skew-y)) scaleX(var(--hello-scale-x)) scaleY(var(--hello-scale-y)) scaleZ(var(--hello-scale-z));} +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: default */ .scale-100{--hello-scale-x:1;--hello-scale-y:1;transform:var(--hello-transform);} .text-opacity-50{--hi-text-opacity:0.5;}" `; diff --git a/test/__snapshots__/prefix.test.ts.snap b/test/__snapshots__/prefix.test.ts.snap index 12fb7a9075..ed10e34513 100644 --- a/test/__snapshots__/prefix.test.ts.snap +++ b/test/__snapshots__/prefix.test.ts.snap @@ -1,7 +1,9 @@ // Vitest Snapshot v1 exports[`prefix 1`] = ` -"/* layer: icons */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: icons */ .dark .uno\\\\:dark\\\\:i-carbon-moon{--un-icon:url(\\"data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z'/%3E%3C/svg%3E\\");mask:var(--un-icon) no-repeat;mask-size:100% 100%;-webkit-mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;} /* layer: shortcuts */ .uno\\\\:btn{margin-right:2.5rem;} @@ -16,7 +18,9 @@ exports[`prefix 1`] = ` `; exports[`tailwind prefix 1`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .uno-btn{margin-right:2.5rem;} .uno\\\\:btn1{margin-left:2.5rem;margin-right:2.5rem;} /* layer: default */ diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap index 67d190187e..9bf455a25a 100644 --- a/test/__snapshots__/preset-attributify.test.ts.snap +++ b/test/__snapshots__/preset-attributify.test.ts.snap @@ -39,7 +39,9 @@ exports[`attributify > autocomplete extractor 5`] = ` `; exports[`attributify > compatible with full controlled rules 1`] = ` -"/* layer: default */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: default */ [custom~=\\"\\\\31 \\"] { font-size: 1px; @@ -196,7 +198,9 @@ Set { `; exports[`attributify > fixture1 1`] = ` -"/* layer: base */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: base */ [layer-base~=\\"c-white\\\\/10\\"]{color:rgba(255,255,255,0.1);} [layer-base~=\\"hover\\\\:c-black\\\\/20\\"]:hover{color:rgba(0,0,0,0.2);} /* layer: default */ @@ -210,10 +214,6 @@ exports[`attributify > fixture1 1`] = ` [inline-block=\\"\\"]{display:inline-block;} [flex~=\\"\\\\!\\\\~\\"]{display:flex !important;} [flex~=\\"col\\"]{flex-direction:column;} -[translate-x-100\\\\%=\\"\\"], -[rotate-30=\\"\\"], -[rotate-60=\\"\\"], -[transform=\\"\\"]{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} [translate-x-100\\\\%=\\"\\"]{--un-translate-x:100%;transform:var(--un-transform);} [rotate-30=\\"\\"]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:30deg;transform:var(--un-transform);} [rotate-60=\\"\\"]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:60deg;transform:var(--un-transform);} @@ -254,7 +254,9 @@ exports[`attributify > fixture1 1`] = ` `; exports[`attributify > fixture2 1`] = ` -"/* layer: default */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: default */ [pointer-events-none=\\"\\"]{pointer-events:none;} [absolute=\\"\\"]{position:absolute;} [relative=\\"\\"]{position:relative;} @@ -274,10 +276,6 @@ exports[`attributify > fixture2 1`] = ` [peer=\\"\\"]:focus~[peer-focus~=\\"origin-top-left\\"], [peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"origin-top-left\\"]{transform-origin:top left;} [peer=\\"\\"]:focus~[peer-focus~=\\"-translate-y-4\\"], -[peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"-translate-y-4\\"], -[peer=\\"\\"]:focus~[peer-focus~=\\"scale-75\\"], -[peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"scale-75\\"]{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} -[peer=\\"\\"]:focus~[peer-focus~=\\"-translate-y-4\\"], [peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"-translate-y-4\\"]{--un-translate-y:-1rem;transform:var(--un-transform);} [peer=\\"\\"]:focus~[peer-focus~=\\"scale-75\\"], [peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"scale-75\\"]{--un-scale-x:0.75;--un-scale-y:0.75;transform:var(--un-transform);} @@ -369,7 +367,9 @@ exports[`attributify > variant 1`] = ` `; exports[`attributify > with trueToNonValued 1`] = ` -"/* layer: default */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: default */ .grid, [grid~=\\"\\\\~\\"]{display:grid;} [grid~=\\"cols-2\\"]{grid-template-columns:repeat(2,minmax(0,1fr));} diff --git a/test/__snapshots__/preset-icons.test.ts.snap b/test/__snapshots__/preset-icons.test.ts.snap index 70eddbd338..42b3fc70cf 100644 --- a/test/__snapshots__/preset-icons.test.ts.snap +++ b/test/__snapshots__/preset-icons.test.ts.snap @@ -1,7 +1,9 @@ // Vitest Snapshot v1 exports[`preset-icons > fixtures 1`] = ` -"/* layer: icons */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: icons */ .dark .dark\\\\:i-carbon-moon, .dark .dark\\\\:i-carbon-moon\\\\?auto{--un-icon:url(\\"data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z'/%3E%3C/svg%3E\\");mask:var(--un-icon) no-repeat;mask-size:100% 100%;-webkit-mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;} .dark .dark\\\\:i-carbon-moon\\\\?bg{background:url(\\"data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z'/%3E%3C/svg%3E\\") no-repeat;background-size:100% 100%;background-color:transparent;width:1em;height:1em;} @@ -10,7 +12,9 @@ exports[`preset-icons > fixtures 1`] = ` `; exports[`preset-icons > icon unit fixtures 1`] = ` -"/* layer: icons */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: icons */ .dark .dark\\\\:i-carbon-moon, .dark .dark\\\\:i-carbon-moon\\\\?auto{--un-icon:url(\\"data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z'/%3E%3C/svg%3E\\");mask:var(--un-icon) no-repeat;mask-size:100% 100%;-webkit-mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;} .dark .dark\\\\:i-carbon-moon\\\\?bg{background:url(\\"data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z'/%3E%3C/svg%3E\\") no-repeat;background-size:100% 100%;background-color:transparent;width:1em;height:1em;} diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index 62d542c4c6..99937459bd 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -1,16 +1,18 @@ // Vitest Snapshot v1 exports[`preset-mini > custom var prefix 1`] = ` -"/* layer: default */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} +/* layer: default */ .text-red{--hi-text-opacity:1;color:rgba(248,113,113,var(--hi-text-opacity));} .text-opacity-50{--hi-text-opacity:0.5;} -.scale-100{--hi-rotate:0;--hi-rotate-x:0;--hi-rotate-y:0;--hi-rotate-z:0;--hi-scale-x:1;--hi-scale-y:1;--hi-scale-z:1;--hi-skew-x:0;--hi-skew-y:0;--hi-translate-x:0;--hi-translate-y:0;--hi-translate-z:0;--hi-transform:translateX(var(--hi-translate-x)) translateY(var(--hi-translate-y)) translateZ(var(--hi-translate-z)) rotate(var(--hi-rotate)) rotateX(var(--hi-rotate-x)) rotateY(var(--hi-rotate-y)) rotateZ(var(--hi-rotate-z)) skewX(var(--hi-skew-x)) skewY(var(--hi-skew-y)) scaleX(var(--hi-scale-x)) scaleY(var(--hi-scale-y)) scaleZ(var(--hi-scale-z));} .scale-100{--hi-scale-x:1;--hi-scale-y:1;transform:var(--hi-transform);}" `; exports[`preset-mini > targets 1`] = ` -"/* layer: 1 */ -.layer-1\\\\:translate-0{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} +/* layer: 1 */ .layer-1\\\\:translate-0{--un-translate-x:0rem;--un-translate-y:0rem;transform:var(--un-transform);} /* layer: default */ .fw-\\\\$variable{font-weight:var(--variable);} @@ -715,49 +717,6 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .perspect-origin-\\\\$variable{-webkit-perspective-origin:var(--variable);perspective-origin:var(--variable);} .perspect-origin-center{-webkit-perspective-origin:center;perspective-origin:center;} .perspect-origin-top-right{-webkit-perspective-origin:top right;perspective-origin:top right;} -.-translate-full, -.scope_class .scope-scope_class\\\\:translate-0, -.translate-full, -.translate-none, -.-translate-x-full, -.-translate-y-1\\\\/2, -.before\\\\:translate-y-full::before, -.hover\\\\:translate-x-3:hover, -.peer:checked~.peer-checked\\\\:translate-x-\\\\[var\\\\(--reveal\\\\)\\\\], -.translate-x-\\\\$variable, -.translate-x-full, -.translate-y-1\\\\/4, -.translate-y-px, -.-rotate-2, -.rotate-\\\\[var\\\\(--spin\\\\)\\\\], -.rotate-\\\\$variable, -.rotate-1deg, -.rotate-x-\\\\$variable, -.rotate-x-1deg, -.rotate-y-1, -.rotate-z-\\\\[var\\\\(--spin\\\\)\\\\], -.transform-rotate-y-1, -.transform-rotate-z-\\\\[var\\\\(--spin\\\\)\\\\], -.skew-x-\\\\[var\\\\(--skew-x\\\\)\\\\], -.skew-x-\\\\$variable, -.skew-x-10, -.skew-x-10\\\\.00deg, -.skew-x-10\\\\.01deg, -.skew-x-10\\\\.10deg, -.skew-x-10\\\\.11deg, -.skew-x-10deg, -.skew-y-\\\\[var\\\\(--skew-y\\\\)\\\\], -.skew-y-0\\\\.5turn, -.skew-y-10, -.skew-y-10deg, -.skew-y-2grad, -.skew-y-3\\\\.14rad, -.hover\\\\:scale-4:hover, -.scale-\\\\$variable, -.active\\\\:scale-4:active, -.-scale-x-full, -.scale-x-\\\\$variable, -.transform{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .-translate-full{--un-translate-x:-100%;--un-translate-y:-100%;transform:var(--un-transform);} .scope_class .scope-scope_class\\\\:translate-0, .translate-none{--un-translate-x:0rem;--un-translate-y:0rem;transform:var(--un-transform);} @@ -802,9 +761,9 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina .scale-x-\\\\$variable{--un-scale-x:var(--variable);transform:var(--un-transform);} .preserve-3d{transform-style:preserve-3d;} .preserve-flat{transform-style:flat;} -.transform{transform:var(--un-transform);} -.transform-gpu{--un-transform:translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} -.transform-cpu{--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} +.transform, +.transform-cpu{transform:var(--un-transform);} +.transform-gpu{transform:translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .transform-none{transform:none;} .will-change-auto{will-change:auto;} .will-change-contents{will-change:contents;} diff --git a/test/__snapshots__/preset-prefixes.test.ts.snap b/test/__snapshots__/preset-prefixes.test.ts.snap index 049b0f0601..fd0c714ed4 100644 --- a/test/__snapshots__/preset-prefixes.test.ts.snap +++ b/test/__snapshots__/preset-prefixes.test.ts.snap @@ -1,7 +1,9 @@ // Vitest Snapshot v1 exports[`options properties does not override each other 1`] = ` -"/* layer: icons */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: icons */ .icon-mdi-alarm{--un-icon:url(\\"data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 20a7 7 0 0 1-7-7a7 7 0 0 1 7-7a7 7 0 0 1 7 7a7 7 0 0 1-7 7m0-16a9 9 0 0 0-9 9a9 9 0 0 0 9 9a9 9 0 0 0 9-9a9 9 0 0 0-9-9m.5 4H11v6l4.75 2.85l.75-1.23l-4-2.37V8M7.88 3.39L6.6 1.86L2 5.71l1.29 1.53l4.59-3.85M22 5.72l-4.6-3.86l-1.29 1.53l4.6 3.86L22 5.72Z'/%3E%3C/svg%3E\\");mask:var(--un-icon) no-repeat;mask-size:100% 100%;-webkit-mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;} /* layer: default */ @media (min-width: 640px){ @@ -10,7 +12,9 @@ exports[`options properties does not override each other 1`] = ` `; exports[`options properties does not override each other 2`] = ` -"/* layer: icons */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: icons */ .icon-mdi-alarm{--un-icon:url(\\"data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 20a7 7 0 0 1-7-7a7 7 0 0 1 7-7a7 7 0 0 1 7 7a7 7 0 0 1-7 7m0-16a9 9 0 0 0-9 9a9 9 0 0 0 9 9a9 9 0 0 0 9-9a9 9 0 0 0-9-9m.5 4H11v6l4.75 2.85l.75-1.23l-4-2.37V8M7.88 3.39L6.6 1.86L2 5.71l1.29 1.53l4.59-3.85M22 5.72l-4.6-3.86l-1.29 1.53l4.6 3.86L22 5.72Z'/%3E%3C/svg%3E\\");mask:var(--un-icon) no-repeat;mask-size:100% 100%;-webkit-mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;background-color:currentColor;width:1em;height:1em;} /* layer: default */ @media (min-width: 640px){ diff --git a/test/__snapshots__/preset-typography.test.ts.snap b/test/__snapshots__/preset-typography.test.ts.snap index 20d0a3f178..30ebdf9f2f 100644 --- a/test/__snapshots__/preset-typography.test.ts.snap +++ b/test/__snapshots__/preset-typography.test.ts.snap @@ -1,7 +1,9 @@ // Vitest Snapshot v1 exports[`typography > prose-attribute 1`] = ` -"/* layer: typography */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: typography */ :is([prose=\\"\\"],.prose) :where(h1,h2,h3,h4,h5,h6):not(.not-prose){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}:is([prose=\\"\\"],.prose) :where(a):not(.not-prose){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}:is([prose=\\"\\"],.prose) :where(a code):not(.not-prose){color:var(--un-prose-links);}:is([prose=\\"\\"],.prose) :where(p,ul,ol,pre):not(.not-prose){margin:1em 0;line-height:1.75;}:is([prose=\\"\\"],.prose) :where(blockquote):not(.not-prose){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}:is([prose=\\"\\"],.prose) :where(h1):not(.not-prose){margin:1rem 0;font-size:2.25em;}:is([prose=\\"\\"],.prose) :where(h2):not(.not-prose){margin:1.75em 0 .5em;font-size:1.75em;}:is([prose=\\"\\"],.prose) :where(h3):not(.not-prose){margin:1.5em 0 .5em;font-size:1.375em;}:is([prose=\\"\\"],.prose) :where(h4):not(.not-prose){margin:1em 0;font-size:1.125em;}:is([prose=\\"\\"],.prose) :where(img,video):not(.not-prose){max-width:100%;}:is([prose=\\"\\"],.prose) :where(figure,picture):not(.not-prose){margin:1em 0;}:is([prose=\\"\\"],.prose) :where(figcaption):not(.not-prose){color:var(--un-prose-captions);font-size:.875em;}:is([prose=\\"\\"],.prose) :where(code):not(.not-prose){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}:is([prose=\\"\\"],.prose) :where(:not(pre) > code):not(.not-prose)::before,:is([prose=\\"\\"],.prose) :where(:not(pre) > code):not(.not-prose)::after{content:\\"\`\\";}:is([prose=\\"\\"],.prose) :where(pre):not(.not-prose){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}:is([prose=\\"\\"],.prose) :where(pre,code):not(.not-prose){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}:is([prose=\\"\\"],.prose) :where(pre code):not(.not-prose){font-weight:inherit;}:is([prose=\\"\\"],.prose) :where(ol,ul):not(.not-prose){padding-left:1.25em;}:is([prose=\\"\\"],.prose) :where(ol):not(.not-prose){list-style-type:decimal;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"A\\"]):not(.not-prose){list-style-type:upper-alpha;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"a\\"]):not(.not-prose){list-style-type:lower-alpha;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"A\\" s]):not(.not-prose){list-style-type:upper-alpha;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"a\\" s]):not(.not-prose){list-style-type:lower-alpha;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"I\\"]):not(.not-prose){list-style-type:upper-roman;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"i\\"]):not(.not-prose){list-style-type:lower-roman;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"I\\" s]):not(.not-prose){list-style-type:upper-roman;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"i\\" s]):not(.not-prose){list-style-type:lower-roman;}:is([prose=\\"\\"],.prose) :where(ol[type=\\"1\\"]):not(.not-prose){list-style-type:decimal;}:is([prose=\\"\\"],.prose) :where(ul):not(.not-prose){list-style-type:disc;}:is([prose=\\"\\"],.prose) :where(ol > li):not(.not-prose)::marker,:is([prose=\\"\\"],.prose) :where(ul > li):not(.not-prose)::marker,:is([prose=\\"\\"],.prose) :where(summary):not(.not-prose)::marker{color:var(--un-prose-lists);}:is([prose=\\"\\"],.prose) :where(hr):not(.not-prose){margin:2em 0;border:1px solid var(--un-prose-hr);}:is([prose=\\"\\"],.prose) :where(table):not(.not-prose){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}:is([prose=\\"\\"],.prose) :where(tr):not(.not-prose):nth-child(2n){background:var(--un-prose-bg-soft);}:is([prose=\\"\\"],.prose) :where(td,th):not(.not-prose){border:1px solid var(--un-prose-borders);padding:.625em 1em;}:is([prose=\\"\\"],.prose) :where(abbr):not(.not-prose){cursor:help;}:is([prose=\\"\\"],.prose) :where(kbd):not(.not-prose){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}:is([prose=\\"\\"],.prose) :where(details):not(.not-prose){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}:is([prose=\\"\\"],.prose) :where(summary):not(.not-prose){cursor:pointer;font-weight:600;} .prose, [prose=\\"\\"]{color:var(--un-prose-body);max-width:65ch;} @@ -15,7 +17,9 @@ exports[`typography > prose-attribute 1`] = ` `; exports[`typography > prose-attribute-custom 1`] = ` -"/* layer: typography */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: typography */ :is([custom=\\"\\"],.custom) :where(h1,h2,h3,h4,h5,h6):not(.not-custom){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}:is([custom=\\"\\"],.custom) :where(a):not(.not-custom){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}:is([custom=\\"\\"],.custom) :where(a code):not(.not-custom){color:var(--un-prose-links);}:is([custom=\\"\\"],.custom) :where(p,ul,ol,pre):not(.not-custom){margin:1em 0;line-height:1.75;}:is([custom=\\"\\"],.custom) :where(blockquote):not(.not-custom){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}:is([custom=\\"\\"],.custom) :where(h1):not(.not-custom){margin:1rem 0;font-size:2.25em;}:is([custom=\\"\\"],.custom) :where(h2):not(.not-custom){margin:1.75em 0 .5em;font-size:1.75em;}:is([custom=\\"\\"],.custom) :where(h3):not(.not-custom){margin:1.5em 0 .5em;font-size:1.375em;}:is([custom=\\"\\"],.custom) :where(h4):not(.not-custom){margin:1em 0;font-size:1.125em;}:is([custom=\\"\\"],.custom) :where(img,video):not(.not-custom){max-width:100%;}:is([custom=\\"\\"],.custom) :where(figure,picture):not(.not-custom){margin:1em 0;}:is([custom=\\"\\"],.custom) :where(figcaption):not(.not-custom){color:var(--un-prose-captions);font-size:.875em;}:is([custom=\\"\\"],.custom) :where(code):not(.not-custom){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}:is([custom=\\"\\"],.custom) :where(:not(pre) > code):not(.not-custom)::before,:is([custom=\\"\\"],.custom) :where(:not(pre) > code):not(.not-custom)::after{content:\\"\`\\";}:is([custom=\\"\\"],.custom) :where(pre):not(.not-custom){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}:is([custom=\\"\\"],.custom) :where(pre,code):not(.not-custom){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}:is([custom=\\"\\"],.custom) :where(pre code):not(.not-custom){font-weight:inherit;}:is([custom=\\"\\"],.custom) :where(ol,ul):not(.not-custom){padding-left:1.25em;}:is([custom=\\"\\"],.custom) :where(ol):not(.not-custom){list-style-type:decimal;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"A\\"]):not(.not-custom){list-style-type:upper-alpha;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"a\\"]):not(.not-custom){list-style-type:lower-alpha;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"A\\" s]):not(.not-custom){list-style-type:upper-alpha;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"a\\" s]):not(.not-custom){list-style-type:lower-alpha;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"I\\"]):not(.not-custom){list-style-type:upper-roman;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"i\\"]):not(.not-custom){list-style-type:lower-roman;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"I\\" s]):not(.not-custom){list-style-type:upper-roman;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"i\\" s]):not(.not-custom){list-style-type:lower-roman;}:is([custom=\\"\\"],.custom) :where(ol[type=\\"1\\"]):not(.not-custom){list-style-type:decimal;}:is([custom=\\"\\"],.custom) :where(ul):not(.not-custom){list-style-type:disc;}:is([custom=\\"\\"],.custom) :where(ol > li):not(.not-custom)::marker,:is([custom=\\"\\"],.custom) :where(ul > li):not(.not-custom)::marker,:is([custom=\\"\\"],.custom) :where(summary):not(.not-custom)::marker{color:var(--un-prose-lists);}:is([custom=\\"\\"],.custom) :where(hr):not(.not-custom){margin:2em 0;border:1px solid var(--un-prose-hr);}:is([custom=\\"\\"],.custom) :where(table):not(.not-custom){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}:is([custom=\\"\\"],.custom) :where(tr):not(.not-custom):nth-child(2n){background:var(--un-prose-bg-soft);}:is([custom=\\"\\"],.custom) :where(td,th):not(.not-custom){border:1px solid var(--un-prose-borders);padding:.625em 1em;}:is([custom=\\"\\"],.custom) :where(abbr):not(.not-custom){cursor:help;}:is([custom=\\"\\"],.custom) :where(kbd):not(.not-custom){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}:is([custom=\\"\\"],.custom) :where(details):not(.not-custom){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}:is([custom=\\"\\"],.custom) :where(summary):not(.not-custom){cursor:pointer;font-weight:600;} .custom, [custom=\\"\\"]{color:var(--un-prose-body);max-width:65ch;} @@ -29,12 +33,16 @@ exports[`typography > prose-attribute-custom 1`] = ` `; exports[`typography > prose-black 1`] = ` -"/* layer: typography */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: typography */ .prose-black{--un-prose-body:#000;--un-prose-headings:#000;--un-prose-links:#000;--un-prose-lists:#000;--un-prose-hr:#000;--un-prose-captions:#000;--un-prose-code:#000;--un-prose-borders:#000;--un-prose-bg-soft:#000;--un-prose-invert-body:#000;--un-prose-invert-headings:#000;--un-prose-invert-links:#000;--un-prose-invert-lists:#000;--un-prose-invert-hr:#000;--un-prose-invert-captions:#000;--un-prose-invert-code:#000;--un-prose-invert-borders:#000;--un-prose-invert-bg-soft:#000;--un-prose-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;}" `; exports[`typography > prose-class 1`] = ` -"/* layer: typography */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: typography */ .prose :where(h1,h2,h3,h4,h5,h6):not(.not-prose){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}.prose :where(a):not(.not-prose){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}.prose :where(a code):not(.not-prose){color:var(--un-prose-links);}.prose :where(p,ul,ol,pre):not(.not-prose){margin:1em 0;line-height:1.75;}.prose :where(blockquote):not(.not-prose){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}.prose :where(h1):not(.not-prose){margin:1rem 0;font-size:2.25em;}.prose :where(h2):not(.not-prose){margin:1.75em 0 .5em;font-size:1.75em;}.prose :where(h3):not(.not-prose){margin:1.5em 0 .5em;font-size:1.375em;}.prose :where(h4):not(.not-prose){margin:1em 0;font-size:1.125em;}.prose :where(img,video):not(.not-prose){max-width:100%;}.prose :where(figure,picture):not(.not-prose){margin:1em 0;}.prose :where(figcaption):not(.not-prose){color:var(--un-prose-captions);font-size:.875em;}.prose :where(code):not(.not-prose){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}.prose :where(:not(pre) > code):not(.not-prose)::before,.prose :where(:not(pre) > code):not(.not-prose)::after{content:\\"\`\\";}.prose :where(pre):not(.not-prose){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}.prose :where(pre,code):not(.not-prose){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}.prose :where(pre code):not(.not-prose){font-weight:inherit;}.prose :where(ol,ul):not(.not-prose){padding-left:1.25em;}.prose :where(ol):not(.not-prose){list-style-type:decimal;}.prose :where(ol[type=\\"A\\"]):not(.not-prose){list-style-type:upper-alpha;}.prose :where(ol[type=\\"a\\"]):not(.not-prose){list-style-type:lower-alpha;}.prose :where(ol[type=\\"A\\" s]):not(.not-prose){list-style-type:upper-alpha;}.prose :where(ol[type=\\"a\\" s]):not(.not-prose){list-style-type:lower-alpha;}.prose :where(ol[type=\\"I\\"]):not(.not-prose){list-style-type:upper-roman;}.prose :where(ol[type=\\"i\\"]):not(.not-prose){list-style-type:lower-roman;}.prose :where(ol[type=\\"I\\" s]):not(.not-prose){list-style-type:upper-roman;}.prose :where(ol[type=\\"i\\" s]):not(.not-prose){list-style-type:lower-roman;}.prose :where(ol[type=\\"1\\"]):not(.not-prose){list-style-type:decimal;}.prose :where(ul):not(.not-prose){list-style-type:disc;}.prose :where(ol > li):not(.not-prose)::marker,.prose :where(ul > li):not(.not-prose)::marker,.prose :where(summary):not(.not-prose)::marker{color:var(--un-prose-lists);}.prose :where(hr):not(.not-prose){margin:2em 0;border:1px solid var(--un-prose-hr);}.prose :where(table):not(.not-prose){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}.prose :where(tr):not(.not-prose):nth-child(2n){background:var(--un-prose-bg-soft);}.prose :where(td,th):not(.not-prose){border:1px solid var(--un-prose-borders);padding:.625em 1em;}.prose :where(abbr):not(.not-prose){cursor:help;}.prose :where(kbd):not(.not-prose){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}.prose :where(details):not(.not-prose){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}.prose :where(summary):not(.not-prose){cursor:pointer;font-weight:600;} .prose{color:var(--un-prose-body);max-width:65ch;} .prose-teal{--un-prose-body:#0f766e;--un-prose-headings:#134e4a;--un-prose-links:#134e4a;--un-prose-lists:#2dd4bf;--un-prose-hr:#99f6e4;--un-prose-captions:#14b8a6;--un-prose-code:#134e4a;--un-prose-borders:#99f6e4;--un-prose-bg-soft:#ccfbf1;--un-prose-invert-body:#99f6e4;--un-prose-invert-headings:#ccfbf1;--un-prose-invert-links:#ccfbf1;--un-prose-invert-lists:#14b8a6;--un-prose-invert-hr:#0f766e;--un-prose-invert-captions:#2dd4bf;--un-prose-invert-code:#ccfbf1;--un-prose-invert-borders:#0f766e;--un-prose-invert-bg-soft:#115e59;--un-prose-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;} @@ -44,7 +52,9 @@ exports[`typography > prose-class 1`] = ` `; exports[`typography > prose-class-custom 1`] = ` -"/* layer: typography */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: typography */ .custom :where(h1,h2,h3,h4,h5,h6):not(.not-custom){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}.custom :where(a):not(.not-custom){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}.custom :where(a code):not(.not-custom){color:var(--un-prose-links);}.custom :where(p,ul,ol,pre):not(.not-custom){margin:1em 0;line-height:1.75;}.custom :where(blockquote):not(.not-custom){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}.custom :where(h1):not(.not-custom){margin:1rem 0;font-size:2.25em;}.custom :where(h2):not(.not-custom){margin:1.75em 0 .5em;font-size:1.75em;}.custom :where(h3):not(.not-custom){margin:1.5em 0 .5em;font-size:1.375em;}.custom :where(h4):not(.not-custom){margin:1em 0;font-size:1.125em;}.custom :where(img,video):not(.not-custom){max-width:100%;}.custom :where(figure,picture):not(.not-custom){margin:1em 0;}.custom :where(figcaption):not(.not-custom){color:var(--un-prose-captions);font-size:.875em;}.custom :where(code):not(.not-custom){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}.custom :where(:not(pre) > code):not(.not-custom)::before,.custom :where(:not(pre) > code):not(.not-custom)::after{content:\\"\`\\";}.custom :where(pre):not(.not-custom){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}.custom :where(pre,code):not(.not-custom){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}.custom :where(pre code):not(.not-custom){font-weight:inherit;}.custom :where(ol,ul):not(.not-custom){padding-left:1.25em;}.custom :where(ol):not(.not-custom){list-style-type:decimal;}.custom :where(ol[type=\\"A\\"]):not(.not-custom){list-style-type:upper-alpha;}.custom :where(ol[type=\\"a\\"]):not(.not-custom){list-style-type:lower-alpha;}.custom :where(ol[type=\\"A\\" s]):not(.not-custom){list-style-type:upper-alpha;}.custom :where(ol[type=\\"a\\" s]):not(.not-custom){list-style-type:lower-alpha;}.custom :where(ol[type=\\"I\\"]):not(.not-custom){list-style-type:upper-roman;}.custom :where(ol[type=\\"i\\"]):not(.not-custom){list-style-type:lower-roman;}.custom :where(ol[type=\\"I\\" s]):not(.not-custom){list-style-type:upper-roman;}.custom :where(ol[type=\\"i\\" s]):not(.not-custom){list-style-type:lower-roman;}.custom :where(ol[type=\\"1\\"]):not(.not-custom){list-style-type:decimal;}.custom :where(ul):not(.not-custom){list-style-type:disc;}.custom :where(ol > li):not(.not-custom)::marker,.custom :where(ul > li):not(.not-custom)::marker,.custom :where(summary):not(.not-custom)::marker{color:var(--un-prose-lists);}.custom :where(hr):not(.not-custom){margin:2em 0;border:1px solid var(--un-prose-hr);}.custom :where(table):not(.not-custom){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}.custom :where(tr):not(.not-custom):nth-child(2n){background:var(--un-prose-bg-soft);}.custom :where(td,th):not(.not-custom){border:1px solid var(--un-prose-borders);padding:.625em 1em;}.custom :where(abbr):not(.not-custom){cursor:help;}.custom :where(kbd):not(.not-custom){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}.custom :where(details):not(.not-custom){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}.custom :where(summary):not(.not-custom){cursor:pointer;font-weight:600;} .custom{color:var(--un-prose-body);max-width:65ch;} .custom-teal{--un-prose-body:#0f766e;--un-prose-headings:#134e4a;--un-prose-links:#134e4a;--un-prose-lists:#2dd4bf;--un-prose-hr:#99f6e4;--un-prose-captions:#14b8a6;--un-prose-code:#134e4a;--un-prose-borders:#99f6e4;--un-prose-bg-soft:#ccfbf1;--un-prose-invert-body:#99f6e4;--un-prose-invert-headings:#ccfbf1;--un-prose-invert-links:#ccfbf1;--un-prose-invert-lists:#14b8a6;--un-prose-invert-hr:#0f766e;--un-prose-invert-captions:#2dd4bf;--un-prose-invert-code:#ccfbf1;--un-prose-invert-borders:#0f766e;--un-prose-invert-bg-soft:#115e59;--un-prose-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\\"Liberation Mono\\",\\"Courier New\\",monospace;} @@ -54,16 +64,23 @@ exports[`typography > prose-class-custom 1`] = ` `; exports[`typography > prose-custom-css 1`] = ` -"/* layer: typography */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: typography */ .prose :where(h1,h2,h3,h4,h5,h6):not(.not-prose){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}.prose :where(a):not(.not-prose){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}.prose :where(a code):not(.not-prose){color:var(--un-prose-links);}.prose :where(p,ul,ol,pre):not(.not-prose){margin:1em 0;line-height:1.75;}.prose :where(blockquote):not(.not-prose){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}.prose :where(h1):not(.not-prose){margin:1rem 0;font-size:2.25em;}.prose :where(h2):not(.not-prose){margin:1.75em 0 .5em;font-size:1.75em;}.prose :where(h3):not(.not-prose){margin:1.5em 0 .5em;font-size:1.375em;}.prose :where(h4):not(.not-prose){margin:1em 0;font-size:1.125em;}.prose :where(img,video):not(.not-prose){max-width:100%;}.prose :where(figure,picture):not(.not-prose){margin:1em 0;}.prose :where(figcaption):not(.not-prose){color:var(--un-prose-captions);font-size:.875em;}.prose :where(code):not(.not-prose){color:#8b5cf6;font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}.prose :where(:not(pre) > code):not(.not-prose)::before,.prose :where(:not(pre) > code):not(.not-prose)::after{content:\\"\`\\";}.prose :where(pre):not(.not-prose){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}.prose :where(pre,code):not(.not-prose){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}.prose :where(pre code):not(.not-prose){font-weight:inherit;}.prose :where(ol,ul):not(.not-prose){padding-left:1.25em;}.prose :where(ol):not(.not-prose){list-style-type:decimal;}.prose :where(ol[type=\\"A\\"]):not(.not-prose){list-style-type:upper-alpha;}.prose :where(ol[type=\\"a\\"]):not(.not-prose){list-style-type:lower-alpha;}.prose :where(ol[type=\\"A\\" s]):not(.not-prose){list-style-type:upper-alpha;}.prose :where(ol[type=\\"a\\" s]):not(.not-prose){list-style-type:lower-alpha;}.prose :where(ol[type=\\"I\\"]):not(.not-prose){list-style-type:upper-roman;}.prose :where(ol[type=\\"i\\"]):not(.not-prose){list-style-type:lower-roman;}.prose :where(ol[type=\\"I\\" s]):not(.not-prose){list-style-type:upper-roman;}.prose :where(ol[type=\\"i\\" s]):not(.not-prose){list-style-type:lower-roman;}.prose :where(ol[type=\\"1\\"]):not(.not-prose){list-style-type:decimal;}.prose :where(ul):not(.not-prose){list-style-type:disc;}.prose :where(ol > li):not(.not-prose)::marker,.prose :where(ul > li):not(.not-prose)::marker,.prose :where(summary):not(.not-prose)::marker{color:var(--un-prose-lists);}.prose :where(hr):not(.not-prose){margin:2em 0;border:1px solid var(--un-prose-hr);}.prose :where(table):not(.not-prose){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}.prose :where(tr):not(.not-prose):nth-child(2n){background:var(--un-prose-bg-soft);}.prose :where(td,th):not(.not-prose){border:1px solid var(--un-prose-borders);padding:.625em 1em;}.prose :where(abbr):not(.not-prose){cursor:help;}.prose :where(kbd):not(.not-prose){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}.prose :where(details):not(.not-prose){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}.prose :where(summary):not(.not-prose){cursor:pointer;font-weight:600;}.prose :where(a):not(.not-prose):hover{color:#f43f5e;}.prose :where(a):not(.not-prose):visited{color:#14b8a6;} .prose{color:var(--un-prose-body);max-width:65ch;}" `; exports[`typography > prose-custom-prefix-attribute 1`] = ` -"/* layer: typography */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: typography */ :is([u\\\\:prose=\\"\\"],.prose) :where(h1,h2,h3,h4,h5,h6):not(.not-prose){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}:is([u\\\\:prose=\\"\\"],.prose) :where(a):not(.not-prose){color:var(--un-prose-links);text-decoration:underline;font-weight:500;}:is([u\\\\:prose=\\"\\"],.prose) :where(a code):not(.not-prose){color:var(--un-prose-links);}:is([u\\\\:prose=\\"\\"],.prose) :where(p,ul,ol,pre):not(.not-prose){margin:1em 0;line-height:1.75;}:is([u\\\\:prose=\\"\\"],.prose) :where(blockquote):not(.not-prose){margin:1em 0;padding-left:1em;font-style:italic;border-left:.25em solid var(--un-prose-borders);}:is([u\\\\:prose=\\"\\"],.prose) :where(h1):not(.not-prose){margin:1rem 0;font-size:2.25em;}:is([u\\\\:prose=\\"\\"],.prose) :where(h2):not(.not-prose){margin:1.75em 0 .5em;font-size:1.75em;}:is([u\\\\:prose=\\"\\"],.prose) :where(h3):not(.not-prose){margin:1.5em 0 .5em;font-size:1.375em;}:is([u\\\\:prose=\\"\\"],.prose) :where(h4):not(.not-prose){margin:1em 0;font-size:1.125em;}:is([u\\\\:prose=\\"\\"],.prose) :where(img,video):not(.not-prose){max-width:100%;}:is([u\\\\:prose=\\"\\"],.prose) :where(figure,picture):not(.not-prose){margin:1em 0;}:is([u\\\\:prose=\\"\\"],.prose) :where(figcaption):not(.not-prose){color:var(--un-prose-captions);font-size:.875em;}:is([u\\\\:prose=\\"\\"],.prose) :where(code):not(.not-prose){color:var(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}:is([u\\\\:prose=\\"\\"],.prose) :where(:not(pre) > code):not(.not-prose)::before,:is([u\\\\:prose=\\"\\"],.prose) :where(:not(pre) > code):not(.not-prose)::after{content:\\"\`\\";}:is([u\\\\:prose=\\"\\"],.prose) :where(pre):not(.not-prose){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;}:is([u\\\\:prose=\\"\\"],.prose) :where(pre,code):not(.not-prose){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:transparent;}:is([u\\\\:prose=\\"\\"],.prose) :where(pre code):not(.not-prose){font-weight:inherit;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol,ul):not(.not-prose){padding-left:1.25em;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol):not(.not-prose){list-style-type:decimal;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"A\\"]):not(.not-prose){list-style-type:upper-alpha;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"a\\"]):not(.not-prose){list-style-type:lower-alpha;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"A\\" s]):not(.not-prose){list-style-type:upper-alpha;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"a\\" s]):not(.not-prose){list-style-type:lower-alpha;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"I\\"]):not(.not-prose){list-style-type:upper-roman;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"i\\"]):not(.not-prose){list-style-type:lower-roman;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"I\\" s]):not(.not-prose){list-style-type:upper-roman;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"i\\" s]):not(.not-prose){list-style-type:lower-roman;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol[type=\\"1\\"]):not(.not-prose){list-style-type:decimal;}:is([u\\\\:prose=\\"\\"],.prose) :where(ul):not(.not-prose){list-style-type:disc;}:is([u\\\\:prose=\\"\\"],.prose) :where(ol > li):not(.not-prose)::marker,:is([u\\\\:prose=\\"\\"],.prose) :where(ul > li):not(.not-prose)::marker,:is([u\\\\:prose=\\"\\"],.prose) :where(summary):not(.not-prose)::marker{color:var(--un-prose-lists);}:is([u\\\\:prose=\\"\\"],.prose) :where(hr):not(.not-prose){margin:2em 0;border:1px solid var(--un-prose-hr);}:is([u\\\\:prose=\\"\\"],.prose) :where(table):not(.not-prose){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}:is([u\\\\:prose=\\"\\"],.prose) :where(tr):not(.not-prose):nth-child(2n){background:var(--un-prose-bg-soft);}:is([u\\\\:prose=\\"\\"],.prose) :where(td,th):not(.not-prose){border:1px solid var(--un-prose-borders);padding:.625em 1em;}:is([u\\\\:prose=\\"\\"],.prose) :where(abbr):not(.not-prose){cursor:help;}:is([u\\\\:prose=\\"\\"],.prose) :where(kbd):not(.not-prose){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}:is([u\\\\:prose=\\"\\"],.prose) :where(details):not(.not-prose){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}:is([u\\\\:prose=\\"\\"],.prose) :where(summary):not(.not-prose){cursor:pointer;font-weight:600;} .prose, [u\\\\:prose=\\"\\"]{color:var(--un-prose-body);max-width:65ch;}" `; -exports[`typography > prose-missing-color 1`] = `""`; +exports[`typography > prose-missing-color 1`] = ` +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}" +`; diff --git a/test/__snapshots__/preset-web-fonts.test.ts.snap b/test/__snapshots__/preset-web-fonts.test.ts.snap index ad92e14dd6..341c1bbe6b 100644 --- a/test/__snapshots__/preset-web-fonts.test.ts.snap +++ b/test/__snapshots__/preset-web-fonts.test.ts.snap @@ -1,7 +1,9 @@ // Vitest Snapshot v1 exports[`web-fonts (inline: false) 1`] = ` -"/* layer: __webfonts__ */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} +/* layer: __webfonts__ */ @import url('https://fonts.googleapis.com/css2?family=Roboto&family=Fira+Code&family=Fira+Mono:wght@400;700&family=Lobster&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap') /* layer: default */ .font-lato{font-family:\\"Lato\\",sans-serif;} diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index b8ba733bd6..23aa07150d 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -1,7 +1,9 @@ // Vitest Snapshot v1 exports[`preset-wind > containers 1`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .container{max-width:100%;} @media (min-width: 640px){ .container{max-width:640px;} @@ -28,7 +30,9 @@ exports[`preset-wind > containers 1`] = ` `; exports[`preset-wind > targets 1`] = ` -"/* layer: _pre */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: _pre */ @media (prefers-contrast: less){ .layer-_pre\\\\:contrast-less\\\\:bg-gray-3{--un-bg-opacity:1;background-color:rgba(209,213,219,var(--un-bg-opacity));} } @@ -288,69 +292,11 @@ exports[`preset-wind > targets 1`] = ` .mix-blend-plus-lighter{mix-blend-mode:plus-lighter;} .mix-blend-normal{mix-blend-mode:normal;} .image-render-pixel{-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;} -.backdrop-blur, -.backdrop-blur-4, -.backdrop-blur-md, -.backdrop-blur-none, -.backdrop-brightness-0, -.backdrop-brightness-60, -.backdrop-contrast-125, -.backdrop-grayscale, -.backdrop-grayscale-90, -.-backdrop-hue-rotate-90, -.backdrop-hue-rotate-0, -.backdrop-hue-rotate-360, -.backdrop-invert, -.backdrop-invert-90, -.backdrop-opacity-\\\\$variable, -.backdrop-opacity-90, -.backdrop-saturate-120, -.backdrop-saturate-30, -.backdrop-sepia, -.backdrop-sepia-80, -.backdrop-filter{--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} .backdrop-blur{--un-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--un-backdrop-filter);backdrop-filter:var(--un-backdrop-filter);} .backdrop-blur-4{--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-filter);backdrop-filter:var(--un-backdrop-filter);} .backdrop-blur-md{--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-filter);backdrop-filter:var(--un-backdrop-filter);} .backdrop-blur-none{--un-backdrop-blur:blur(0);-webkit-backdrop-filter:var(--un-backdrop-filter);backdrop-filter:var(--un-backdrop-filter);} .blur, -.blur-\\\\$variable, -.blur-4, -.blur-md, -.blur-none, -.filter-blur, -.filter-blur-4, -.filter-blur-md, -.filter-blur-none, -.brightness-\\\\$variable, -.brightness-0, -.brightness-60, -.contrast-\\\\$variable, -.contrast-125, -.drop-shadow, -.drop-shadow-\\\\[0_4px_3px_\\\\#000\\\\], -.drop-shadow-\\\\$variable, -.drop-shadow-none, -.drop-shadow-sm, -.grayscale, -.grayscale-\\\\$variable, -.grayscale-90, -.-hue-rotate-90, -.hue-rotate-\\\\$variable, -.hue-rotate-0, -.hue-rotate-360, -.invert, -.invert-\\\\$variable, -.invert-90, -.saturate-\\\\$variable, -.saturate-0, -.saturate-120, -.saturate-30, -.sepia, -.sepia-\\\\$variable, -.sepia-80, -.filter{--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} -.blur, .filter-blur{--un-blur:blur(8px);filter:var(--un-filter);} .blur-\\\\$variable{--un-blur:blur(var(--variable));filter:var(--un-filter);} .blur-4, @@ -432,7 +378,6 @@ exports[`preset-wind > targets 1`] = ` .motion-safe\\\\:transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;} } @media (prefers-reduced-motion: reduce){ -.motion-reduce\\\\:hover\\\\:translate-0:hover{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .motion-reduce\\\\:hover\\\\:translate-0:hover{--un-translate-x:0rem;--un-translate-y:0rem;transform:var(--un-transform);} }" `; diff --git a/test/__snapshots__/runtime.test.ts.snap b/test/__snapshots__/runtime.test.ts.snap index d42942e60d..651b9d2f6c 100644 --- a/test/__snapshots__/runtime.test.ts.snap +++ b/test/__snapshots__/runtime.test.ts.snap @@ -1,7 +1,9 @@ // Vitest Snapshot v1 exports[`runtime auto prefixer > using autoprfixer 1`] = ` -"/* layer: default */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: default */ .\\\\[--vars\\\\:value\\\\]{--vars:value;} .\\\\[-vars\\\\:value\\\\], .\\\\[vars\\\\:value\\\\]{-webkit-vars:value;} @@ -11,12 +13,13 @@ exports[`runtime auto prefixer > using autoprfixer 1`] = ` .\\\\[perspective\\\\:0\\\\]{-webkit-perspective:0;} .perspect-1px{-webkit-perspective:1px;} .hyphens-auto{-webkit-hyphens:auto;-ms-hyphens:auto;} -.filter{--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .filter{-webkit-filter:var(--un-filter);}" `; exports[`runtime auto prefixer > without autoprfixer 1`] = ` -"/* layer: default */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: default */ .\\\\[--vars\\\\:value\\\\]{--vars:value;} .\\\\[-vars\\\\:value\\\\]{-vars:value;} .\\\\[filter\\\\:none\\\\]{filter:none;} @@ -26,6 +29,5 @@ exports[`runtime auto prefixer > without autoprfixer 1`] = ` .\\\\[vars\\\\:value\\\\]{vars:value;} .perspect-1px{-webkit-perspective:1px;perspective:1px;} .hyphens-auto{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;} -.filter{--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);} .filter{filter:var(--un-filter);}" `; diff --git a/test/__snapshots__/scope.test.ts.snap b/test/__snapshots__/scope.test.ts.snap index b901dbe1c1..3b3644a48f 100644 --- a/test/__snapshots__/scope.test.ts.snap +++ b/test/__snapshots__/scope.test.ts.snap @@ -1,7 +1,9 @@ // Vitest Snapshot v1 exports[`scope 1`] = ` -"/* layer: default */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: default */ .foo-scope .flex{display:flex;} .foo-scope .\\\\!p-5px{padding:5px !important;} .foo-scope .hover\\\\:\\\\!p-10:hover{padding:2.5rem !important;} diff --git a/test/__snapshots__/shortcuts.test.ts.snap b/test/__snapshots__/shortcuts.test.ts.snap index af2d5a1d2e..6be1e4e66f 100644 --- a/test/__snapshots__/shortcuts.test.ts.snap +++ b/test/__snapshots__/shortcuts.test.ts.snap @@ -1,7 +1,9 @@ // Vitest Snapshot v1 exports[`shortcuts > animate 1`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .loading{transition-duration:1000ms;} /* layer: default */ @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @@ -9,16 +11,18 @@ exports[`shortcuts > animate 1`] = ` `; exports[`shortcuts > dynamic 1`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .button-1{padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;} .button-2{padding-left:1.5rem;padding-right:1.5rem;padding-top:1rem;padding-bottom:1rem;}" `; exports[`shortcuts > merge transform-duplicated 1`] = ` -"/* layer: shortcuts */ -.transform-duplicated, -.transform-duplicated:hover, -.transform-duplicated:active { +"/* layer: preflights */ +*, +::before, +::after { --un-rotate: 0; --un-rotate-x: 0; --un-rotate-y: 0; @@ -37,7 +41,34 @@ exports[`shortcuts > merge transform-duplicated 1`] = ` rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)); + --un-blur: var(--un-empty, /*!*/ /*!*/); + --un-brightness: var(--un-empty, /*!*/ /*!*/); + --un-contrast: var(--un-empty, /*!*/ /*!*/); + --un-drop-shadow: var(--un-empty, /*!*/ /*!*/); + --un-grayscale: var(--un-empty, /*!*/ /*!*/); + --un-hue-rotate: var(--un-empty, /*!*/ /*!*/); + --un-invert: var(--un-empty, /*!*/ /*!*/); + --un-saturate: var(--un-empty, /*!*/ /*!*/); + --un-sepia: var(--un-empty, /*!*/ /*!*/); + --un-filter: var(--un-blur) var(--un-brightness) var(--un-contrast) + var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) + var(--un-invert) var(--un-saturate) var(--un-sepia); + --un-backdrop-blur: var(--un-empty, /*!*/ /*!*/); + --un-backdrop-brightness: var(--un-empty, /*!*/ /*!*/); + --un-backdrop-contrast: var(--un-empty, /*!*/ /*!*/); + --un-backdrop-grayscale: var(--un-empty, /*!*/ /*!*/); + --un-backdrop-hue-rotate: var(--un-empty, /*!*/ /*!*/); + --un-backdrop-invert: var(--un-empty, /*!*/ /*!*/); + --un-backdrop-opacity: var(--un-empty, /*!*/ /*!*/); + --un-backdrop-saturate: var(--un-empty, /*!*/ /*!*/); + --un-backdrop-sepia: var(--un-empty, /*!*/ /*!*/); + --un-backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) + var(--un-backdrop-contrast) var(--un-backdrop-grayscale) + var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) + var(--un-backdrop-opacity) var(--un-backdrop-saturate) + var(--un-backdrop-sepia); } +/* layer: shortcuts */ .transform-duplicated { --un-translate-x: 0.25rem; transform: var(--un-transform); @@ -58,7 +89,9 @@ exports[`shortcuts > merge transform-duplicated 1`] = ` `; exports[`shortcuts > nesting static 1`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .btn2{margin:0.75rem;margin-left:2.5rem;margin-right:2.5rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.75rem;padding-bottom:0.75rem;} .btn{margin-right:2.5rem;} .btn1{margin-left:2.5rem;margin-right:2.5rem;} @@ -68,14 +101,18 @@ exports[`shortcuts > nesting static 1`] = ` `; exports[`shortcuts > no-merge 1`] = ` -"/* layer: default */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: default */ .with-no-merge{no-merge:1;} .with-no-merge, .merge-candidate{merged:1;}" `; exports[`shortcuts > static 1`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .sh1{margin:0.75rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.75rem;padding-bottom:0.75rem;} .sh3{margin:0.75rem;} .focus\\\\:sh2:focus, @@ -89,21 +126,27 @@ exports[`shortcuts > static 1`] = ` `; exports[`shortcuts > variant order 1`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .shortcut-hover-active-1:focus, .shortcut-hover-active-1:hover, .shortcut-hover-active-1:active{--un-bg-opacity:1;background-color:rgba(134,239,172,var(--un-bg-opacity));}" `; exports[`shortcuts > variant order 2`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));} .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));} .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));}" `; exports[`shortcuts > variant order 3`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .layer-shortcuts\\\\:bg-red-300, .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));} .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));} @@ -111,7 +154,9 @@ exports[`shortcuts > variant order 3`] = ` `; exports[`shortcuts > variant order 4`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .layer-shortcuts\\\\:bg-yellow-300, .shortcut-hover-active-2:hover{--un-bg-opacity:1;background-color:rgba(253,224,71,var(--un-bg-opacity));} .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));} @@ -119,7 +164,9 @@ exports[`shortcuts > variant order 4`] = ` `; exports[`shortcuts > variant order 5`] = ` -"/* layer: shortcuts */ +"/* layer: preflights */ +*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} +/* layer: shortcuts */ .layer-shortcuts\\\\:bg-blue-300, .shortcut-hover-active-2:active{--un-bg-opacity:1;background-color:rgba(147,197,253,var(--un-bg-opacity));} .shortcut-hover-active-2:focus{--un-bg-opacity:1;background-color:rgba(252,165,165,var(--un-bg-opacity));} diff --git a/test/__snapshots__/transformer-directives.test.ts.snap b/test/__snapshots__/transformer-directives.test.ts.snap index 2381cabe2f..3c11e9ef96 100644 --- a/test/__snapshots__/transformer-directives.test.ts.snap +++ b/test/__snapshots__/transformer-directives.test.ts.snap @@ -38,24 +38,6 @@ html.dark { } .hover-transform { - --un-rotate: 0; - --un-rotate-x: 0; - --un-rotate-y: 0; - --un-rotate-z: 0; - --un-scale-x: 1; - --un-scale-y: 1; - --un-scale-z: 1; - --un-skew-x: 0; - --un-skew-y: 0; - --un-translate-x: 0; - --un-translate-y: 0; - --un-translate-z: 0; - --un-transform: translateX(var(--un-translate-x)) - translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) - rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) - rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) - skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) - scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)); transform: var(--un-transform); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, @@ -66,24 +48,6 @@ html.dark { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .hover-transform:hover { - --un-rotate: 0; - --un-rotate-x: 0; - --un-rotate-y: 0; - --un-rotate-z: 0; - --un-scale-x: 1; - --un-scale-y: 1; - --un-scale-z: 1; - --un-skew-x: 0; - --un-skew-y: 0; - --un-translate-x: 0; - --un-translate-y: 0; - --un-translate-z: 0; - --un-transform: translateX(var(--un-translate-x)) - translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) - rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) - rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) - skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) - scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z)); --un-translate-y: -1px; transform: var(--un-transform); } @@ -175,37 +139,9 @@ html.dark { --un-bg-opacity: 0.8; --un-text-opacity: 1; color: rgba(255, 255, 255, var(--un-text-opacity)); - --un-backdrop-blur: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-brightness: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-contrast: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-grayscale: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-hue-rotate: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-invert: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-opacity: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-saturate: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-sepia: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) - var(--un-backdrop-contrast) var(--un-backdrop-grayscale) - var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) - var(--un-backdrop-opacity) var(--un-backdrop-saturate) - var(--un-backdrop-sepia); --un-backdrop-blur: blur(16px); -webkit-backdrop-filter: var(--un-backdrop-filter); backdrop-filter: var(--un-backdrop-filter); - --un-backdrop-blur: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-brightness: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-contrast: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-grayscale: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-hue-rotate: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-invert: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-opacity: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-saturate: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-sepia: var(--un-empty, /*!*/ /*!*/); - --un-backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness) - var(--un-backdrop-contrast) var(--un-backdrop-grayscale) - var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) - var(--un-backdrop-opacity) var(--un-backdrop-saturate) - var(--un-backdrop-sepia); -webkit-backdrop-filter: var(--un-backdrop-filter); backdrop-filter: var(--un-backdrop-filter); } diff --git a/test/blocklist.test.ts b/test/blocklist.test.ts index 0857651e1d..80478bc7b6 100644 --- a/test/blocklist.test.ts +++ b/test/blocklist.test.ts @@ -19,13 +19,13 @@ describe('blocklist', () => { presetUno(), ], }) - const { css: css1 } = await uno.generate('block text-red-200 hover:block', { minify: true }) - const { css: css2 } = await dos.generate('block text-red-200 hover:block', { minify: true }) + const { css: css1 } = await uno.generate('block text-red-200 hover:block', { minify: true, preflights: false }) + const { css: css2 } = await dos.generate('block text-red-200 hover:block', { minify: true, preflights: false }) expect(css1).contain('.block') expect(css1).contain('.text-red-200') expect(css2).eq('') - const { css: css3 } = await dos.generate('block text-red-200 hover:block', { minify: true }) + const { css: css3 } = await dos.generate('block text-red-200 hover:block', { minify: true, preflights: false }) expect(css3).eq('') }) }) diff --git a/test/preset-icons.test.ts b/test/preset-icons.test.ts index d2baf473d1..89497f5005 100644 --- a/test/preset-icons.test.ts +++ b/test/preset-icons.test.ts @@ -37,13 +37,13 @@ describe('preset-icons', () => { test('fixtures', async () => { const { css, layers } = await uno.generate(fixtures.join(' ')) - expect(layers).toEqual(['icons', 'default']) + expect(layers).toEqual(['preflights', 'icons', 'default']) expect(css).toMatchSnapshot() }) test('icon unit fixtures', async () => { const { css, layers } = await unoWithUnit.generate(fixtures.join(' ')) - expect(layers).toEqual(['icons', 'default']) + expect(layers).toEqual(['preflights', 'icons', 'default']) expect(css).toMatchSnapshot() }) }) diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts index ac251e2c9c..55342459e2 100644 --- a/test/preset-mini.test.ts +++ b/test/preset-mini.test.ts @@ -38,7 +38,7 @@ describe('preset-mini', () => { test('utils from preset-wind should be non-targets', async () => { const code = presetWindTargets.join(' ') - const { css, matched } = await uno.generate(code) + const { css, matched } = await uno.generate(code, { preflights: false }) expect(Array.from(matched)).toEqual([]) expect(css).toBe('') diff --git a/test/preset-tagify.test.ts b/test/preset-tagify.test.ts index 31f6a79828..c90c35648f 100644 --- a/test/preset-tagify.test.ts +++ b/test/preset-tagify.test.ts @@ -50,7 +50,9 @@ describe('tagify', () => { ` expect((await uno.generate(code)).css).toMatchInlineSnapshot(` - "/* layer: shortcuts */ + "/* layer: preflights */ + *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} + /* layer: shortcuts */ btn{padding-left:1rem;padding-right:1rem;padding-top:0.25rem;padding-bottom:0.25rem;display:inline-block;--un-bg-opacity:1;background-color:rgba(13,148,136,var(--un-bg-opacity));border-radius:0.25rem;--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));cursor:pointer;} btn:disabled{opacity:0.5;--un-bg-opacity:1;background-color:rgba(75,85,99,var(--un-bg-opacity));cursor:default;} btn:hover{--un-bg-opacity:1;background-color:rgba(15,118,110,var(--un-bg-opacity));} @@ -99,7 +101,9 @@ describe('tagify', () => { ` expect((await uno.generate(code)).css).toMatchInlineSnapshot(` - "/* layer: default */ + "/* layer: preflights */ + *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} + /* layer: default */ un-flex{display:flex;}" `) }) diff --git a/test/preset-uno.test.ts b/test/preset-uno.test.ts index a55500610e..65f16743b8 100644 --- a/test/preset-uno.test.ts +++ b/test/preset-uno.test.ts @@ -127,8 +127,8 @@ const uno = createGenerator({ test('targets', async () => { const code = targets.join(' ') - const { css } = await uno.generate(code) - const { css: css2 } = await uno.generate(code) + const { css } = await uno.generate(code, { preflights: false }) + const { css: css2 } = await uno.generate(code, { preflights: false }) const unmatched = [] for (const i of targets) { @@ -142,8 +142,8 @@ test('targets', async () => { test('targets', async () => { const code = targets2.join(' ') - const { css } = await uno.generate(code) - const { css: css2 } = await uno.generate(code) + const { css } = await uno.generate(code, { preflights: false }) + const { css: css2 } = await uno.generate(code, { preflights: false }) expect(css).toMatchSnapshot() expect(css).toEqual(css2) @@ -151,7 +151,7 @@ test('targets', async () => { test('non-targets', async () => { const code = nonTargets.join(' ') - const { css, matched } = await uno.generate(code) + const { css, matched } = await uno.generate(code, { preflights: false }) expect(Array.from(matched)).toEqual([]) expect(css).toBe('') diff --git a/test/transformer-compile-class.test.ts b/test/transformer-compile-class.test.ts index 4a13dcb62a..759692344a 100644 --- a/test/transformer-compile-class.test.ts +++ b/test/transformer-compile-class.test.ts @@ -38,13 +38,14 @@ describe('transformer-compile-class', () => { "code": "
- +
", - "css": "/* layer: shortcuts */ - .uno-qe05lz{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} + "css": "/* layer: preflights */ + *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} + /* layer: shortcuts */ .uno-qe05lz{--un-scale-x:0.05;--un-scale-y:0.05;transform:var(--un-transform);border-width:1px;border-style:solid;--un-border-opacity:1;border-color:rgba(229,231,235,var(--un-border-opacity));--un-bg-opacity:1;background-color:rgba(239,68,68,var(--un-bg-opacity));font-size:1.25rem;line-height:1.75rem;font-weight:700;} .dark .uno-qe05lz:hover{--un-bg-opacity:1;background-color:rgba(34,197,94,var(--un-bg-opacity));} .uno-qlmcrp{text-align:center;}