Skip to content

Commit 56e5876

Browse files
JungzlJungzl
authored
fix(preset-wind4): space & divide aligned with tw4 (#4879)
1 parent 8643505 commit 56e5876

3 files changed

Lines changed: 78 additions & 36 deletions

File tree

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,48 @@ import type { CSSObject, Rule, RuleContext } from '@unocss/core'
22
import type { Theme } from '../theme'
33
import { colorResolver, defineProperty, h } from '../utils'
44
import { borderStyles } from './border'
5-
import { notLastChildSelector } from './spacing'
5+
import { notLastChildSelectorVariant } from './spacing'
66

77
export const divides: Rule<Theme>[] = [
88
// color & opacity
99
[/^divide-(.+)$/, function* (match, ctx) {
1010
const result = colorResolver('border-color', 'divide')(match, ctx)
1111
if (result) {
1212
yield {
13-
[ctx.symbols.selector]: notLastChildSelector,
13+
[ctx.symbols.variants]: [notLastChildSelectorVariant(match[0])],
1414
...result[0] as CSSObject,
1515
}
1616
yield result[1]
1717
}
1818
}, { autocomplete: 'divide-$colors' }],
19-
[/^divide-op(?:acity)?-?(.+)$/, function* ([, opacity], { symbols }) {
19+
[/^divide-op(?:acity)?-?(.+)$/, function* ([match, opacity], { symbols }) {
2020
yield {
21-
[symbols.selector]: notLastChildSelector,
21+
[symbols.variants]: [notLastChildSelectorVariant(match)],
2222
'--un-divide-opacity': h.bracket.percent(opacity),
2323
}
2424
}, { autocomplete: ['divide-(op|opacity)', 'divide-(op|opacity)-<percent>'] }],
2525

2626
// divides
2727
[/^divide-?([xy])$/, handlerDivide, { autocomplete: ['divide-(x|y)', 'divide-(x|y)-reverse'] }],
2828
[/^divide-?([xy])-?(.+)$/, handlerDivide],
29-
[/^divide-?([xy])-reverse$/, function* ([, d]: string[], { symbols }: RuleContext<Theme>) {
29+
[/^divide-?([xy])-reverse$/, function* ([m, d]: string[], { symbols }: RuleContext<Theme>) {
3030
yield {
31-
[symbols.selector]: notLastChildSelector,
31+
[symbols.variants]: [notLastChildSelectorVariant(m)],
3232
[`--un-divide-${d}-reverse`]: '1',
3333
}
3434
yield defineProperty(`--un-divide-${d}-reverse`, { initialValue: 0 })
3535
}],
3636

3737
// styles
38-
[new RegExp(`^divide-(${borderStyles.join('|')})$`), function* ([, style]: string[], { symbols }: RuleContext<Theme>) {
38+
[new RegExp(`^divide-(${borderStyles.join('|')})$`), function* ([match, style]: string[], { symbols }: RuleContext<Theme>) {
3939
yield {
40-
[symbols.selector]: notLastChildSelector,
40+
[symbols.variants]: [notLastChildSelectorVariant(match)],
4141
'border-style': style,
4242
}
4343
}, { autocomplete: borderStyles.map(i => `divide-${i}`) }],
4444
]
4545

46-
function* handlerDivide([, d, s]: string[], { symbols }: RuleContext<Theme>) {
46+
function* handlerDivide([m, d, s]: string[], { symbols }: RuleContext<Theme>) {
4747
let v = h.bracket.cssvar.px(s || '1')
4848
if (v != null) {
4949
if (v === '0')
@@ -65,7 +65,7 @@ function* handlerDivide([, d, s]: string[], { symbols }: RuleContext<Theme>) {
6565

6666
if (results) {
6767
yield {
68-
[symbols.selector]: notLastChildSelector,
68+
[symbols.variants]: [notLastChildSelectorVariant(m)],
6969
[`--un-divide-${d}-reverse`]: 0,
7070
...Object.fromEntries(results.flat()),
7171
}

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Rule, RuleContext } from '@unocss/core'
1+
import type { Rule, RuleContext, VariantHandler } from '@unocss/core'
22
import type { Theme } from '../theme'
33
import { defineProperty, directionMap, directionSize, h, numberResolver, themeTracking } from '../utils'
44

@@ -22,21 +22,27 @@ export const margins: Rule<Theme>[] = [
2222

2323
export const spaces: Rule<Theme>[] = [
2424
[/^space-([xy])-(.+)$/, handlerSpace, { autocomplete: ['space-(x|y)', 'space-(x|y)-reverse', 'space-(x|y)-$spacing'] }],
25-
[/^space-([xy])-reverse$/, function* ([, d]: string[], { symbols }: RuleContext<Theme>) {
25+
[/^space-([xy])-reverse$/, function* ([m, d]: string[], { symbols }: RuleContext<Theme>) {
2626
yield {
27-
[symbols.selector]: notLastChildSelector,
27+
[symbols.variants]: [notLastChildSelectorVariant(m)],
2828
[`--un-space-${d}-reverse`]: '1',
2929
}
3030
yield defineProperty(`--un-space-${d}-reverse`, { initialValue: 0 })
3131
}],
3232
]
3333

34-
export function notLastChildSelector(s: string) {
35-
const not = '>:not(:last-child)'
36-
return s.includes(not) ? s : `${s}${not}`
34+
export function notLastChildSelectorVariant(s: string): VariantHandler {
35+
return {
36+
matcher: s,
37+
handle: (input, next) => next({
38+
...input,
39+
parent: `${input.parent ? `${input.parent} $$ ` : ''}${input.selector}`,
40+
selector: ':where(&>:not(:last-child))',
41+
}),
42+
}
3743
}
3844

39-
function* handlerSpace([, d, s]: string[], { theme, symbols }: RuleContext<Theme>) {
45+
function* handlerSpace([m, d, s]: string[], { theme, symbols }: RuleContext<Theme>) {
4046
let v: string | undefined
4147
const num = numberResolver(s)
4248
if (num != null) {
@@ -56,7 +62,7 @@ function* handlerSpace([, d, s]: string[], { theme, symbols }: RuleContext<Theme
5662

5763
if (results) {
5864
yield {
59-
[symbols.selector]: notLastChildSelector,
65+
[symbols.variants]: [notLastChildSelectorVariant(m)],
6066
[`--un-space-${d}-reverse`]: '0',
6167
...Object.fromEntries(results),
6268
}

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

Lines changed: 54 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1711,26 +1711,47 @@ unocss .scope-\[unocss\]\:block{display:block;}
17111711
.normal-nums{font-variant-numeric:normal;}
17121712
.view-transition-foo{view-transition-name:foo;}
17131713
.view-transition-none{view-transition-name:none;}
1714-
.space-x-\[var\(--space\)\]>:not(:last-child),
1715-
.space-x-\$space>: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)));}
1716-
.space-x-2>: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)));}
1717-
.space-y-4>: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)));}
1718-
.space-x-reverse>:not(:last-child){--un-space-x-reverse:1;}
1719-
.divide-\$variable>:not(:last-child){border-color:color-mix(in oklab, var(--variable) var(--un-divide-opacity), transparent) /* var(--variable) */;}
1720-
.divide-current>:not(:last-child){border-color:currentColor;}
1721-
.divide-green-500>:not(:last-child){border-color:color-mix(in srgb, var(--colors-green-500) var(--un-divide-opacity), transparent) /* oklch(72.3% 0.219 149.579) */;}
1722-
.divide-transparent>:not(:last-child){border-color:transparent;}
1723-
.divide-opacity-50>:not(:last-child){--un-divide-opacity:50%;}
1724-
.divide-x-\$variable>:not(:last-child){--un-divide-x-reverse:0;border-left-width:calc(var(--variable) * var(--un-divide-x-reverse));border-left-style:var(--un-border-style);border-right-width:calc(var(--variable) * calc(1 - var(--un-divide-x-reverse)));border-right-style:var(--un-border-style);}
1725-
.divide-x-4>:not(:last-child){--un-divide-x-reverse:0;border-left-width:calc(4px * var(--un-divide-x-reverse));border-left-style:var(--un-border-style);border-right-width:calc(4px * calc(1 - var(--un-divide-x-reverse)));border-right-style:var(--un-border-style);}
1726-
.divide-y-4>:not(:last-child){--un-divide-y-reverse:0;border-top-width:calc(4px * var(--un-divide-y-reverse));border-top-style:var(--un-border-style);border-bottom-width:calc(4px * calc(1 - var(--un-divide-y-reverse)));border-bottom-style:var(--un-border-style);}
1727-
.divide-x-reverse>:not(:last-child){--un-divide-x-reverse:1;}
1728-
.divide-dashed>:not(:last-child){border-style:dashed;}
1729-
.divide-dotted>:not(:last-child){border-style:dotted;}
1730-
.divide-none>:not(:last-child){border-style:none;}
1731-
.divide-ridge>:not(:last-child){border-style:ridge;}
17321714
.field-sizing-fixed{field-sizing:fixed;}
17331715
.field-sizing-content{field-sizing:content;}
1716+
.divide-\$variable{
1717+
:where(&>:not(:last-child)){border-color:color-mix(in oklab, var(--variable) var(--un-divide-opacity), transparent) /* var(--variable) */;}
1718+
}
1719+
.divide-current{
1720+
:where(&>:not(:last-child)){border-color:currentColor;}
1721+
}
1722+
.divide-dashed{
1723+
:where(&>:not(:last-child)){border-style:dashed;}
1724+
}
1725+
.divide-dotted{
1726+
:where(&>:not(:last-child)){border-style:dotted;}
1727+
}
1728+
.divide-green-500{
1729+
:where(&>:not(:last-child)){border-color:color-mix(in srgb, var(--colors-green-500) var(--un-divide-opacity), transparent) /* oklch(72.3% 0.219 149.579) */;}
1730+
}
1731+
.divide-none{
1732+
:where(&>:not(:last-child)){border-style:none;}
1733+
}
1734+
.divide-opacity-50{
1735+
:where(&>:not(:last-child)){--un-divide-opacity:50%;}
1736+
}
1737+
.divide-ridge{
1738+
:where(&>:not(:last-child)){border-style:ridge;}
1739+
}
1740+
.divide-transparent{
1741+
:where(&>:not(:last-child)){border-color:transparent;}
1742+
}
1743+
.divide-x-\$variable{
1744+
:where(&>:not(:last-child)){--un-divide-x-reverse:0;border-left-width:calc(var(--variable) * var(--un-divide-x-reverse));border-left-style:var(--un-border-style);border-right-width:calc(var(--variable) * calc(1 - var(--un-divide-x-reverse)));border-right-style:var(--un-border-style);}
1745+
}
1746+
.divide-x-4{
1747+
:where(&>:not(:last-child)){--un-divide-x-reverse:0;border-left-width:calc(4px * var(--un-divide-x-reverse));border-left-style:var(--un-border-style);border-right-width:calc(4px * calc(1 - var(--un-divide-x-reverse)));border-right-style:var(--un-border-style);}
1748+
}
1749+
.divide-x-reverse{
1750+
:where(&>:not(:last-child)){--un-divide-x-reverse:1;}
1751+
}
1752+
.divide-y-4{
1753+
:where(&>:not(:last-child)){--un-divide-y-reverse:0;border-top-width:calc(4px * var(--un-divide-y-reverse));border-top-style:var(--un-border-style);border-bottom-width:calc(4px * calc(1 - var(--un-divide-y-reverse)));border-bottom-style:var(--un-border-style);}
1754+
}
17341755
.group-aria-\[level\=\"1\"\]\/named\:font-21{
17351756
&:is(:where(.group\/named)[aria-level="1"] *){--un-font-weight:21;font-weight:21;}
17361757
}
@@ -1791,6 +1812,21 @@ unocss .scope-\[unocss\]\:block{display:block;}
17911812
.previous-data-\[x\=y\]\/named\:font-17{
17921813
:where(*[data-x=y] + &){--un-font-weight:17;font-weight:17;}
17931814
}
1815+
.space-x-\[var\(--space\)\]{
1816+
: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)));}
1817+
}
1818+
.space-x-\$space{
1819+
: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)));}
1820+
}
1821+
.space-x-2{
1822+
: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)));}
1823+
}
1824+
.space-x-reverse{
1825+
:where(&>:not(:last-child)){--un-space-x-reverse:1;}
1826+
}
1827+
.space-y-4{
1828+
: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)));}
1829+
}
17941830
@layer base{
17951831
.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);}
17961832
}

0 commit comments

Comments
 (0)