feat(preset-wind): support bg-[size] -> background-position (#3270)

Co-authored-by: chris <hizyyv@gmail.com>
unocss · Nov 2, 2023 · 9e891ab · 9e891ab
1 parent c88fb67
commit 9e891ab
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 116 deletions.
diff --git a/packages/preset-mini/src/_rules/color.ts b/packages/preset-mini/src/_rules/color.ts
@@ -1,5 +1,5 @@
 import type { Rule } from '@unocss/core'
-import { colorResolver, globalKeywords, h } from '../utils'
+import { colorResolver, globalKeywords, h, isSize } from '../utils'
 import { numberWithUnitRE } from '../_utils/handlers/regex'
 
 /**
@@ -21,7 +21,7 @@ export const textColors: Rule[] = [
 ]
 
 export const bgColors: Rule[] = [
-  [/^bg-(.+)$/, colorResolver('background-color', 'bg'), { autocomplete: 'bg-$colors' }],
+  [/^bg-(.+)$/, (...args) => isSize(args[0][1]) ? undefined : colorResolver('background-color', 'bg')(...args), { autocomplete: 'bg-$colors' }],
   [/^bg-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-bg-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'bg-(op|opacity)-<percent>' }],
 ]
 

diff --git a/packages/preset-mini/src/_utils/mappings.ts b/packages/preset-mini/src/_utils/mappings.ts
@@ -114,4 +114,4 @@ export const globalKeywords = [
   'unset',
 ]
 
-export const cssMathFnRE = /^(?:calc|clamp|min|max)\s*\(.*\)/
+export const cssMathFnRE = /(?:calc|clamp|min|max)\s*\(.*\)/
diff --git a/packages/preset-mini/src/_utils/utilities.ts b/packages/preset-mini/src/_utils/utilities.ts
@@ -4,6 +4,7 @@ import { colorOpacityToString, colorToString, getStringComponents, parseCssColor
 import type { Theme } from '../theme'
 import { h } from './handlers'
 import { cssMathFnRE, directionMap, globalKeywords } from './mappings'
+import { numberWithUnitRE } from './handlers/regex'
 
 export const CONTROL_MINI_NO_NEGATIVE = '$$mini-no-negative'
 
@@ -244,3 +245,9 @@ export function makeGlobalStaticRules(prefix: string, property?: string): Static
 export function isCSSMathFn(value: string) {
   return cssMathFnRE.test(value)
 }
+
+export function isSize(str: string) {
+  if (str[0] === '[' && str.slice(-1) === ']')
+    str = str.slice(1, -1)
+  return cssMathFnRE.test(str) || numberWithUnitRE.test(str)
+}
diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts
@@ -1,5 +1,5 @@
 import type { CSSColorValue, Rule, RuleContext } from '@unocss/core'
-import { globalKeywords, h, makeGlobalStaticRules, parseColor, positionMap } from '@unocss/preset-mini/utils'
+import { globalKeywords, h, isSize, makeGlobalStaticRules, parseColor, positionMap } from '@unocss/preset-mini/utils'
 import type { Theme } from '@unocss/preset-mini'
 import { colorOpacityToString, colorToString } from '@unocss/rule-utils'
 
@@ -76,7 +76,7 @@ export const backgroundStyles: Rule[] = [
       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) ?? e).join(' ') }
-    if (bgPositionRE.test(d) && h.bracketOfPosition(d) != null)
+    if ((isSize(d) || bgPositionRE.test(d)) && h.bracketOfPosition(d) != null)
       return { 'background-position': h.bracketOfPosition(d)!.split(' ').map(e => h.position.fraction.auto.px.cssvar(e) ?? e).join(' ') }
   }],