feat(rule): update border radius rules

unocss-community · Oct 30, 2024 · cdb25c9 · cdb25c9
1 parent b3f3d1c
commit cdb25c9
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 54 deletions.
diff --git a/src/rules/position.ts b/src/rules/position.ts
@@ -1,20 +1,21 @@
+import { EmptyKeyPlaceholder } from '../constants'
 import type { AtomicComposed, DynamicPropAtomicMap, PropsAtomicMap, StaticPropAtomicMap } from '../types'
 
 export const position = ['top', 'bottom', 'left', 'right']
 export const positionShort = ['t', 'b', 'l', 'r']
 
 export const positions: PropsAtomicMap[] = [
   ...position.map<StaticPropAtomicMap>((p, i) => [p, [p, positionShort[i]]]),
+  ['position', EmptyKeyPlaceholder, { separator: '' }],
+  ['z-index', 'z'],
 ]
 
 export function createPos4Props(prop: string, atom: string, shortAtom?: string): DynamicPropAtomicMap {
   return [
     new RegExp(`^${prop}-(top|bottom|left|right)(?:-\\w+)?$`),
     ([, p]) => {
       const index = position.indexOf(p)
-      if (index > -1) {
-        return [atom, shortAtom].filter(Boolean).map(s => `${s}-${positionShort[index]}`) as AtomicComposed
-      }
+      return [atom, shortAtom].filter(Boolean).map(s => `${s}-${positionShort[index]}`) as AtomicComposed
     },
   ]
 }
diff --git a/src/rules/size.ts b/src/rules/size.ts
@@ -1,6 +1,7 @@
-import type { StaticPropAtomicMap } from '../types'
+import { position, positionShort } from './position'
+import type { PropsAtomicMap } from '../types'
 
-export const sizes: StaticPropAtomicMap[] = [
+export const sizes: PropsAtomicMap[] = [
   ['width', 'w'],
   ['height', 'h'],
   ['min-width', 'min-w'],
@@ -9,51 +10,21 @@ export const sizes: StaticPropAtomicMap[] = [
   ['max-height', 'max-h'],
   ['font-size', 'text'],
   ['line-height', ['leading', 'lh']],
-  ['border-radius', ['rounded', 'rd']],
-  ['border-top-left-radius', ['rounded-tl', 'rd-tl']],
-  ['border-top-right-radius', ['rounded-tr', 'rd-tr']],
-  ['border-bottom-right-radius', ['rounded-br', 'rd-br']],
-  ['border-bottom-left-radius', ['rounded-bl', 'rd-bl']],
-  ['border-width', ['border', 'b']],
+  [/^border(?:-(top|bottom|left|right))?(?:-(top|bottom|left|right))?-radius$/, ([, y, x]) => {
+    const pos = [y, x].filter(Boolean).map(p => positionShort[position.indexOf(p)])
+    const suffix = pos.length > 0 ? `-${pos.join('')}` : ''
+
+    return [
+      `rounded${suffix}`,
+      `rd${suffix}`,
+    ]
+  }],
 
-  ['border-top-width', 'btw'],
-  ['border-right-width', 'brw'],
-  ['border-bottom-width', 'bbw'],
-  ['border-left-width', 'blw'],
-  ['border-style', 'bs'],
-  ['border-top-style', 'bts'],
-  ['border-right-style', 'brs'],
-  ['border-bottom-style', 'bbs'],
-  ['border-left-style', 'bls'],
-  ['border-color', 'bc'],
-  ['border-top-color', 'btc'],
-  ['border-right-color', 'brc'],
-  ['border-bottom-color', 'bbc'],
-  ['border-left-color', 'blc'],
-  ['border', 'b'],
-  ['outline', 'o'],
-  ['outline-width', 'ow'],
-  ['outline-style', 'os'],
-  ['outline-color', 'oc'],
+  // ['border-top-left-radius', ['rounded-tl', 'rd-tl']],
+  // ['border-top-right-radius', ['rounded-tr', 'rd-tr']],
+  // ['border-bottom-right-radius', ['rounded-br', 'rd-br']],
+  // ['border-bottom-left-radius', ['rounded-bl', 'rd-bl']],
+  ['border-width', ['border', 'b']],
   ['box-shadow', 'shadow'],
-  ['text-shadow', 'tshadow'],
-  ['letter-spacing', 'ls'],
-  ['word-spacing', 'ws'],
-  ['background-size', 'bg-size'],
-  ['background-position', 'bg-pos'],
-  ['background-repeat', 'bg-repeat'],
-  ['background-attachment', 'bg-attach'],
-  ['background-origin', 'bg-origin'],
-  ['background-clip', 'bg-clip'],
-  ['background-color', 'bgc'],
-  ['background-image', 'bgi'],
-  ['background-blend-mode', 'bg-blend'],
-  ['background-attachment', 'bg-attach'],
-  ['background-origin', 'bg-origin'],
-  ['background-clip', 'bg-clip'],
-  ['background-color', 'bgc'],
-  ['background-image', 'bgi'],
-  ['background-blend-mode', 'bg-blend'],
-  ['background-attachment', 'bg-attach'],
-  ['background-origin', ' bg-origin'],
+  ['letter-spacing', 'tracking'],
 ]
diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap
@@ -214,6 +214,15 @@ exports[`analyzePared > transfrom parsed 1`] = `
       "rounded-5px",
     ],
   },
+  {
+    "css": "border-top-left-radius: 5px",
+    "shortTokens": [
+      "rd-tl-5px",
+    ],
+    "tokens": [
+      "rounded-tl-5px",
+    ],
+  },
   {
     "css": "box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)",
     "shortTokens": [
@@ -268,13 +277,21 @@ exports[`analyzePared > transfrom parsed 1`] = `
   },
   {
     "css": "z-index: 10",
-    "shortTokens": undefined,
-    "tokens": undefined,
+    "shortTokens": [
+      "z-10",
+    ],
+    "tokens": [
+      "z-10",
+    ],
   },
   {
     "css": "position: relative",
-    "shortTokens": undefined,
-    "tokens": undefined,
+    "shortTokens": [
+      "relative",
+    ],
+    "tokens": [
+      "relative",
+    ],
   },
   {
     "css": "top: 10px",

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -219,6 +219,7 @@ describe('analyzePared', () => {
     'margin-left: auto',
     'margin-right: auto',
     'border-radius: 5px',
+    'border-top-left-radius: 5px',
     'box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)',
     'opacity: 0.8',
     'transition: all 0.3s ease',