import { isString, warnOnce, definePreset } from '@unocss/core'; import { presetMini } from '@unocss/preset-mini'; export { colors, preflights } from '@unocss/preset-mini'; import { h, globalKeywords, makeGlobalStaticRules, isSize, positionMap, parseColor, colorResolver, resolveBreakpoints, colorableShadows, directionMap, directionSize, variantMatcher, variantParentMatcher, hasParseableColor } from '@unocss/preset-mini/utils'; import * as _ from '@unocss/preset-mini/rules'; import { varEmpty, borderStyles, transformBase, boxShadowsBase, ringBase } from '@unocss/preset-mini/rules'; import { theme as theme$1 } from '@unocss/preset-mini/theme'; import { colorToString, colorOpacityToString } from '@unocss/rule-utils'; import { variants as variants$1 } from '@unocss/preset-mini/variants'; const animations = [ [/^(?:animate-)?keyframes-(.+)$/, ([, name], { theme }) => { const kf = theme.animation?.keyframes?.[name]; if (kf) { return [ `@keyframes ${name}${kf}`, { animation: name } ]; } }, { autocomplete: ["animate-keyframes-$animation.keyframes", "keyframes-$animation.keyframes"] }], [/^animate-(.+)$/, ([, name], { theme }) => { const kf = theme.animation?.keyframes?.[name]; if (kf) { const duration = theme.animation?.durations?.[name] ?? "1s"; const timing = theme.animation?.timingFns?.[name] ?? "linear"; const count = theme.animation?.counts?.[name] ?? 1; const props = theme.animation?.properties?.[name]; return [ `@keyframes ${name}${kf}`, { animation: `${name} ${duration} ${timing} ${count}`, ...props } ]; } return { animation: h.bracket.cssvar(name) }; }, { autocomplete: "animate-$animation.keyframes" }], [/^animate-name-(.+)/, ([, d]) => ({ "animation-name": h.bracket.cssvar(d) ?? d })], // timings [/^animate-duration-(.+)$/, ([, d], { theme }) => ({ "animation-duration": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d) }), { autocomplete: ["animate-duration", "animate-duration-$duration"] }], [/^animate-delay-(.+)$/, ([, d], { theme }) => ({ "animation-delay": theme.duration?.[d || "DEFAULT"] ?? h.bracket.cssvar.time(d) }), { autocomplete: ["animate-delay", "animate-delay-$duration"] }], [/^animate-ease(?:-(.+))?$/, ([, d], { theme }) => ({ "animation-timing-function": theme.easing?.[d || "DEFAULT"] ?? h.bracket.cssvar(d) }), { autocomplete: ["animate-ease", "animate-ease-$easing"] }], // fill mode [/^animate-(fill-mode-|fill-|mode-)?(.+)$/, ([, t, d]) => ["none", "forwards", "backwards", "both", ...[t ? globalKeywords : []]].includes(d) ? { "animation-fill-mode": d } : void 0, { autocomplete: [ "animate-(fill|mode|fill-mode)", "animate-(fill|mode|fill-mode)-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)", "animate-(none|forwards|backwards|both|inherit|initial|revert|revert-layer|unset)" ] }], // direction [/^animate-(direction-)?(.+)$/, ([, t, d]) => ["normal", "reverse", "alternate", "alternate-reverse", ...[t ? globalKeywords : []]].includes(d) ? { "animation-direction": d } : void 0, { autocomplete: [ "animate-direction", "animate-direction-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)", "animate-(normal|reverse|alternate|alternate-reverse|inherit|initial|revert|revert-layer|unset)" ] }], // others [/^animate-(?:iteration-count-|iteration-|count-)(.+)$/, ([, d]) => ({ "animation-iteration-count": h.bracket.cssvar(d) ?? d.replace(/\-/g, ",") }), { autocomplete: ["animate-(iteration|count|iteration-count)", "animate-(iteration|count|iteration-count)-"] }], [/^animate-(play-state-|play-|state-)?(.+)$/, ([, t, d]) => ["paused", "running", ...[t ? globalKeywords : []]].includes(d) ? { "animation-play-state": d } : void 0, { autocomplete: [ "animate-(play|state|play-state)", "animate-(play|state|play-state)-(paused|running|inherit|initial|revert|revert-layer|unset)", "animate-(paused|running|inherit|initial|revert|revert-layer|unset)" ] }], ["animate-none", { animation: "none" }], ...makeGlobalStaticRules("animate", "animation") ]; function bgGradientToValue(cssColor) { if (cssColor) return colorToString(cssColor, 0); return "rgb(255 255 255 / 0)"; } function bgGradientColorValue(mode, cssColor, color, alpha) { if (cssColor) { if (alpha != null) return colorToString(cssColor, alpha); else return colorToString(cssColor, `var(--un-${mode}-opacity, ${colorOpacityToString(cssColor)})`); } return colorToString(color, alpha); } function bgGradientColorResolver() { return ([, mode, body], { theme }) => { const data = parseColor(body, theme, "backgroundColor"); if (!data) return; const { alpha, color, cssColor } = data; if (!color) return; const colorString = bgGradientColorValue(mode, cssColor, color, alpha); switch (mode) { case "from": return { "--un-gradient-from-position": "0%", "--un-gradient-from": `${colorString} var(--un-gradient-from-position)`, "--un-gradient-to-position": "100%", "--un-gradient-to": `${bgGradientToValue(cssColor)} var(--un-gradient-to-position)`, "--un-gradient-stops": "var(--un-gradient-from), var(--un-gradient-to)" }; case "via": return { "--un-gradient-via-position": "50%", "--un-gradient-to": bgGradientToValue(cssColor), "--un-gradient-stops": `var(--un-gradient-from), ${colorString} var(--un-gradient-via-position), var(--un-gradient-to)` }; case "to": return { "--un-gradient-to-position": "100%", "--un-gradient-to": `${colorString} var(--un-gradient-to-position)` }; } }; } function bgGradientPositionResolver() { return ([, mode, body]) => { return { [`--un-gradient-${mode}-position`]: `${Number(h.bracket.cssvar.percent(body)) * 100}%` }; }; } const bgUrlRE = /^\[url\(.+\)\]$/; const bgLengthRE = /^\[length:.+\]$/; const bgPositionRE = /^\[position:.+\]$/; const backgroundStyles = [ [/^bg-(.+)$/, ([, d]) => { if (bgUrlRE.test(d)) return { "--un-url": h.bracket(d), "background-image": "var(--un-url)" }; if (bgLengthRE.test(d) && h.bracketOfLength(d) != null) return { "background-size": h.bracketOfLength(d).split(" ").map((e) => h.fraction.auto.px.cssvar(e) ?? e).join(" ") }; if ((isSize(d) || bgPositionRE.test(d)) && h.bracketOfPosition(d) != null) return { "background-position": h.bracketOfPosition(d).split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") }; }], // gradients [/^bg-gradient-(.+)$/, ([, d]) => ({ "--un-gradient": h.bracket(d) }), { autocomplete: ["bg-gradient", "bg-gradient-(from|to|via)", "bg-gradient-(from|to|via)-$colors", "bg-gradient-(from|to|via)-(op|opacity)", "bg-gradient-(from|to|via)-(op|opacity)-"] }], [/^(?:bg-gradient-)?stops-(\[.+\])$/, ([, s]) => ({ "--un-gradient-stops": h.bracket(s) })], [/^(?:bg-gradient-)?(from)-(.+)$/, bgGradientColorResolver()], [/^(?:bg-gradient-)?(via)-(.+)$/, bgGradientColorResolver()], [/^(?:bg-gradient-)?(to)-(.+)$/, bgGradientColorResolver()], [/^(?:bg-gradient-)?(from|via|to)-op(?:acity)?-?(.+)$/, ([, position, opacity]) => ({ [`--un-${position}-opacity`]: h.bracket.percent(opacity) })], [/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()], // images [/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({ "background-image": `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgb(255 255 255 / 0))))` }), { autocomplete: ["bg-gradient-repeating", "bg-gradient-(linear|radial|conic)", "bg-gradient-repeating-(linear|radial|conic)"] }], // ignore any center position [/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => { if (d in positionMap) { return { "--un-gradient-shape": `to ${positionMap[d]}`, "--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)", "background-image": "linear-gradient(var(--un-gradient))" }; } }, { autocomplete: `bg-gradient-to-(${Object.keys(positionMap).filter((k) => k.length <= 2 && Array.from(k).every((c) => "rltb".includes(c))).join("|")})` }], [/^(?:bg-gradient-)?shape-(.+)$/, ([, d]) => { const v = d in positionMap ? `to ${positionMap[d]}` : h.bracket(d); if (v != null) { return { "--un-gradient-shape": v, "--un-gradient": "var(--un-gradient-shape), var(--un-gradient-stops)" }; } }, { autocomplete: ["bg-gradient-shape", `bg-gradient-shape-(${Object.keys(positionMap).join("|")})`, `shape-(${Object.keys(positionMap).join("|")})`] }], ["bg-none", { "background-image": "none" }], ["box-decoration-slice", { "box-decoration-break": "slice" }], ["box-decoration-clone", { "box-decoration-break": "clone" }], ...makeGlobalStaticRules("box-decoration", "box-decoration-break"), // size ["bg-auto", { "background-size": "auto" }], ["bg-cover", { "background-size": "cover" }], ["bg-contain", { "background-size": "contain" }], // attachments ["bg-fixed", { "background-attachment": "fixed" }], ["bg-local", { "background-attachment": "local" }], ["bg-scroll", { "background-attachment": "scroll" }], // clips ["bg-clip-border", { "-webkit-background-clip": "border-box", "background-clip": "border-box" }], ["bg-clip-content", { "-webkit-background-clip": "content-box", "background-clip": "content-box" }], ["bg-clip-padding", { "-webkit-background-clip": "padding-box", "background-clip": "padding-box" }], ["bg-clip-text", { "-webkit-background-clip": "text", "background-clip": "text" }], ...globalKeywords.map((keyword) => [`bg-clip-${keyword}`, { "-webkit-background-clip": keyword, "background-clip": keyword }]), // positions // skip 1 & 2 letters shortcut [/^bg-([-\w]{3,})$/, ([, s]) => ({ "background-position": positionMap[s] })], // repeats ["bg-repeat", { "background-repeat": "repeat" }], ["bg-no-repeat", { "background-repeat": "no-repeat" }], ["bg-repeat-x", { "background-repeat": "repeat-x" }], ["bg-repeat-y", { "background-repeat": "repeat-y" }], ["bg-repeat-round", { "background-repeat": "round" }], ["bg-repeat-space", { "background-repeat": "space" }], ...makeGlobalStaticRules("bg-repeat", "background-repeat"), // origins ["bg-origin-border", { "background-origin": "border-box" }], ["bg-origin-padding", { "background-origin": "padding-box" }], ["bg-origin-content", { "background-origin": "content-box" }], ...makeGlobalStaticRules("bg-origin", "background-origin") ]; const listStyles = { "disc": "disc", "circle": "circle", "square": "square", "decimal": "decimal", "zero-decimal": "decimal-leading-zero", "greek": "lower-greek", "roman": "lower-roman", "upper-roman": "upper-roman", "alpha": "lower-alpha", "upper-alpha": "upper-alpha", "latin": "lower-latin", "upper-latin": "upper-latin" }; const listStyle = [ // base [/^list-(.+?)(?:-(outside|inside))?$/, ([, alias, position]) => { const style = listStyles[alias]; if (style) { if (position) { return { "list-style-position": position, "list-style-type": style }; } return { "list-style-type": style }; } }, { autocomplete: [`list-(${Object.keys(listStyles).join("|")})`, `list-(${Object.keys(listStyles).join("|")})-(outside|inside)`] }], // styles ["list-outside", { "list-style-position": "outside" }], ["list-inside", { "list-style-position": "inside" }], ["list-none", { "list-style-type": "none" }], // image [/^list-image-(.+)$/, ([, d]) => { if (/^\[url\(.+\)\]$/.test(d)) return { "list-style-image": h.bracket(d) }; }], ["list-image-none", { "list-style-image": "none" }], ...makeGlobalStaticRules("list", "list-style-type") ]; const accents = [ [/^accent-(.+)$/, colorResolver("accent-color", "accent", "accentColor"), { autocomplete: "accent-$colors" }], [/^accent-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-accent-opacity": h.bracket.percent(d) }), { autocomplete: ["accent-(op|opacity)", "accent-(op|opacity)-"] }] ]; const carets = [ [/^caret-(.+)$/, colorResolver("caret-color", "caret", "textColor"), { autocomplete: "caret-$colors" }], [/^caret-op(?:acity)?-?(.+)$/, ([, d]) => ({ "--un-caret-opacity": h.bracket.percent(d) }), { autocomplete: ["caret-(op|opacity)", "caret-(op|opacity)-"] }] ]; const imageRenderings = [ ["image-render-auto", { "image-rendering": "auto" }], ["image-render-edge", { "image-rendering": "crisp-edges" }], ["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"] ]] ]; const overscrolls = [ ["overscroll-auto", { "overscroll-behavior": "auto" }], ["overscroll-contain", { "overscroll-behavior": "contain" }], ["overscroll-none", { "overscroll-behavior": "none" }], ...makeGlobalStaticRules("overscroll", "overscroll-behavior"), ["overscroll-x-auto", { "overscroll-behavior-x": "auto" }], ["overscroll-x-contain", { "overscroll-behavior-x": "contain" }], ["overscroll-x-none", { "overscroll-behavior-x": "none" }], ...makeGlobalStaticRules("overscroll-x", "overscroll-behavior-x"), ["overscroll-y-auto", { "overscroll-behavior-y": "auto" }], ["overscroll-y-contain", { "overscroll-behavior-y": "contain" }], ["overscroll-y-none", { "overscroll-behavior-y": "none" }], ...makeGlobalStaticRules("overscroll-y", "overscroll-behavior-y") ]; const scrollBehaviors = [ ["scroll-auto", { "scroll-behavior": "auto" }], ["scroll-smooth", { "scroll-behavior": "smooth" }], ...makeGlobalStaticRules("scroll", "scroll-behavior") ]; const columns = [ [/^columns-(.+)$/, ([, v]) => ({ columns: h.bracket.global.number.auto.numberWithUnit(v) }), { autocomplete: "columns-" }], // break before ["break-before-auto", { "break-before": "auto" }], ["break-before-avoid", { "break-before": "avoid" }], ["break-before-all", { "break-before": "all" }], ["break-before-avoid-page", { "break-before": "avoid-page" }], ["break-before-page", { "break-before": "page" }], ["break-before-left", { "break-before": "left" }], ["break-before-right", { "break-before": "right" }], ["break-before-column", { "break-before": "column" }], ...makeGlobalStaticRules("break-before"), // break inside ["break-inside-auto", { "break-inside": "auto" }], ["break-inside-avoid", { "break-inside": "avoid" }], ["break-inside-avoid-page", { "break-inside": "avoid-page" }], ["break-inside-avoid-column", { "break-inside": "avoid-column" }], ...makeGlobalStaticRules("break-inside"), // break after ["break-after-auto", { "break-after": "auto" }], ["break-after-avoid", { "break-after": "avoid" }], ["break-after-all", { "break-after": "all" }], ["break-after-avoid-page", { "break-after": "avoid-page" }], ["break-after-page", { "break-after": "page" }], ["break-after-left", { "break-after": "left" }], ["break-after-right", { "break-after": "right" }], ["break-after-column", { "break-after": "column" }], ...makeGlobalStaticRules("break-after") ]; const queryMatcher = /@media \(min-width: (.+)\)/; const container = [ [ /^__container$/, (m, context) => { const { theme, variantHandlers } = context; const themePadding = theme.container?.padding; let padding; if (isString(themePadding)) padding = themePadding; else padding = themePadding?.DEFAULT; const themeMaxWidth = theme.container?.maxWidth; let maxWidth; for (const v of variantHandlers) { const query = v.handle?.({}, (x) => x)?.parent; if (isString(query)) { const match = query.match(queryMatcher)?.[1]; if (match) { const bp = resolveBreakpoints(context) ?? []; const matchBp = bp.find((i) => i.size === match)?.point; if (!themeMaxWidth) maxWidth = match; else if (matchBp) maxWidth = themeMaxWidth?.[matchBp]; if (matchBp && !isString(themePadding)) padding = themePadding?.[matchBp] ?? padding; } } } const css = { "max-width": maxWidth }; if (!variantHandlers.length) css.width = "100%"; if (theme.container?.center) { css["margin-left"] = "auto"; css["margin-right"] = "auto"; } if (themePadding) { css["padding-left"] = padding; css["padding-right"] = padding; } return css; }, { internal: true } ] ]; const containerShortcuts = [ [/^(?:(\w+)[:-])?container$/, ([, bp], context) => { let points = (resolveBreakpoints(context) ?? []).map((i) => i.point); if (bp) { if (!points.includes(bp)) return; points = points.slice(points.indexOf(bp)); } const shortcuts = points.map((p) => `${p}:__container`); if (!bp) shortcuts.unshift("__container"); return shortcuts; }] ]; const filterBase = { "--un-blur": varEmpty, "--un-brightness": varEmpty, "--un-contrast": varEmpty, "--un-drop-shadow": varEmpty, "--un-grayscale": varEmpty, "--un-hue-rotate": varEmpty, "--un-invert": varEmpty, "--un-saturate": varEmpty, "--un-sepia": varEmpty }; const filterProperty = "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)"; const backdropFilterBase = { "--un-backdrop-blur": varEmpty, "--un-backdrop-brightness": varEmpty, "--un-backdrop-contrast": varEmpty, "--un-backdrop-grayscale": varEmpty, "--un-backdrop-hue-rotate": varEmpty, "--un-backdrop-invert": varEmpty, "--un-backdrop-opacity": varEmpty, "--un-backdrop-saturate": varEmpty, "--un-backdrop-sepia": varEmpty }; const backdropFilterProperty = "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)"; function percentWithDefault(str) { let v = h.bracket.cssvar(str || ""); if (v != null) return v; v = str ? h.percent(str) : "1"; if (v != null && Number.parseFloat(v) <= 1) return v; } function toFilter(varName, resolver) { return ([, b, s], { theme }) => { const value = resolver(s, theme) ?? (s === "none" ? "0" : ""); if (value !== "") { if (b) { return { [`--un-${b}${varName}`]: `${varName}(${value})`, "-webkit-backdrop-filter": backdropFilterProperty, "backdrop-filter": backdropFilterProperty }; } else { return { [`--un-${varName}`]: `${varName}(${value})`, filter: filterProperty }; } } }; } function dropShadowResolver([, s], { theme }) { let v = theme.dropShadow?.[s || "DEFAULT"]; if (v != null) { const shadows = colorableShadows(v, "--un-drop-shadow-color"); return { "--un-drop-shadow": `drop-shadow(${shadows.join(") drop-shadow(")})`, "filter": filterProperty }; } v = h.bracket.cssvar(s); if (v != null) { return { "--un-drop-shadow": `drop-shadow(${v})`, "filter": filterProperty }; } } const filters = [ // filters [/^(?:(backdrop-)|filter-)?blur(?:-(.+))?$/, toFilter("blur", (s, theme) => theme.blur?.[s || "DEFAULT"] || h.bracket.cssvar.px(s)), { autocomplete: ["(backdrop|filter)-blur-$blur", "blur-$blur", "filter-blur"] }], [/^(?:(backdrop-)|filter-)?brightness-(.+)$/, toFilter("brightness", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-brightness-", "brightness-"] }], [/^(?:(backdrop-)|filter-)?contrast-(.+)$/, toFilter("contrast", (s) => h.bracket.cssvar.percent(s)), { autocomplete: ["(backdrop|filter)-contrast-", "contrast-"] }], // drop-shadow only on filter [/^(?:filter-)?drop-shadow(?:-(.+))?$/, dropShadowResolver, { autocomplete: [ "filter-drop", "filter-drop-shadow", "filter-drop-shadow-color", "drop-shadow", "drop-shadow-color", "filter-drop-shadow-$dropShadow", "drop-shadow-$dropShadow", "filter-drop-shadow-color-$colors", "drop-shadow-color-$colors", "filter-drop-shadow-color-(op|opacity)", "drop-shadow-color-(op|opacity)", "filter-drop-shadow-color-(op|opacity)-", "drop-shadow-color-(op|opacity)-" ] }], [/^(?:filter-)?drop-shadow-color-(.+)$/, colorResolver("--un-drop-shadow-color", "drop-shadow", "shadowColor")], [/^(?: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-)?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-"] }], // 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-"] }], // base ["filter", { filter: filterProperty }], ["backdrop-filter", { "-webkit-backdrop-filter": backdropFilterProperty, "backdrop-filter": backdropFilterProperty }], // nones ["filter-none", { filter: "none" }], ["backdrop-filter-none", { "-webkit-backdrop-filter": "none", "backdrop-filter": "none" }], ...globalKeywords.map((keyword) => [`filter-${keyword}`, { filter: keyword }]), ...globalKeywords.map((keyword) => [`backdrop-filter-${keyword}`, { "-webkit-backdrop-filter": keyword, "backdrop-filter": keyword }]) ]; const spaces = [ [/^space-([xy])-(-?.+)$/, handlerSpace, { autocomplete: ["space-(x|y|block|inline)", "space-(x|y|block|inline)-reverse", "space-(x|y|block|inline)-$spacing"] }], [/^space-([xy])-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })], [/^space-(block|inline)-(-?.+)$/, handlerSpace], [/^space-(block|inline)-reverse$/, ([, d]) => ({ [`--un-space-${d}-reverse`]: 1 })] ]; function handlerSpace([, d, s], { theme }) { let v = theme.spacing?.[s || "DEFAULT"] ?? h.bracket.cssvar.auto.fraction.rem(s || "1"); if (v != null) { if (v === "0") v = "0px"; const results = directionMap[d].map((item) => { const key = `margin${item}`; const value = item.endsWith("right") || item.endsWith("bottom") ? `calc(${v} * var(--un-space-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-space-${d}-reverse)))`; return [key, value]; }); if (results) { return [ [`--un-space-${d}-reverse`, 0], ...results ]; } } } const textTransforms = [ // tailwind compat ["uppercase", { "text-transform": "uppercase" }], ["lowercase", { "text-transform": "lowercase" }], ["capitalize", { "text-transform": "capitalize" }], ["normal-case", { "text-transform": "none" }] ]; const hyphens = [ ...["manual", "auto", "none", ...globalKeywords].map((keyword) => [`hyphens-${keyword}`, { "-webkit-hyphens": keyword, "-ms-hyphens": keyword, "hyphens": keyword }]) ]; const writingModes = [ ["write-vertical-right", { "writing-mode": "vertical-rl" }], ["write-vertical-left", { "writing-mode": "vertical-lr" }], ["write-normal", { "writing-mode": "horizontal-tb" }], ...makeGlobalStaticRules("write", "writing-mode") ]; const writingOrientations = [ ["write-orient-mixed", { "text-orientation": "mixed" }], ["write-orient-sideways", { "text-orientation": "sideways" }], ["write-orient-upright", { "text-orientation": "upright" }], ...makeGlobalStaticRules("write-orient", "text-orientation") ]; const screenReadersAccess = [ [ "sr-only", { "position": "absolute", "width": "1px", "height": "1px", "padding": "0", "margin": "-1px", "overflow": "hidden", "clip": "rect(0,0,0,0)", "white-space": "nowrap", "border-width": 0 } ], [ "not-sr-only", { "position": "static", "width": "auto", "height": "auto", "padding": "0", "margin": "0", "overflow": "visible", "clip": "auto", "white-space": "normal" } ] ]; const isolations = [ ["isolate", { isolation: "isolate" }], ["isolate-auto", { isolation: "auto" }], ["isolation-auto", { isolation: "auto" }] ]; const objectPositions = [ // object fit ["object-cover", { "object-fit": "cover" }], ["object-contain", { "object-fit": "contain" }], ["object-fill", { "object-fit": "fill" }], ["object-scale-down", { "object-fit": "scale-down" }], ["object-none", { "object-fit": "none" }], // object position [/^object-(.+)$/, ([, d]) => { if (positionMap[d]) return { "object-position": positionMap[d] }; if (h.bracketOfPosition(d) != null) return { "object-position": h.bracketOfPosition(d).split(" ").map((e) => h.position.fraction.auto.px.cssvar(e) ?? e).join(" ") }; }, { autocomplete: `object-(${Object.keys(positionMap).join("|")})` }] ]; const backgroundBlendModes = [ ["bg-blend-multiply", { "background-blend-mode": "multiply" }], ["bg-blend-screen", { "background-blend-mode": "screen" }], ["bg-blend-overlay", { "background-blend-mode": "overlay" }], ["bg-blend-darken", { "background-blend-mode": "darken" }], ["bg-blend-lighten", { "background-blend-mode": "lighten" }], ["bg-blend-color-dodge", { "background-blend-mode": "color-dodge" }], ["bg-blend-color-burn", { "background-blend-mode": "color-burn" }], ["bg-blend-hard-light", { "background-blend-mode": "hard-light" }], ["bg-blend-soft-light", { "background-blend-mode": "soft-light" }], ["bg-blend-difference", { "background-blend-mode": "difference" }], ["bg-blend-exclusion", { "background-blend-mode": "exclusion" }], ["bg-blend-hue", { "background-blend-mode": "hue" }], ["bg-blend-saturation", { "background-blend-mode": "saturation" }], ["bg-blend-color", { "background-blend-mode": "color" }], ["bg-blend-luminosity", { "background-blend-mode": "luminosity" }], ["bg-blend-normal", { "background-blend-mode": "normal" }], ...makeGlobalStaticRules("bg-blend", "background-blend") ]; const mixBlendModes = [ ["mix-blend-multiply", { "mix-blend-mode": "multiply" }], ["mix-blend-screen", { "mix-blend-mode": "screen" }], ["mix-blend-overlay", { "mix-blend-mode": "overlay" }], ["mix-blend-darken", { "mix-blend-mode": "darken" }], ["mix-blend-lighten", { "mix-blend-mode": "lighten" }], ["mix-blend-color-dodge", { "mix-blend-mode": "color-dodge" }], ["mix-blend-color-burn", { "mix-blend-mode": "color-burn" }], ["mix-blend-hard-light", { "mix-blend-mode": "hard-light" }], ["mix-blend-soft-light", { "mix-blend-mode": "soft-light" }], ["mix-blend-difference", { "mix-blend-mode": "difference" }], ["mix-blend-exclusion", { "mix-blend-mode": "exclusion" }], ["mix-blend-hue", { "mix-blend-mode": "hue" }], ["mix-blend-saturation", { "mix-blend-mode": "saturation" }], ["mix-blend-color", { "mix-blend-mode": "color" }], ["mix-blend-luminosity", { "mix-blend-mode": "luminosity" }], ["mix-blend-plus-lighter", { "mix-blend-mode": "plus-lighter" }], ["mix-blend-normal", { "mix-blend-mode": "normal" }], ...makeGlobalStaticRules("mix-blend") ]; const borderSpacingBase = { "--un-border-spacing-x": 0, "--un-border-spacing-y": 0 }; const borderSpacingProperty = "var(--un-border-spacing-x) var(--un-border-spacing-y)"; const tables = [ // displays ["inline-table", { display: "inline-table" }], ["table", { display: "table" }], ["table-caption", { display: "table-caption" }], ["table-cell", { display: "table-cell" }], ["table-column", { display: "table-column" }], ["table-column-group", { display: "table-column-group" }], ["table-footer-group", { display: "table-footer-group" }], ["table-header-group", { display: "table-header-group" }], ["table-row", { display: "table-row" }], ["table-row-group", { display: "table-row-group" }], // layouts ["border-collapse", { "border-collapse": "collapse" }], ["border-separate", { "border-collapse": "separate" }], [/^border-spacing-(.+)$/, ([, s], { theme }) => { const v = theme.spacing?.[s] ?? h.bracket.cssvar.global.auto.fraction.rem(s); if (v != null) { return { "--un-border-spacing-x": v, "--un-border-spacing-y": v, "border-spacing": borderSpacingProperty }; } }, { autocomplete: ["border-spacing", "border-spacing-$spacing"] }], [/^border-spacing-([xy])-(.+)$/, ([, d, s], { theme }) => { const v = theme.spacing?.[s] ?? h.bracket.cssvar.global.auto.fraction.rem(s); if (v != null) { return { [`--un-border-spacing-${d}`]: v, "border-spacing": borderSpacingProperty }; } }, { autocomplete: ["border-spacing-(x|y)", "border-spacing-(x|y)-$spacing"] }], ["caption-top", { "caption-side": "top" }], ["caption-bottom", { "caption-side": "bottom" }], ["table-auto", { "table-layout": "auto" }], ["table-fixed", { "table-layout": "fixed" }], ["table-empty-cells-visible", { "empty-cells": "show" }], ["table-empty-cells-hidden", { "empty-cells": "hide" }] ]; const variablesAbbrMap = { "bg-blend": "background-blend-mode", "bg-clip": "-webkit-background-clip", "bg-gradient": "linear-gradient", "bg-image": "background-image", "bg-origin": "background-origin", "bg-position": "background-position", "bg-repeat": "background-repeat", "bg-size": "background-size", "mix-blend": "mix-blend-mode", "object": "object-fit", "object-position": "object-position", "write": "writing-mode", "write-orient": "text-orientation" }; const cssVariables = [ [/^(.+?)-(\$.+)$/, ([, name, varname]) => { const prop = variablesAbbrMap[name]; if (prop) return { [prop]: h.cssvar(varname) }; }] ]; const divides = [ // divides [/^divide-?([xy])$/, handlerDivide, { autocomplete: ["divide-(x|y|block|inline)", "divide-(x|y|block|inline)-reverse", "divide-(x|y|block|inline)-$lineWidth"] }], [/^divide-?([xy])-?(-?.+)$/, handlerDivide], [/^divide-?([xy])-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })], [/^divide-(block|inline)$/, handlerDivide], [/^divide-(block|inline)-(-?.+)$/, handlerDivide], [/^divide-(block|inline)-reverse$/, ([, d]) => ({ [`--un-divide-${d}-reverse`]: 1 })], // color & opacity [/^divide-(.+)$/, colorResolver("border-color", "divide", "borderColor"), { autocomplete: "divide-$colors" }], [/^divide-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-divide-opacity": h.bracket.percent(opacity) }), { autocomplete: ["divide-(op|opacity)", "divide-(op|opacity)-"] }], // styles ...borderStyles.map((style) => [`divide-${style}`, { "border-style": style }]) ]; function handlerDivide([, d, s], { theme }) { let v = theme.lineWidth?.[s || "DEFAULT"] ?? h.bracket.cssvar.px(s || "1"); if (v != null) { if (v === "0") v = "0px"; const results = directionMap[d].map((item) => { const key = `border${item}-width`; const value = item.endsWith("right") || item.endsWith("bottom") ? `calc(${v} * var(--un-divide-${d}-reverse))` : `calc(${v} * calc(1 - var(--un-divide-${d}-reverse)))`; return [key, value]; }); if (results) { return [ [`--un-divide-${d}-reverse`, 0], ...results ]; } } } const lineClamps = [ [/^line-clamp-(\d+)$/, ([, v]) => ({ "overflow": "hidden", "display": "-webkit-box", "-webkit-box-orient": "vertical", "-webkit-line-clamp": v, "line-clamp": v }), { autocomplete: ["line-clamp", "line-clamp-"] }], ...["none", ...globalKeywords].map((keyword) => [`line-clamp-${keyword}`, { "overflow": "visible", "display": "block", "-webkit-box-orient": "horizontal", "-webkit-line-clamp": keyword, "line-clamp": keyword }]) ]; const fontVariantNumericBase = { "--un-ordinal": varEmpty, "--un-slashed-zero": varEmpty, "--un-numeric-figure": varEmpty, "--un-numeric-spacing": varEmpty, "--un-numeric-fraction": varEmpty }; function toEntries(entry) { return { ...entry, "font-variant-numeric": "var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction)" }; } const fontVariantNumeric = [ [/^ordinal$/, () => toEntries({ "--un-ordinal": "ordinal" }), { autocomplete: "ordinal" }], [/^slashed-zero$/, () => toEntries({ "--un-slashed-zero": "slashed-zero" }), { autocomplete: "slashed-zero" }], [/^lining-nums$/, () => toEntries({ "--un-numeric-figure": "lining-nums" }), { autocomplete: "lining-nums" }], [/^oldstyle-nums$/, () => toEntries({ "--un-numeric-figure": "oldstyle-nums" }), { autocomplete: "oldstyle-nums" }], [/^proportional-nums$/, () => toEntries({ "--un-numeric-spacing": "proportional-nums" }), { autocomplete: "proportional-nums" }], [/^tabular-nums$/, () => toEntries({ "--un-numeric-spacing": "tabular-nums" }), { autocomplete: "tabular-nums" }], [/^diagonal-fractions$/, () => toEntries({ "--un-numeric-fraction": "diagonal-fractions" }), { autocomplete: "diagonal-fractions" }], [/^stacked-fractions$/, () => toEntries({ "--un-numeric-fraction": "stacked-fractions" }), { autocomplete: "stacked-fractions" }], ["normal-nums", { "font-variant-numeric": "normal" }] ]; const touchActionBase = { "--un-pan-x": varEmpty, "--un-pan-y": varEmpty, "--un-pinch-zoom": varEmpty }; const touchActionProperty = "var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom)"; const touchActions = [ [/^touch-pan-(x|left|right)$/, ([, d]) => ({ "--un-pan-x": `pan-${d}`, "touch-action": touchActionProperty }), { autocomplete: ["touch-pan", "touch-pan-(x|left|right|y|up|down)"] }], [/^touch-pan-(y|up|down)$/, ([, d]) => ({ "--un-pan-y": `pan-${d}`, "touch-action": touchActionProperty })], ["touch-pinch-zoom", { "--un-pinch-zoom": "pinch-zoom", "touch-action": touchActionProperty }], ["touch-auto", { "touch-action": "auto" }], ["touch-manipulation", { "touch-action": "manipulation" }], ["touch-none", { "touch-action": "none" }], ...makeGlobalStaticRules("touch", "touch-action") ]; const scrollSnapTypeBase = { "--un-scroll-snap-strictness": "proximity" }; const scrolls = [ // snap type [/^snap-(x|y)$/, ([, d]) => ({ "scroll-snap-type": `${d} var(--un-scroll-snap-strictness)` }), { autocomplete: "snap-(x|y|both)" }], [/^snap-both$/, () => ({ "scroll-snap-type": "both var(--un-scroll-snap-strictness)" })], ["snap-mandatory", { "--un-scroll-snap-strictness": "mandatory" }], ["snap-proximity", { "--un-scroll-snap-strictness": "proximity" }], ["snap-none", { "scroll-snap-type": "none" }], // snap align ["snap-start", { "scroll-snap-align": "start" }], ["snap-end", { "scroll-snap-align": "end" }], ["snap-center", { "scroll-snap-align": "center" }], ["snap-align-none", { "scroll-snap-align": "none" }], // snap stop ["snap-normal", { "scroll-snap-stop": "normal" }], ["snap-always", { "scroll-snap-stop": "always" }], // scroll margin [/^scroll-ma?()-?(-?.+)$/, directionSize("scroll-margin"), { autocomplete: [ "scroll-(m|p|ma|pa|block|inline)", "scroll-(m|p|ma|pa|block|inline)-$spacing", "scroll-(m|p|ma|pa|block|inline)-(x|y|r|l|t|b|bs|be|is|ie)", "scroll-(m|p|ma|pa|block|inline)-(x|y|r|l|t|b|bs|be|is|ie)-$spacing" ] }], [/^scroll-m-?([xy])-?(-?.+)$/, directionSize("scroll-margin")], [/^scroll-m-?([rltb])-?(-?.+)$/, directionSize("scroll-margin")], [/^scroll-m-(block|inline)-(-?.+)$/, directionSize("scroll-margin")], [/^scroll-m-?([bi][se])-?(-?.+)$/, directionSize("scroll-margin")], // scroll padding [/^scroll-pa?()-?(-?.+)$/, directionSize("scroll-padding")], [/^scroll-p-?([xy])-?(-?.+)$/, directionSize("scroll-padding")], [/^scroll-p-?([rltb])-?(-?.+)$/, directionSize("scroll-padding")], [/^scroll-p-(block|inline)-(-?.+)$/, directionSize("scroll-padding")], [/^scroll-p-?([bi][se])-?(-?.+)$/, directionSize("scroll-padding")] ]; const placeholders = [ // The prefix `$ ` is intentional. This rule is not to be matched directly from user-generated token. // See variants/placeholder. [/^\$ placeholder-(.+)$/, colorResolver("color", "placeholder", "accentColor"), { autocomplete: "placeholder-$colors" }], [/^\$ placeholder-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ "--un-placeholder-opacity": h.bracket.percent(opacity) }), { autocomplete: ["placeholder-(op|opacity)", "placeholder-(op|opacity)-"] }] ]; const viewTransition = [ [/^view-transition-([\w_-]+)$/, ([, name]) => { return { "view-transition-name": name }; }] ]; const rules = [ _.cssVariables, cssVariables, _.cssProperty, container, _.contains, screenReadersAccess, _.pointerEvents, _.appearances, _.positions, _.insets, lineClamps, isolations, _.zIndexes, _.orders, _.grids, _.floats, _.margins, _.boxSizing, _.displays, _.aspectRatio, _.sizes, _.flex, tables, _.transforms, animations, _.cursors, touchActions, _.userSelects, _.resizes, scrolls, listStyle, _.appearance, columns, _.placements, _.alignments, _.justifies, _.gaps, _.flexGridJustifiesAlignments, spaces, divides, _.overflows, overscrolls, scrollBehaviors, _.textOverflows, _.whitespaces, _.breaks, _.borders, _.bgColors, backgroundStyles, _.svgUtilities, objectPositions, _.paddings, _.textAligns, _.textIndents, _.textWraps, _.verticalAligns, _.fonts, _.textTransforms, textTransforms, _.fontStyles, fontVariantNumeric, _.textColors, _.textDecorations, _.fontSmoothings, _.tabSizes, _.textStrokes, _.textShadows, hyphens, writingModes, writingOrientations, carets, accents, _.opacity, backgroundBlendModes, mixBlendModes, _.boxShadows, _.outline, _.rings, imageRenderings, filters, _.transitions, _.willChange, _.contentVisibility, _.contents, placeholders, _.containerParent, viewTransition, // should be the last _.questionMark ].flat(1); const shortcuts = [ ...containerShortcuts ]; const theme = { ...theme$1, aria: { busy: 'busy="true"', checked: 'checked="true"', disabled: 'disabled="true"', expanded: 'expanded="true"', hidden: 'hidden="true"', pressed: 'pressed="true"', readonly: 'readonly="true"', required: 'required="true"', selected: 'selected="true"' }, animation: { keyframes: { "pulse": "{0%, 100% {opacity:1} 50% {opacity:.5}}", "bounce": "{0%, 100% {transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)} 50% {transform:translateY(0);animation-timing-function:cubic-bezier(0,0,0.2,1)}}", "spin": "{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}", "ping": "{0%{transform:scale(1);opacity:1}75%,100%{transform:scale(2);opacity:0}}", "bounce-alt": "{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);transform:translate3d(0,0,0)}40%,43%{animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}", "flash": "{from,50%,to{opacity:1}25%,75%{opacity:0}}", "pulse-alt": "{from{transform:scale3d(1,1,1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scale3d(1,1,1)}}", "rubber-band": "{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(0.95,1.05,1)}75%{transform:scale3d(1.05,0.95,1)}to{transform:scale3d(1,1,1)}}", "shake-x": "{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}", "shake-y": "{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(0,-10px,0)}20%,40%,60%,80%{transform:translate3d(0,10px,0)}}", "head-shake": "{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}", "swing": "{20%{transform:rotate3d(0,0,1,15deg)}40%{transform:rotate3d(0,0,1,-10deg)}60%{transform:rotate3d(0,0,1,5deg)}80%{transform:rotate3d(0,0,1,-5deg)}to{transform:rotate3d(0,0,1,0deg)}}", "tada": "{from{transform:scale3d(1,1,1)}10%,20%{transform:scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}to{transform:scale3d(1,1,1)}}", "wobble": "{from{transform:translate3d(0,0,0)}15%{transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}to{transform:translate3d(0,0,0)}}", "jello": "{from,11.1% to{transform:translate3d(0,0,0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg)skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}", "heart-beat": "{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}", "hinge": "{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate3d(0,0,1,80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate3d(0,0,1,60deg);transform-origin:top left;animation-timing-function:ease-in-out}to{transform:translate3d(0,700px,0);opacity:0}}", "jack-in-the-box": "{from{opacity:0;transform-origin:center bottom;transform:scale(0.1) rotate(30deg)}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{transform:scale(1)}}", "light-speed-in-left": "{from{opacity:0;transform:translate3d(-100%,0,0) skewX(-30deg)}60%{opacity:1;transform:skewX(20deg)}80%{transform:skewX(-5deg)}to{transform:translate3d(0,0,0)}}", "light-speed-in-right": "{from{opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{opacity:1;transform:skewX(20deg)}80%{transform:skewX(-5deg)}to{transform:translate3d(0,0,0)}}", "light-speed-out-left": "{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0) skewX(30deg)}}", "light-speed-out-right": "{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}", "flip": "{from{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,-360deg);animation-timing-function:ease-out}40%{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(0.95,0.95,0.95) translate3d(0,0,0) rotate3d(0,1,0,0deg);animation-timing-function:ease-in}to{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,0deg);animation-timing-function:ease-in}}", "flip-in-x": "{from{transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{transform:perspective(400px)}}", "flip-in-y": "{from{transform:perspective(400px) rotate3d(0,1,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(0,1,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(0,1,0,-5deg)}to{transform:perspective(400px)}}", "flip-out-x": "{from{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}to{transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}", "flip-out-y": "{from{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}to{transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}", "rotate-in": "{from{transform-origin:center;transform:rotate3d(0,0,1,-200deg);opacity:0}to{transform-origin:center;transform:translate3d(0,0,0);opacity:1}}", "rotate-in-down-left": "{from{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}to{transform-origin:left bottom;transform:translate3d(0,0,0);opacity:1}}", "rotate-in-down-right": "{from{transform-origin:right bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:right bottom;transform:translate3d(0,0,0);opacity:1}}", "rotate-in-up-left": "{from{transform-origin:left top;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:left top;transform:translate3d(0,0,0);opacity:1}}", "rotate-in-up-right": "{from{transform-origin:right bottom;transform:rotate3d(0,0,1,-90deg);opacity:0}to{transform-origin:right bottom;transform:translate3d(0,0,0);opacity:1}}", "rotate-out": "{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0,0,1,200deg);opacity:0}}", "rotate-out-down-left": "{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}}", "rotate-out-down-right": "{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}", "rotate-out-up-left": "{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}", "rotate-out-up-right": "{from{transform-origin:right bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,90deg);opacity:0}}", "roll-in": "{from{opacity:0;transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}to{opacity:1;transform:translate3d(0,0,0)}}", "roll-out": "{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}", "zoom-in": "{from{opacity:0;transform:scale3d(0.3,0.3,0.3)}50%{opacity:1}}", "zoom-in-down": "{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}", "zoom-in-left": "{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}", "zoom-in-right": "{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}", "zoom-in-up": "{from{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}60%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}", "zoom-out": "{from{opacity:1}50%{opacity:0;transform:scale3d(0.3,0.3,0.3)}to{opacity:0}}", "zoom-out-down": "{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}", "zoom-out-left": "{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px,0,0);transform-origin:left center}}", "zoom-out-right": "{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(0.1) translate3d(2000px,0,0);transform-origin:right center}}", "zoom-out-up": "{40%{opacity:1;transform:scale3d(0.475,0.475,0.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}to{opacity:0;transform:scale3d(0.1,0.1,0.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1)}}", "bounce-in": "{from,20%,40%,60%,80%,to{animation-timing-function:ease-in-out}0%{opacity:0;transform:scale3d(0.3,0.3,0.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(0.9,0.9,0.9)}60%{transform:scale3d(1.03,1.03,1.03);opacity:1}80%{transform:scale3d(0.97,0.97,0.97)}to{opacity:1;transform:scale3d(1,1,1)}}", "bounce-in-down": "{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:translate3d(0,0,0)}}", "bounce-in-left": "{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:translate3d(0,0,0)}}", "bounce-in-right": "{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:translate3d(0,0,0)}}", "bounce-in-up": "{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translate3d(0,0,0)}}", "bounce-out": "{20%{transform:scale3d(0.9,0.9,0.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(0.3,0.3,0.3)}}", "bounce-out-down": "{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}", "bounce-out-left": "{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}", "bounce-out-right": "{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}", "bounce-out-up": "{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}", "slide-in-down": "{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}", "slide-in-left": "{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}", "slide-in-right": "{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}", "slide-in-up": "{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}", "slide-out-down": "{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}", "slide-out-left": "{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}", "slide-out-right": "{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}", "slide-out-up": "{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}", "fade-in": "{from{opacity:0}to{opacity:1}}", "fade-in-down": "{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-down-big": "{from{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-left": "{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-left-big": "{from{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-right": "{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-right-big": "{from{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-up": "{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-up-big": "{from{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-top-left": "{from{opacity:0;transform:translate3d(-100%,-100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-top-right": "{from{opacity:0;transform:translate3d(100%,-100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-bottom-left": "{from{opacity:0;transform:translate3d(-100%,100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-in-bottom-right": "{from{opacity:0;transform:translate3d(100%,100%,0)}to{opacity:1;transform:translate3d(0,0,0)}}", "fade-out": "{from{opacity:1}to{opacity:0}}", "fade-out-down": "{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}", "fade-out-down-big": "{from{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}", "fade-out-left": "{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}", "fade-out-left-big": "{from{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}", "fade-out-right": "{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}", "fade-out-right-big": "{from{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}", "fade-out-up": "{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}", "fade-out-up-big": "{from{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}", "fade-out-top-left": "{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(-100%,-100%,0)}}", "fade-out-top-right": "{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(100%,-100%,0)}}", "fade-out-bottom-left": "{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(-100%,100%,0)}}", "fade-out-bottom-right": "{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(100%,100%,0)}}", "back-in-up": "{0%{opacity:0.7;transform:translateY(1200px) scale(0.7)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:1;transform:scale(1)}}", "back-in-down": "{0%{opacity:0.7;transform:translateY(-1200px) scale(0.7)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:1;transform:scale(1)}}", "back-in-right": "{0%{opacity:0.7;transform:translateX(2000px) scale(0.7)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:1;transform:scale(1)}}", "back-in-left": "{0%{opacity:0.7;transform:translateX(-2000px) scale(0.7)}80%{opacity:0.7;transform:translateX(0px) scale(0.7)}100%{opacity:1;transform:scale(1)}}", "back-out-up": "{0%{opacity:1;transform:scale(1)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:0.7;transform:translateY(-700px) scale(0.7)}}", "back-out-down": "{0%{opacity:1;transform:scale(1)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:0.7;transform:translateY(700px) scale(0.7)}}", "back-out-right": "{0%{opacity:1;transform:scale(1)}80%{opacity:0.7;transform:translateY(0px) scale(0.7)}100%{opacity:0.7;transform:translateX(2000px) scale(0.7)}}", "back-out-left": "{0%{opacity:1;transform:scale(1)}80%{opacity:0.7;transform:translateX(-2000px) scale(0.7)}100%{opacity:0.7;transform:translateY(-700px) scale(0.7)}}" }, durations: { "pulse": "2s", "heart-beat": "1.3s", "bounce-in": "0.75s", "bounce-out": "0.75s", "flip-out-x": "0.75s", "flip-out-y": "0.75s", "hinge": "2s" }, timingFns: { "pulse": "cubic-bezier(0.4,0,.6,1)", "ping": "cubic-bezier(0,0,.2,1)", "head-shake": "ease-in-out", "heart-beat": "ease-in-out", "pulse-alt": "ease-in-out", "light-speed-in-left": "ease-out", "light-speed-in-right": "ease-out", "light-speed-out-left": "ease-in", "light-speed-out-right": "ease-in" }, properties: { "bounce-alt": { "transform-origin": "center bottom" }, "jello": { "transform-origin": "center" }, "swing": { "transform-origin": "top center" }, "flip": { "backface-visibility": "visible" }, "flip-in-x": { "backface-visibility": "visible !important" }, "flip-in-y": { "backface-visibility": "visible !important" }, "flip-out-x": { "backface-visibility": "visible !important" }, "flip-out-y": { "backface-visibility": "visible !important" }, "rotate-in": { "transform-origin": "center" }, "rotate-in-down-left": { "transform-origin": "left bottom" }, "rotate-in-down-right": { "transform-origin": "right bottom" }, "rotate-in-up-left": { "transform-origin": "left bottom" }, "rotate-in-up-right": { "transform-origin": "right bottom" }, "rotate-out": { "transform-origin": "center" }, "rotate-out-down-left": { "transform-origin": "left bottom" }, "rotate-out-down-right": { "transform-origin": "right bottom" }, "rotate-out-up-left": { "transform-origin": "left bottom" }, "rotate-out-up-right": { "transform-origin": "right bottom" }, "hinge": { "transform-origin": "top left" }, "zoom-out-down": { "transform-origin": "center bottom" }, "zoom-out-left": { "transform-origin": "left center" }, "zoom-out-right": { "transform-origin": "right center" }, "zoom-out-up": { "transform-origin": "center bottom" } }, counts: { "spin": "infinite", "ping": "infinite", "pulse": "infinite", "pulse-alt": "infinite", "bounce": "infinite", "bounce-alt": "infinite" } }, media: { portrait: "(orientation: portrait)", landscape: "(orientation: landscape)", os_dark: "(prefers-color-scheme: dark)", os_light: "(prefers-color-scheme: light)", motion_ok: "(prefers-reduced-motion: no-preference)", motion_not_ok: "(prefers-reduced-motion: reduce)", high_contrast: "(prefers-contrast: high)", low_contrast: "(prefers-contrast: low)", opacity_ok: "(prefers-reduced-transparency: no-preference)", opacity_not_ok: "(prefers-reduced-transparency: reduce)", use_data_ok: "(prefers-reduced-data: no-preference)", use_data_not_ok: "(prefers-reduced-data: reduce)", touch: "(hover: none) and (pointer: coarse)", stylus: "(hover: none) and (pointer: fine)", pointer: "(hover) and (pointer: coarse)", mouse: "(hover) and (pointer: fine)", hd_color: "(dynamic-range: high)" }, supports: { grid: "(display: grid)" }, preflightBase: { ...transformBase, ...touchActionBase, ...scrollSnapTypeBase, ...fontVariantNumericBase, ...borderSpacingBase, ...boxShadowsBase, ...ringBase, ...filterBase, ...backdropFilterBase } }; const variantCombinators = [ variantMatcher("svg", (input) => ({ selector: `${input.selector} svg` })) ]; const variantColorsScheme = [ variantMatcher(".dark", (input) => ({ prefix: `.dark $$ ${input.prefix}` })), variantMatcher(".light", (input) => ({ prefix: `.light $$ ${input.prefix}` })), variantParentMatcher("@dark", "@media (prefers-color-scheme: dark)"), variantParentMatcher("@light", "@media (prefers-color-scheme: light)") ]; const variantStickyHover = [ variantMatcher("@hover", (input) => { warnOnce("The @hover variant is experimental and may not follow semver."); return { parent: `${input.parent ? `${input.parent} $$ ` : ""}@media (hover: hover) and (pointer: fine)`, selector: `${input.selector || ""}:hover` }; }) ]; const variantContrasts = [ variantParentMatcher("contrast-more", "@media (prefers-contrast: more)"), variantParentMatcher("contrast-less", "@media (prefers-contrast: less)") ]; const variantMotions = [ variantParentMatcher("motion-reduce", "@media (prefers-reduced-motion: reduce)"), variantParentMatcher("motion-safe", "@media (prefers-reduced-motion: no-preference)") ]; const variantOrientations = [ variantParentMatcher("landscape", "@media (orientation: landscape)"), variantParentMatcher("portrait", "@media (orientation: portrait)") ]; const variantSpaceAndDivide = (matcher) => { if (matcher.startsWith("_")) return; if (/space-([xy])-(-?.+)$/.test(matcher) || /divide-/.test(matcher)) { return { matcher, selector: (input) => { const not = ">:not([hidden])~:not([hidden])"; return input.includes(not) ? input : `${input}${not}`; } }; } }; const placeholderModifier = (input, { theme }) => { const m = input.match(/^(.*)\b(placeholder-)(.+)$/); if (m) { const [, pre = "", p, body] = m; if (hasParseableColor(body, theme, "accentColor") || hasOpacityValue(body)) { return { // Append `placeholder-$ ` (with space!) to the rule to be matched. // The `placeholder-` is added for placeholder variant processing, and // the `$ ` is added for rule matching after `placeholder-` is removed by the variant. // See rules/placeholder. matcher: `${pre}placeholder-$ ${p}${body}` }; } } }; function hasOpacityValue(body) { const match = body.match(/^op(?:acity)?-?(.+)$/); if (match && match[1] != null) return h.bracket.percent(match[1]) != null; return false; } function variants(options) { return [ placeholderModifier, variantSpaceAndDivide, ...variants$1(options), ...variantContrasts, ...variantOrientations, ...variantMotions, ...variantCombinators, ...variantColorsScheme, ...variantStickyHover ]; } const presetWind = definePreset((options = {}) => { return { ...presetMini(options), name: "@unocss/preset-wind", theme, rules, shortcuts, variants: variants(options) }; }); export { presetWind as default, presetWind, rules, shortcuts, theme, variants };