Skip to content

Commit fa85154

Browse files
zyyvzyyv
authored
fix(preset-wind4): update negative variant for spacing value (#5123)
1 parent 370dd72 commit fa85154

File tree

4 files changed

+50
-33
lines changed

4 files changed

+50
-33
lines changed

‎packages-presets/preset-wind4/src/rules/spacing.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ function* handlerSpace([m, d, s]: string[], { theme, symbols }: RuleContext<Them
5656
if (v != null) {
5757
const results = directionMap[d === 'x' ? 'inline' : 'block'].map((item, index): [string, string] => {
5858
const key = `margin${item}`
59-
const value = ` calc(${v} * ${index === 0 ? `var(--un-space-${d}-reverse)` : `calc(1 - var(--un-space-${d}-reverse))`})`
59+
const value = `calc(${v} * ${index === 0 ? `var(--un-space-${d}-reverse)` : `calc(1 - var(--un-space-${d}-reverse))`})`
6060
return [key, value]
6161
})
6262

‎packages-presets/preset-wind4/src/variants/negative.ts‎

Lines changed: 41 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { CONTROL_NO_NEGATIVE, cssMathFnRE, cssVarFnRE } from '../utils'
66

77
const anchoredNumberRE = /^-?[0-9.]+(?:[a-z]+|%)?$/
88
const numberRE = /-?[0-9.]+(?:[a-z]+|%)?/
9+
const spacingMultiplyRE = /var\(--spacing(?:-[\w-]+)?\)\s*\*\s*(-?[0-9.]+(?:[a-z]+|%)?)/
910

1011
const ignoreProps = [
1112
/\b(opacity|color|flex|backdrop-filter|^filter|^scale|transform|mask-image)\b/,
@@ -15,8 +16,19 @@ function negateMathFunction(value: string) {
1516
const match = value.match(cssMathFnRE) || value.match(cssVarFnRE)
1617
if (match) {
1718
const [fnBody, rest] = getStringComponent(`(${match[2]})${match[3]}`, '(', ')', ' ') ?? []
18-
if (fnBody)
19+
if (fnBody) {
20+
const spacingMultiplyMatch = fnBody.match(spacingMultiplyRE)
21+
if (spacingMultiplyMatch) {
22+
const num = spacingMultiplyMatch[1]
23+
const nextNum = num.startsWith('-') ? num.slice(1) : `-${num}`
24+
const nextFnBody = fnBody.replace(spacingMultiplyRE, (segment) => {
25+
return segment.replace(num, nextNum)
26+
})
27+
return `${match[1]}${nextFnBody}${rest ? ` ${rest}` : ''}`
28+
}
29+
1930
return `calc(${match[1]}${fnBody} * -1)${rest ? ` ${rest}` : ''}`
31+
}
2032
}
2133
}
2234

@@ -45,32 +57,35 @@ export const variantNegative: Variant<Theme> = {
4557
body: (body) => {
4658
if (body.find(v => v[0] === CONTROL_NO_NEGATIVE))
4759
return
60+
4861
let changed = false
49-
body.forEach((v) => {
50-
if (toArray(v[2]).includes(CONTROL_NO_NEGATIVE))
51-
return
52-
const value = v[1]?.toString()
53-
if (!value || value === '0')
54-
return
55-
if (ignoreProps.some(i => i.test(v[0])))
56-
return
57-
const negatedFn = negateMathFunction(value)
58-
if (negatedFn) {
59-
v[1] = negatedFn
60-
changed = true
61-
return
62-
}
63-
const negatedBody = negateFunctionBody(value)
64-
if (negatedBody) {
65-
v[1] = negatedBody
66-
changed = true
67-
return
68-
}
69-
if (anchoredNumberRE.test(value)) {
70-
v[1] = value.replace(numberRE, i => i.startsWith('-') ? i.slice(1) : `-${i}`)
71-
changed = true
72-
}
73-
})
62+
for (const v of body) {
63+
const [prop, rawValue, meta] = v
64+
65+
// skip `symbols.variants` and other non-string values
66+
if (typeof rawValue === 'object')
67+
continue
68+
69+
if (meta && toArray(meta).includes(CONTROL_NO_NEGATIVE))
70+
continue
71+
72+
const value = rawValue?.toString()
73+
if (!value || value === '0' || ignoreProps.some(i => i.test(prop)))
74+
continue
75+
76+
const nextValue = negateMathFunction(value)
77+
?? negateFunctionBody(value)
78+
?? (anchoredNumberRE.test(value)
79+
? value.replace(numberRE, i => i.startsWith('-') ? i.slice(1) : `-${i}`)
80+
: undefined)
81+
82+
if (!nextValue || nextValue === value)
83+
continue
84+
85+
v[1] = nextValue
86+
changed = true
87+
}
88+
7489
if (changed)
7590
return body
7691
return []

‎test/assets/output/preset-wind4-targets.css‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -830,7 +830,7 @@
830830
.gap-col-1,
831831
.gap-x-1{column-gap:calc(var(--spacing) * 1);}
832832
.-gap-row-5,
833-
.-gap-y-5{row-gap:calc(calc(var(--spacing) * 5) * -1);}
833+
.-gap-y-5{row-gap:calc(var(--spacing) * -5);}
834834
.grid{display:grid;}
835835
.col-11{grid-column:11;}
836836
.-col-12{grid-column:-12;}
@@ -1740,6 +1740,9 @@ unocss .scope-\[unocss\]\:block{display:block;}
17401740
.view-transition-none{view-transition-name:none;}
17411741
.field-sizing-fixed{field-sizing:fixed;}
17421742
.field-sizing-content{field-sizing:content;}
1743+
.-space-x-4{
1744+
:where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * -4) * var(--un-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * -4) * calc(1 - var(--un-space-x-reverse)));}
1745+
}
17431746
.divide-\$variable{
17441747
:where(&>:not(:last-child)){border-color:color-mix(in oklab, var(--variable) var(--un-divide-opacity), transparent) /* var(--variable) */;}
17451748
}
@@ -1840,19 +1843,19 @@ unocss .scope-\[unocss\]\:block{display:block;}
18401843
:where(*[data-x=y] + &){--un-font-weight:17;font-weight:17;}
18411844
}
18421845
.space-x-\[var\(--space\)\]{
1843-
:where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start: calc(var(--space) * var(--un-space-x-reverse));margin-inline-end: calc(var(--space) * calc(1 - var(--un-space-x-reverse)));}
1846+
:where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start:calc(var(--space) * var(--un-space-x-reverse));margin-inline-end:calc(var(--space) * calc(1 - var(--un-space-x-reverse)));}
18441847
}
18451848
.space-x-\$space{
1846-
:where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start: calc(var(--space) * var(--un-space-x-reverse));margin-inline-end: calc(var(--space) * calc(1 - var(--un-space-x-reverse)));}
1849+
:where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start:calc(var(--space) * var(--un-space-x-reverse));margin-inline-end:calc(var(--space) * calc(1 - var(--un-space-x-reverse)));}
18471850
}
18481851
.space-x-2{
1849-
:where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start: calc(calc(var(--spacing) * 2) * var(--un-space-x-reverse));margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--un-space-x-reverse)));}
1852+
:where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--un-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--un-space-x-reverse)));}
18501853
}
18511854
.space-x-reverse{
18521855
:where(&>:not(:last-child)){--un-space-x-reverse:1;}
18531856
}
18541857
.space-y-4{
1855-
:where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start: calc(calc(var(--spacing) * 4) * var(--un-space-y-reverse));margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--un-space-y-reverse)));}
1858+
:where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--un-space-y-reverse)));}
18561859
}
18571860
@layer base{
18581861
.layer-base\:translate-0{--un-translate-x:calc(var(--spacing) * 0);--un-translate-y:calc(var(--spacing) * 0);translate:var(--un-translate-x) var(--un-translate-y);}

‎test/preset-wind4.test.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,6 @@ describe('preset-wind4', () => {
110110
"border-spacing-none",
111111
"divide-inline-$variable",
112112
"uno-layer-_pre:contrast-less:bg-gray-3",
113-
"-space-x-4",
114113
"data-dropdown:ring-green",
115114
"mask-tb",
116115
]

0 commit comments

Comments
 (0)