From 995144658b3b401898b814c32c1e150ab6b4c926 Mon Sep 17 00:00:00 2001 From: sibbng Date: Fri, 27 Jan 2023 16:29:14 +0300 Subject: [PATCH] feat(preset-mini): add more logical properties for inline direction (#2118) --- packages/preset-mini/src/_rules/border.ts | 4 ++-- packages/preset-mini/src/_rules/position.ts | 1 + packages/preset-mini/src/_utils/mappings.ts | 8 +++++++ test/__snapshots__/preset-mini.test.ts.snap | 23 +++++++++++++++++++-- test/assets/preset-mini-targets.ts | 19 +++++++++++++++++ 5 files changed, 51 insertions(+), 4 deletions(-) diff --git a/packages/preset-mini/src/_rules/border.ts b/packages/preset-mini/src/_rules/border.ts index cd844d3b14..d62f9b839c 100644 --- a/packages/preset-mini/src/_rules/border.ts +++ b/packages/preset-mini/src/_rules/border.ts @@ -35,9 +35,9 @@ export const borders: Rule[] = [ // radius [/^(?:border-|b-)?(?:rounded|rd)()(?:-(.+))?$/, handlerRounded, { autocomplete: ['(border|b)-(rounded|rd)', '(border|b)-(rounded|rd)-', '(rounded|rd)', '(rounded|rd)-'] }], - [/^(?:border-|b-)?(?:rounded|rd)-([rltb])(?:-(.+))?$/, handlerRounded], + [/^(?:border-|b-)?(?:rounded|rd)-([rltbse])(?:-(.+))?$/, handlerRounded], [/^(?:border-|b-)?(?:rounded|rd)-([rltb]{2})(?:-(.+))?$/, handlerRounded], - [/^(?:border-|b-)?(?:rounded|rd)-([bi][se])(?:-(.+))?$/, handlerRounded], + [/^(?:border-|b-)?(?:rounded|rd)-([bise][se])(?:-(.+))?$/, handlerRounded], [/^(?:border-|b-)?(?:rounded|rd)-([bi][se]-[bi][se])(?:-(.+))?$/, handlerRounded], // style diff --git a/packages/preset-mini/src/_rules/position.ts b/packages/preset-mini/src/_rules/position.ts index 3ee8370149..ff4b638a24 100644 --- a/packages/preset-mini/src/_rules/position.ts +++ b/packages/preset-mini/src/_rules/position.ts @@ -117,6 +117,7 @@ export const insets: Rule[] = [ ], }, ], + [/^(?:position-|pos-)?(start|end)-(.+)$/, handleInsetValues], [/^(?:position-|pos-)?inset-([xy])-(.+)$/, handleInsetValues], [/^(?:position-|pos-)?inset-([rltbse])-(.+)$/, handleInsetValues], [/^(?:position-|pos-)?inset-(block|inline)-(.+)$/, handleInsetValues], diff --git a/packages/preset-mini/src/_utils/mappings.ts b/packages/preset-mini/src/_utils/mappings.ts index 2cf93bc7be..60375963a1 100644 --- a/packages/preset-mini/src/_utils/mappings.ts +++ b/packages/preset-mini/src/_utils/mappings.ts @@ -19,7 +19,9 @@ export const directionMap: Record = { export const insetMap: Record = { ...directionMap, s: ['-inset-inline-start'], + start: ['-inset-inline-start'], e: ['-inset-inline-end'], + end: ['-inset-inline-end'], bs: ['-inset-block-start'], be: ['-inset-block-end'], is: ['-inset-inline-start'], @@ -44,14 +46,20 @@ export const cornerMap: Record = { '': [''], 'bs': ['-start-start', '-start-end'], 'be': ['-end-start', '-end-end'], + 's': ['-end-start', '-start-start'], 'is': ['-end-start', '-start-start'], + 'e': ['-start-end', '-end-end'], 'ie': ['-start-end', '-end-end'], + 'ss': ['-start-start'], 'bs-is': ['-start-start'], 'is-bs': ['-start-start'], + 'se': ['-start-end'], 'bs-ie': ['-start-end'], 'ie-bs': ['-start-end'], + 'es': ['-end-start'], 'be-is': ['-end-start'], 'is-be': ['-end-start'], + 'ee': ['-end-end'], 'be-ie': ['-end-end'], 'ie-be': ['-end-end'], } diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap index 90cd58bb33..04b869beca 100644 --- a/test/__snapshots__/preset-mini.test.ts.snap +++ b/test/__snapshots__/preset-mini.test.ts.snap @@ -93,20 +93,24 @@ exports[`preset-mini > targets 1`] = ` .\\\\!hover\\\\:px-10:hover{padding-left:2.5rem !important;padding-right:2.5rem !important;} .p-x, .px{padding-left:1rem;padding-right:1rem;} +.px-1{padding-left:0.25rem;padding-right:0.25rem;} .p-t-2, .pt-2, .pt2{padding-top:0.5rem;} .pb{padding-bottom:1rem;} +.pe-8{padding-inline-end:2rem;} .pl-10px{padding-left:10px;} .pl-revert{padding-left:revert;} +.p-is, +.pis, +.ps-4{padding-inline-start:1rem;} .pt-\\\\$title2{padding-top:var(--title2);} +.pt-6{padding-top:1.5rem;} .p-bs-2, .pbs-2, .pbs2{padding-block-start:0.5rem;} .p-ie-none{padding-inline-end:0rem;} .p-ie-revert{padding-inline-end:revert;} -.p-is, -.pis{padding-inline-start:1rem;} .pbs-\\\\$title2{padding-block-start:var(--title2);} .pis-10px{padding-inline-start:10px;} .-m-lg{margin:-1.125rem;} @@ -130,14 +134,18 @@ exports[`preset-mini > targets 1`] = ` *>.\\\\[\\\\*\\\\>\\\\&\\\\]\\\\:m-12{margin:3rem;} .m-xy, .mxy{margin:1rem;} +.mx-1{margin-left:0.25rem;margin-right:0.25rem;} .my-auto{margin-top:auto;margin-bottom:auto;} .my-revert-layer{margin-top:revert-layer;margin-bottom:revert-layer;} .-\\\\!mb-safe{margin-bottom:calc(max(env(safe-area-inset-left), env(safe-area-inset-right)) * -1) !important;} .-mb-px{margin-bottom:-1px;} .-mt-safe{margin-top:calc(max(env(safe-area-inset-left), env(safe-area-inset-right)) * -1);} .\\\\!-ms-safe{margin-inline-start:calc(max(env(safe-area-inset-left), env(safe-area-inset-right)) * -1) !important;} +.me-8{margin-inline-end:2rem;} +.ms-4{margin-inline-start:1rem;} .mt-\\\\[-10\\\\.2\\\\%\\\\]{margin-top:-10.2%;} .mt-\\\\$height{margin-top:var(--height);} +.mt-6{margin-top:1.5rem;} .next\\\\:mt-0+*{margin-top:0rem;} .m-block{margin-block-start:1rem;margin-block-end:1rem;} .m-block-auto{margin-block-start:auto;margin-block-end:auto;} @@ -224,6 +232,8 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;} .border-4{border-width:4px;} .border-x{border-left-width:1px;border-right-width:1px;} .border-b{border-bottom-width:1px;} +.border-e-4{border-inline-end-width:4px;} +.border-s-0{border-inline-start-width:0px;} .border-t-2, .border-t-size-2{border-top-width:2px;} .border-inline{border-inline-start-width:1px;border-inline-end-width:1px;} @@ -244,6 +254,7 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;} .border-\\\\[\\\\#124\\\\]{--un-border-opacity:1;border-color:rgba(17,34,68,var(--un-border-opacity));} .border-\\\\[var\\\\(--color\\\\)\\\\], .border-\\\\$color{border-color:var(--color);} +.border-black{--un-border-opacity:1;border-color:rgba(0,0,0,var(--un-border-opacity));} .border-black\\\\/10{border-color:rgba(0,0,0,0.1);} .border-blue{--un-border-opacity:1;border-color:rgba(96,165,250,var(--un-border-opacity));} .border-green-100\\\\/20{border-color:rgba(220,252,231,0.2);} @@ -258,6 +269,8 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;} .border-b-blue{--un-border-opacity:1;--un-border-bottom-opacity:var(--un-border-opacity);border-bottom-color:rgba(96,165,250,var(--un-border-bottom-opacity));} .border-e-red-200\\\\/10{border-inline-end-color:rgba(254,202,202,0.1);} .border-e-red-300\\\\/\\\\[20\\\\]{border-inline-end-color:rgba(252,165,165,20);} +.border-e-red-400{--un-border-opacity:1;--un-border-inline-end-opacity:var(--un-border-opacity);border-inline-end-color:rgba(248,113,113,var(--un-border-inline-end-opacity));} +.border-s-green-500{--un-border-opacity:1;--un-border-inline-start-opacity:var(--un-border-opacity);border-inline-start-color:rgba(34,197,94,var(--un-border-inline-start-opacity));} .border-s-red-100{--un-border-opacity:1;--un-border-inline-start-opacity:var(--un-border-opacity);border-inline-start-color:rgba(254,226,226,var(--un-border-inline-start-opacity));} .border-t-\\\\[\\\\#124\\\\]{--un-border-opacity:1;--un-border-top-opacity:var(--un-border-opacity);border-top-color:rgba(17,34,68,var(--un-border-top-opacity));} .border-t-\\\\$color{border-top-color:var(--color);} @@ -277,10 +290,14 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;} .rounded-none{border-radius:0rem;} .rounded-unset{border-radius:unset;} .rounded-b-revert{border-bottom-left-radius:revert;border-bottom-right-radius:revert;} +.rounded-e{border-start-end-radius:0.25rem;border-end-end-radius:0.25rem;} +.rounded-s{border-end-start-radius:0.25rem;border-start-start-radius:0.25rem;} .rounded-t-sm{border-top-left-radius:0.125rem;border-top-right-radius:0.125rem;} .rounded-rb-1\\\\/2{border-bottom-right-radius:50%;} .rounded-tr{border-top-right-radius:0.25rem;} .rounded-bs-sm{border-start-start-radius:0.125rem;border-start-end-radius:0.125rem;} +.rounded-es{border-end-start-radius:0.25rem;} +.rounded-ss{border-start-start-radius:0.25rem;} .rounded-bs-ie{border-start-end-radius:0.25rem;} .rounded-ie-be-1\\\\/2{border-end-end-radius:50%;} .b-dashed, @@ -823,6 +840,8 @@ unocss .scope-\\\\[unocss\\\\]\\\\:block{display:block;} .inset-none{inset:0rem;} .inset-5{inset:1.25rem;} .inset-unset{inset:unset;} +.end-8{inset-inline-end:2rem;} +.start-4{inset-inline-start:1rem;} .inset-x-5{left:1.25rem;right:1.25rem;} .inset-y-5{top:1.25rem;bottom:1.25rem;} .inset-b-5{bottom:1.25rem;} diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts index bae1b93d14..03c9a68767 100644 --- a/test/assets/preset-mini-targets.ts +++ b/test/assets/preset-mini-targets.ts @@ -84,6 +84,25 @@ export const presetMiniTargets: string[] = [ 'rounded-ie-be-1/2', 'rounded-bs-sm', 'rounded-bs-ie', + 'mt-6', + 'mx-1', + 'ms-4', + 'me-8', + 'pt-6', + 'px-1', + 'ps-4', + 'pe-8', + 'start-4', + 'end-8', + 'border-s-0', + 'border-e-4', + 'border-black', + 'border-s-green-500', + 'border-e-red-400', + 'rounded-s', + 'rounded-e', + 'rounded-ss', + 'rounded-es', 'rounded', 'rounded-none', 'border-rounded',