fix(border-width): multiple size

Simon-He95 · Apr 8, 2024 · c006693 · c006693
1 parent 9a119e4
commit c006693
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/border.ts b/src/border.ts
@@ -9,10 +9,10 @@ import {
 } from './utils'
 
 const borderSize = [
-  'border-left',
   'border-top',
   'border-right',
   'border-bottom',
+  'border-left',
 ]
 export function border(key: string, val: string) {
   // eslint-disable-next-line prefer-const
@@ -51,6 +51,9 @@ export function border(key: string, val: string) {
     return `border-s${getVal(value)}${important}`
   if (key.startsWith('border-image'))
     return ''
+  // fix: https://github.com/Simon-He95/unot/issues/18
+  if (key === 'border-width' && value.includes(' '))
+    return value.split(' ').map((v, i) => `border-${borderSize[i].split('-')[1][0]}${getVal(v)}${important}`).join(' ')
 
   if (/^\d[%|(px)|(rem)]$/.test(value) || key === 'border-collapse')
     return `border-${value}${important}`

diff --git a/test/border.test.ts b/test/border.test.ts
@@ -96,4 +96,8 @@ describe('border', () => {
     expect(toUnocss('border-bottom: 1px solid var(--magenta-3, #FFADD2)')).toBe('border-b-1px border-b-solid border-b="[var(--magenta-3,#FFADD2)]"')
     expect(toUnocssClass('border-bottom: 1px solid var(--magenta-3, #FFADD2)')[0]).toBe('border-b-1px border-b-solid border-b-[var(--magenta-3,#FFADD2)]')
   })
+  it('border-width: 0 0 50px var(--xxx,10px)', () => {
+    expect(toUnocss('border-width: 0 0 50px var(--xxx,10px)')).toBe('border-t-0 border-r-0 border-b-50px border-l="[var(--xxx,10px)]"')
+    expect(toUnocssClass('border-width: 0 0 50px var(--xxx,10px)')[0]).toBe('border-t-0 border-r-0 border-b-50px border-l-[var(--xxx,10px)]')
+  })
 })