fix(preset-mini,preset-wind)!: fix broken color/opacity syntax (#3359)

packages/preset-mini/src/_rules/color.ts

@@ -20,8 +20,20 @@ export const textColors: Rule[] = [
   [/^(?:text|color|c)-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-text-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: '(text|color|c)-(op|opacity)-<percent>' }],
 ]
 
+const bgUrlRE = /^\[url\(.+\)\]$/
+const bgLengthRE = /^\[length:.+\]$/
+const bgPositionRE = /^\[position:.+\]$/
 export const bgColors: Rule[] = [
-  [/^bg-(.+)$/, (...args) => isSize(args[0][1]) ? undefined : colorResolver('background-color', 'bg', 'backgroundColor')(...args), { autocomplete: 'bg-$colors' }],
+  [/^bg-(.+)$/, (...args) => {
+    const d = args[0][1]
+    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) ?? e).join(' ') }
+    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(' ') }
+    return colorResolver('background-color', 'bg', 'backgroundColor')(...args)
+  }],
   [/^bg-op(?:acity)?-?(.+)$/, ([, opacity]) => ({ '--un-bg-opacity': h.bracket.percent.cssvar(opacity) }), { autocomplete: 'bg-(op|opacity)-<percent>' }],
 ]
 

packages/preset-mini/src/_rules/typography.ts

@@ -12,7 +12,11 @@ export const fonts: Rule<Theme>[] = [
   [
     /^text-(.+)$/,
     ([, s = 'base'], { theme }) => {
-      const [size, leading] = splitShorthand(s, 'length')
+      const split = splitShorthand(s, 'length')
+      if (!split)
+        return
+
+      const [size, leading] = split
       const sizePairs = toArray(theme.fontSize?.[size]) as [string, string | CSSObject, string?]
       const lineHeight = leading ? handleThemeByKey(leading, theme, 'lineHeight') : undefined
 

packages/preset-mini/src/_utils/handlers/handlers.ts

@@ -1,6 +1,6 @@
 import { escapeSelector } from '@unocss/core'
 import { globalKeywords } from '../mappings'
-import { numberRE, numberWithUnitRE, unitOnlyRE } from './regex'
+import { bracketTypeRe, numberRE, numberWithUnitRE, unitOnlyRE } from './regex'
 
 // Not all, but covers most high frequency attributes
 const cssProps = [
@@ -140,7 +140,6 @@ export function fraction(str: string) {
   }
 }
 
-const bracketTypeRe = /^\[(color|length|position|quoted|string):/i
 function bracketWithType(str: string, requiredType?: string) {
   if (str && str.startsWith('[') && str.endsWith(']')) {
     let base: string | undefined

packages/preset-mini/src/_utils/handlers/regex.ts

@@ -1,3 +1,4 @@
 export const numberWithUnitRE = /^(-?\d*(?:\.\d+)?)(px|pt|pc|%|r?(?:em|ex|lh|cap|ch|ic)|(?:[sld]?v|cq)(?:[whib]|min|max)|in|cm|mm|rpx)?$/i
 export const numberRE = /^(-?\d*(?:\.\d+)?)$/i
 export const unitOnlyRE = /^(px)$/i
+export const bracketTypeRe = /^\[(color|length|position|quoted|string):/i

packages/preset-mini/src/_utils/utilities.ts

@@ -1,10 +1,10 @@
 import type { CSSEntries, CSSObject, DynamicMatcher, ParsedColorValue, RuleContext, StaticRule, VariantContext } from '@unocss/core'
 import { toArray } from '@unocss/core'
-import { colorOpacityToString, colorToString, getStringComponents, parseCssColor } from '@unocss/rule-utils'
+import { colorOpacityToString, colorToString, getStringComponent, getStringComponents, parseCssColor } from '@unocss/rule-utils'
 import type { Theme } from '../theme'
 import { h } from './handlers'
 import { cssMathFnRE, directionMap, globalKeywords } from './mappings'
-import { numberWithUnitRE } from './handlers/regex'
+import { bracketTypeRe, numberWithUnitRE } from './handlers/regex'
 
 export const CONTROL_MINI_NO_NEGATIVE = '$$mini-no-negative'
 
@@ -57,16 +57,14 @@ function getThemeColor(theme: Theme, colors: string[], key?: ThemeColorKeys) {
  * Split utility shorthand delimited by / or :
  */
 export function splitShorthand(body: string, type: string) {
-  const split = body.split(/(?:\/|:)/)
+  const [front, rest] = getStringComponent(body, '[', ']', ['/', ':']) ?? []
 
-  if (split[0] === `[${type}`) {
-    return [
-      split.slice(0, 2).join(':'),
-      split[2],
-    ]
-  }
+  if (front != null) {
+    const match = (front.match(bracketTypeRe) ?? [])[1]
 
-  return split
+    if (match == null || match === type)
+      return [front, rest]
+  }
 }
 
 /**
@@ -84,8 +82,11 @@ export function splitShorthand(body: string, type: string) {
  * @return object if string is parseable.
  */
 export function parseColor(body: string, theme: Theme, key?: ThemeColorKeys): ParsedColorValue | undefined {
-  const [main, opacity] = splitShorthand(body, 'color')
+  const split = splitShorthand(body, 'color')
+  if (!split)
+    return
 
+  const [main, opacity] = split
   const colors = main
     .replace(/([a-z])([0-9])/g, '$1-$2')
     .split(/-/g)

packages/preset-wind/src/rules/background.ts

@@ -1,5 +1,5 @@
 import type { CSSColorValue, Rule, RuleContext } from '@unocss/core'
-import { globalKeywords, h, isSize, makeGlobalStaticRules, parseColor, positionMap } from '@unocss/preset-mini/utils'
+import { globalKeywords, h, makeGlobalStaticRules, parseColor, positionMap } from '@unocss/preset-mini/utils'
 import type { Theme } from '@unocss/preset-mini'
 import { colorOpacityToString, colorToString } from '@unocss/rule-utils'
 
@@ -67,19 +67,7 @@ function bgGradientPositionResolver() {
   }
 }
 
-const bgUrlRE = /^\[url\(.+\)\]$/
-const bgLengthRE = /^\[length:.+\]$/
-const bgPositionRE = /^\[position:.+\]$/
 export const backgroundStyles: Rule[] = [
-  [/^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) ?? e).join(' ') }
-    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(' ') }
-  }],
-
   // gradients
   [/^bg-gradient-(.+)$/, ([, d]) => ({ '--un-gradient': h.bracket(d) }), {
     autocomplete: ['bg-gradient', 'bg-gradient-(from|to|via)', 'bg-gradient-(from|to|via)-$colors', 'bg-gradient-(from|to|via)-(op|opacity)', 'bg-gradient-(from|to|via)-(op|opacity)-<percent>'],

test/__snapshots__/autocomplete.test.ts.snap

@@ -23,9 +23,9 @@ exports[`autocomplete > should provide autocomplete 1`] = `
   "align-": "align-base align-baseline align-bottom align-btm align-end align-inherit align-initial align-mid align-middle align-revert",
   "aspect-": "aspect-ratio aspect-square aspect-video",
   "auto-flow-": "auto-flow-col auto-flow-col-dense auto-flow-dense auto-flow-row auto-flow-row-dense",
-  "bg-": "bg-amber bg-auto bg-black bg-blend-color bg-blend-color-burn bg-blend-color-dodge bg-blend-darken bg-blend-difference bg-blend-exclusion bg-blend-hard-light",
+  "bg-": "bg-auto bg-blend-color bg-blend-color-burn bg-blend-color-dodge bg-blend-darken bg-blend-difference bg-blend-exclusion bg-blend-hard-light bg-blend-hue bg-blend-inherit",
   "bg-gradient-": "bg-gradient-conic bg-gradient-from bg-gradient-linear bg-gradient-radial bg-gradient-repeating bg-gradient-shape bg-gradient-to bg-gradient-via",
-  "bg-r": "bg-red bg-repeat bg-repeat-inherit bg-repeat-initial bg-repeat-revert bg-repeat-revert-layer bg-repeat-round bg-repeat-space bg-repeat-unset bg-repeat-x",
+  "bg-r": "bg-repeat bg-repeat-inherit bg-repeat-initial bg-repeat-revert bg-repeat-revert-layer bg-repeat-round bg-repeat-space bg-repeat-unset bg-repeat-x bg-repeat-y",
   "border": "border border-collapse border-separate border-spacing border-style",
   "border-": "border-amber border-b border-b-style border-black border-blue border-bluegray border-blueGray border-collapse border-coolgray border-coolGray",
   "border-r": "border-r border-r-style border-rd border-red border-revert border-revert-layer border-ridge border-rose border-rounded",

test/__snapshots__/postcss.test.ts.snap

@@ -211,20 +211,6 @@ exports[`postcss > @unocss 1`] = `
 .overscroll-y-unset{overscroll-behavior-y:unset;}
 .scroll-auto{scroll-behavior:auto;}
 .scroll-unset{scroll-behavior:unset;}
-.bg-\\[10\\%\\]{background-position:10%;}
-.bg-\\[10px\\]{background-position:10px;}
-.bg-\\[10vw\\]{background-position:10vw;}
-.bg-\\[calc\\(10\\%\\+10px\\)\\]{background-position:calc(10% + 10px);}
-.bg-\\[calc\\(10vw\\+10px\\)\\]{background-position:calc(10vw + 10px);}
-.bg-\\[length\\:--variable\\]{background-size:var(--variable);}
-.bg-\\[length\\:1\\/2_20rem\\]{background-size:50% 20rem;}
-.bg-\\[length\\:10_20rem\\]{background-size:10px 20rem;}
-.bg-\\[position\\:--variable\\]{background-position:var(--variable);}
-.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-\\[url\\(https\\:\\/\\/test\\.unocss\\.png\\)\\]{--un-url:url(https://test.unocss.png);background-image:var(--un-url);}
 .bg-gradient-\\[70deg\\,blue\\,pink\\]{--un-gradient:70deg,blue,pink;}
 .bg-gradient-stops-\\[blue\\,pink\\],
 .stops-\\[blue\\,pink\\]{--un-gradient-stops:blue,pink;}

test/assets/output/preset-mini-targets.css

@@ -135,7 +135,24 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .bg-\[\#153\]\/10,
 .bg-\[\#1533\]\/10{background-color:rgb(17 85 51 / 0.1);}
 .bg-\[\#1533\]{--un-bg-opacity:0.2;background-color:rgb(17 85 51 / var(--un-bg-opacity));}
+.bg-\[10\%\]{background-position:10%;}
+.bg-\[10px\]{background-position:10px;}
+.bg-\[10vw\]{background-position:10vw;}
+.bg-\[calc\(10\%\+10px\)\]{background-position:calc(10% + 10px);}
+.bg-\[calc\(10vw\+10px\)\]{background-position:calc(10vw + 10px);}
+.bg-\[length\:--variable\]{background-size:var(--variable);}
+.bg-\[length\:1\/2_20rem\]{background-size:50% 20rem;}
+.bg-\[length\:10_20rem\]{background-size:10px 20rem;}
+.bg-\[position\:--variable\]{background-position:var(--variable);}
+.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-\[rgb\(4_5_6\/0\.7\)\]\/\[calc\(100\/3\)\]{background-color:rgb(4 5 6 / calc(100 / 3));}
 .bg-\[rgba\(1\,2\,3\,0\.5\)\]{--un-bg-opacity:0.5;background-color:rgba(1, 2, 3, var(--un-bg-opacity));}
+.bg-\[rgba\(4_5_6\/0\.7\)\]{--un-bg-opacity:0.7;background-color:rgba(4, 5, 6, var(--un-bg-opacity));}
+.bg-\[rgba\(4_5_6\/0\.7\)\]\/80{background-color:rgba(4, 5, 6, 0.8);}
+.bg-\[url\(https\:\/\/test\.unocss\.png\)\]{--un-url:url(https://test.unocss.png);background-image:var(--un-url);}
 .bg-\#452233\/40,
 .bg-hex-452233\/40{background-color:rgb(69 34 51 / 0.4);}
 .bg-red-100{--un-bg-opacity:1;background-color:rgb(254 226 226 / var(--un-bg-opacity));}
@@ -236,6 +253,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .border-red-300\/20{border-color:rgb(252 165 165 / 0.2);}
 .border-red2{--un-border-opacity:1;border-color:rgb(254 202 202 / var(--un-border-opacity));}
 .border-x-\[rgb\(1\,2\,3\)\]\/\[0\.5\]{border-left-color:rgb(1 2 3 / 0.5);border-right-color:rgb(1 2 3 / 0.5);}
+.border-x-\[rgb\(4_5_6\)\]\/\[0\.5\]{border-left-color:rgb(4 5 6 / 0.5);border-right-color:rgb(4 5 6 / 0.5);}
 .border-x-\$color{border-left-color:var(--color);border-right-color:var(--color);}
 .border-y-red{--un-border-opacity:1;--un-border-top-opacity:var(--un-border-opacity);border-top-color:rgb(248 113 113 / var(--un-border-top-opacity));--un-border-bottom-opacity:var(--un-border-opacity);border-bottom-color:rgb(248 113 113 / var(--un-border-bottom-opacity));}
 .border-b-blue{--un-border-opacity:1;--un-border-bottom-opacity:var(--un-border-opacity);border-bottom-color:rgb(96 165 250 / var(--un-border-bottom-opacity));}
@@ -531,6 +549,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .shadow-\[\#fff\]{--un-shadow-opacity:1;--un-shadow-color:rgb(255 255 255 / var(--un-shadow-opacity));}
 .shadow-\[0px_4px_4px_0px_rgba\(237\,_0\,_0\,_1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(237, 0, 0, 1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.shadow-\[0px_4px_4px_0px_rgba\(238_0_0\/1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(238, 0, 0, 1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .shadow-\$variable{--un-shadow:var(--variable);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
 .shadow-current{--un-shadow-color:currentColor;}
 .shadow-green-500{--un-shadow-opacity:1;--un-shadow-color:rgb(34 197 94 / var(--un-shadow-opacity));}
@@ -1063,4 +1082,4 @@ unocss .scope-\[unocss\]\:block{display:block;}
 /* layer: uno css */
 .uno-layer-\[uno_css\]\:block{display:block;}
 /* layer: uno_css */
-.uno-layer-uno_css\:block{display:block;}
+.uno-layer-uno_css\:block{display:block;}

test/assets/preset-mini-targets.ts

@@ -151,6 +151,7 @@ export const presetMiniTargets: string[] = [
   'border-y-red',
   'border-y-op-30',
   'border-x-[rgb(1,2,3)]/[0.5]',
+  'border-x-[rgb(4_5_6)]/[0.5]',
   'border-t-[#124]',
   'border-t-black/10',
   'border-b-blue',
@@ -248,6 +249,9 @@ export const presetMiniTargets: string[] = [
   'bg-[#1533]',
   'bg-[#1533]/10',
   'bg-[rgba(1,2,3,0.5)]',
+  'bg-[rgba(4_5_6/0.7)]',
+  'bg-[rgba(4_5_6/0.7)]/80',
+  'bg-[rgb(4_5_6/0.7)]/[calc(100/3)]',
   'bg-#452233/40',
   'bg-red-100',
   'bg-teal-100/55',
@@ -259,6 +263,20 @@ export const presetMiniTargets: string[] = [
   'bg-opacity-45',
   'bg-opacity-[--opacity-variable]',
   'bg-opacity-$opacity-variable',
+  'bg-[10px]',
+  'bg-[10%]',
+  'bg-[10vw]',
+  'bg-[calc(10%+10px)]',
+  'bg-[calc(10vw+10px)]',
+  'bg-[url(https://test.unocss.png)]',
+  'bg-[length:--variable]',
+  'bg-[length:10_20rem]',
+  'bg-[length:1/2_20rem]',
+  'bg-[position:--variable]',
+  'bg-[position:10_20rem]',
+  'bg-[position:1/2_20rem]',
+  'bg-[position:bottom_left_10%]',
+  'bg-[position:top_right_1/3]',
 
   // color - ring
   'ring-red2',
@@ -467,6 +485,7 @@ export const presetMiniTargets: string[] = [
   'shadow-op-$opacity-variable',
   'shadow-inset',
   'shadow-[0px_4px_4px_0px_rgba(237,_0,_0,_1)]',
+  'shadow-[0px_4px_4px_0px_rgba(238_0_0/1)]',
   'shadow-$variable',
 
   // size

test/assets/preset-wind-targets.ts

@@ -66,20 +66,6 @@ export const presetWindTargets: string[] = [
   'bg-repeat-revert',
   'bg-right-bottom',
   'bg-scroll',
-  'bg-[10px]',
-  'bg-[10%]',
-  'bg-[10vw]',
-  'bg-[calc(10%+10px)]',
-  'bg-[calc(10vw+10px)]',
-  'bg-[url(https://test.unocss.png)]',
-  'bg-[length:--variable]',
-  'bg-[length:10_20rem]',
-  'bg-[length:1/2_20rem]',
-  'bg-[position:--variable]',
-  'bg-[position:10_20rem]',
-  'bg-[position:1/2_20rem]',
-  'bg-[position:bottom_left_10%]',
-  'bg-[position:top_right_1/3]',
 
   // bg gradient
   'from-current',