feat(preset-wind): update bg-position (#1020)

unocss · May 29, 2022 · a1d187b · a1d187b
1 parent 3e21824
commit a1d187b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/packages/preset-mini/src/utils/handlers/handlers.ts b/packages/preset-mini/src/utils/handlers/handlers.ts
@@ -93,11 +93,12 @@ export function fraction(str: string) {
     return `${round(num * 100)}%`
 }
 
+const bracketTypeRe = /^\[(color|length|position):/i
 function bracketWithType(str: string, type?: string) {
   if (str && str.startsWith('[') && str.endsWith(']')) {
     let base: string | undefined
 
-    const match = str.match(/^\[(color|length|position):/i)
+    const match = str.match(bracketTypeRe)
     if (!match)
       base = str.slice(1, -1)
     else if (type && match[1] === type)
@@ -164,3 +165,8 @@ export function properties(str: string) {
   if (str.split(',').every(prop => cssProps.includes(prop)))
     return str
 }
+
+export function position(str: string) {
+  if (['top', 'left', 'right', 'bottom', 'center'].includes(str))
+    return str
+}
diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts
@@ -39,14 +39,17 @@ const bgGradientColorResolver = (mode: 'from' | 'to' | 'via') =>
     }
   }
 
+const bgUrlRE = /^\[url\(.+\)\]$/
+const bgLengthRE = /^\[length:.+\]$/
+const bgPositionRE = /^\[position:.+\]$/
 export const backgroundStyles: Rule[] = [
-  [/^bg-(.*)$/, ([, d]) => {
-    if (/^\[url\((.+)\)\]$/.test(d))
-      return { '--un-url': `${h.bracket(d)}`, 'background-image': 'var(--un-url)' }
-    else if (/^\[length:(.+)\]$/.test(d) && h.bracketOfLength(d) != null)
+  [/^bg-(.+)$/, ([, d]) => {
+    if (bgUrlRE.test(d))
+      return { '--un-url': h.bracket(d), 'background-image': 'var(--un-url)' }
+    if (bgLengthRE.test(d) && h.bracketOfLength(d) != null)
       return { 'background-size': h.bracketOfLength(d)!.split(' ').map(e => h.fraction.auto.px.cssvar(e)).join(' ') }
-    else if (/^\[position:(.+)\]$/.test(d) && h.bracketOfPosition(d) != null)
-      return { 'background-position': h.bracketOfPosition(d)!.split(' ').map(e => h.fraction.auto.px.cssvar(e)).join(' ') }
+    if (bgPositionRE.test(d) && h.bracketOfPosition(d) != null)
+      return { 'background-position': h.bracketOfPosition(d)!.split(' ').map(e => h.position.fraction.auto.px.cssvar(e)).join(' ') }
   }],
 
   // gradients

diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap
@@ -195,6 +195,8 @@ exports[`preset-wind > targets 1`] = `
 .bg-\\\\[length\\\\:10_20rem\\\\]{background-size:10px 20rem;}
 .bg-\\\\[position\\\\:1\\\\/2_20rem\\\\]{background-position:50% 20rem;}
 .bg-\\\\[position\\\\:10_20rem\\\\]{background-position:10px 20rem;}
+.bg-\\\\[position\\\\:bottom_left_10\\\\%\\\\]{background-position:bottom left 10%;}
+.bg-\\\\[position\\\\:top_right_1\\\\/3\\\\]{background-position:top right 33.3333333333%;}
 .bg-gradient-\\\\[70deg\\\\,blue\\\\,pink\\\\]{--un-gradient:70deg,blue,pink;}
 .bg-gradient-stops-\\\\[blue\\\\,pink\\\\],
 .stops-\\\\[blue\\\\,pink\\\\]{--un-gradient-stops:blue,pink;}

diff --git a/test/assets/preset-wind-targets.ts b/test/assets/preset-wind-targets.ts
@@ -64,6 +64,8 @@ export const presetWindTargets: string[] = [
   'bg-[length:1/2_20rem]',
   'bg-[position:10_20rem]',
   'bg-[position:1/2_20rem]',
+  'bg-[position:bottom_left_10%]',
+  'bg-[position:top_right_1/3]',
 
   // bg gradient
   'from-current',