diff --git a/packages/preset-wind/src/rules/static.ts b/packages/preset-wind/src/rules/static.ts index 346bf26787..9c6c6cba93 100644 --- a/packages/preset-wind/src/rules/static.ts +++ b/packages/preset-wind/src/rules/static.ts @@ -1,5 +1,5 @@ import type { Rule } from '@unocss/core' -import { positionMap } from '@unocss/preset-mini/utils' +import { handler as h, positionMap } from '@unocss/preset-mini/utils' export const textTransforms: Rule[] = [ // tailwind compat @@ -83,7 +83,13 @@ export const objectPositions: Rule[] = [ ['object-none', { 'object-fit': 'none' }], // object position - [/^object-([-\w]+)$/, ([, s]) => ({ 'object-position': positionMap[s] }), { autocomplete: `object-(${Object.keys(positionMap).join('|')})` }], + [/^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)).join(' ') } + }, { autocomplete: `object-(${Object.keys(positionMap).join('|')})` }], + ] export const backgroundBlendModes: Rule[] = [ diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index 0bd07b4693..a613df7747 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -261,6 +261,7 @@ exports[`preset-wind > targets 1`] = ` .bg-origin-border{background-origin:border-box;} .svg\\\\:fill-red svg{--un-fill-opacity:1;fill:rgba(248,113,113,var(--un-fill-opacity));} .object-none{object-fit:none;} +.object-\\\\[center_25\\\\%\\\\]{object-position:center 25%;} .object-cb, .object-center-bottom{object-position:center bottom;} .object-center{object-position:center;} diff --git a/test/assets/preset-wind-targets.ts b/test/assets/preset-wind-targets.ts index 7305b294b1..716122693c 100644 --- a/test/assets/preset-wind-targets.ts +++ b/test/assets/preset-wind-targets.ts @@ -280,6 +280,7 @@ export const presetWindTargets: string[] = [ 'object-cb', 'object-center-top', 'object-center-bottom', + 'object-[center_25%]', // tables 'border-collapse',