feat(preset-mini): add more logical properties for inline direction (#…

…2118)

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)-<num>', '(rounded|rd)', '(rounded|rd)-<num>'] }],
-  [/^(?: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

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],

packages/preset-mini/src/_utils/mappings.ts

@@ -19,7 +19,9 @@ export const directionMap: Record<string, string[]> = {
 export const insetMap: Record<string, string[]> = {
   ...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<string, string[]> = {
   '': [''],
   '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'],
 }

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;}

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',