feat(preset-wind): support bg position (#1001)

unocss · May 23, 2022 · da42fcb · da42fcb
1 parent f3695b4
commit da42fcb
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/packages/preset-mini/src/utils/handlers/handlers.ts b/packages/preset-mini/src/utils/handlers/handlers.ts
@@ -97,7 +97,7 @@ function bracketWithType(str: string, type?: string) {
   if (str && str.startsWith('[') && str.endsWith(']')) {
     let base: string | undefined
 
-    const match = str.match(/^\[(color|length):/i)
+    const match = str.match(/^\[(color|length|position):/i)
     if (!match)
       base = str.slice(1, -1)
     else if (type && match[1] === type)
@@ -126,6 +126,10 @@ export function bracketOfLength(str: string) {
   return bracketWithType(str, 'length')
 }
 
+export function bracketOfPosition(str: string) {
+  return bracketWithType(str, 'position')
+}
+
 export function cssvar(str: string) {
   if (str.match(/^\$\S/))
     return `var(--${escapeSelector(str.slice(1))})`

diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts
@@ -45,6 +45,8 @@ export const backgroundStyles: Rule[] = [
       return { '--un-url': `${h.bracket(d)}`, 'background-image': 'var(--un-url)' }
     else if (/^\[length:(.+)\]$/.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(' ') }
   }],
 
   // gradients

diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap
@@ -187,7 +187,10 @@ exports[`preset-wind > targets 1`] = `
 .overscroll-none{overscroll-behavior:none;}
 .overscroll-x-auto{overscroll-behavior-x:auto;}
 .scroll-auto{scroll-behavior:auto;}
+.bg-\\\\[length\\\\:1\\\\/2_20rem\\\\]{background-size:50% 20rem;}
 .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-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
@@ -61,6 +61,9 @@ export const presetWindTargets: string[] = [
   'bg-right-bottom',
   'bg-scroll',
   'bg-[length:10_20rem]',
+  'bg-[length:1/2_20rem]',
+  'bg-[position:10_20rem]',
+  'bg-[position:1/2_20rem]',
 
   // bg gradient
   'from-current',