Skip to content

Commit

Permalink
fix(preset-wind): use 0px multiple on space-x and divide-x rules (#2356)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chu121su12
chu121su12 committed Mar 16, 2023
1 parent 0f78cd3 commit 397749a
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 10 deletions.
5 changes: 4 additions & 1 deletion packages/preset-wind/src/rules/divide.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,11 @@ export const divides: Rule[] = [
]

function handlerDivide([, d, s]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined {
const v = theme.lineWidth?.[s || 'DEFAULT'] ?? h.bracket.cssvar.px(s || '1')
let v = theme.lineWidth?.[s || 'DEFAULT'] ?? h.bracket.cssvar.px(s || '1')
if (v != null) {
if (v === '0')
v = '0px'

const results = directionMap[d].map((item): [string, string] => {
const key = `border${item}-width`
const value = (item.endsWith('right') || item.endsWith('bottom'))
Expand Down
5 changes: 4 additions & 1 deletion packages/preset-wind/src/rules/spacing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,11 @@ export const spaces: Rule[] = [
]

function handlerSpace([, d, s]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined {
const v = theme.spacing?.[s || 'DEFAULT'] ?? h.bracket.cssvar.auto.fraction.rem(s || '1')
let v = theme.spacing?.[s || 'DEFAULT'] ?? h.bracket.cssvar.auto.fraction.rem(s || '1')
if (v != null) {
if (v === '0')
v = '0px'

const results = directionMap[d].map((item): [string, string] => {
const key = `margin${item}`
const value = (item.endsWith('right') || item.endsWith('bottom'))
Expand Down
8 changes: 4 additions & 4 deletions test/__snapshots__/postcss.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,22 +171,22 @@ exports[`postcss > @unocss 1`] = `
.space-x-\\\\$space>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(var(--space) * calc(1 - var(--un-space-x-reverse)));margin-right:calc(var(--space) * var(--un-space-x-reverse));}
.space-x-2>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.5rem * var(--un-space-x-reverse));}
.space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}
.space-y-none>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0 * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0 * var(--un-space-y-reverse));}
.space-y-none>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0px * var(--un-space-y-reverse));}
.space-x-reverse>:not([hidden])~:not([hidden]){--un-space-x-reverse:1;}
.space-block-4{--un-space-block-reverse:0;margin-block-start:calc(1rem * calc(1 - var(--un-space-block-reverse)));margin-block-end:calc(1rem * calc(1 - var(--un-space-block-reverse)));}
.space-block-none{--un-space-block-reverse:0;margin-block-start:calc(0 * calc(1 - var(--un-space-block-reverse)));margin-block-end:calc(0 * calc(1 - var(--un-space-block-reverse)));}
.space-block-none{--un-space-block-reverse:0;margin-block-start:calc(0px * calc(1 - var(--un-space-block-reverse)));margin-block-end:calc(0px * calc(1 - var(--un-space-block-reverse)));}
.space-inline-\\\\$space{--un-space-inline-reverse:0;margin-inline-start:calc(var(--space) * calc(1 - var(--un-space-inline-reverse)));margin-inline-end:calc(var(--space) * calc(1 - var(--un-space-inline-reverse)));}
.space-inline-2{--un-space-inline-reverse:0;margin-inline-start:calc(0.5rem * calc(1 - var(--un-space-inline-reverse)));margin-inline-end:calc(0.5rem * calc(1 - var(--un-space-inline-reverse)));}
.space-inline-reverse{--un-space-inline-reverse:1;}
.divide-x-\\\\$variable>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(var(--variable) * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(var(--variable) * var(--un-divide-x-reverse));border-left-style:solid;border-right-style:solid;}
.divide-x-4>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(4px * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(4px * var(--un-divide-x-reverse));border-left-style:solid;border-right-style:solid;}
.divide-x-none>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(0 * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(0 * var(--un-divide-x-reverse));border-left-style:solid;border-right-style:solid;}
.divide-x-none>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(0px * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(0px * var(--un-divide-x-reverse));border-left-style:solid;border-right-style:solid;}
.divide-y-4>:not([hidden])~:not([hidden]){--un-divide-y-reverse:0;border-top-width:calc(4px * calc(1 - var(--un-divide-y-reverse)));border-bottom-width:calc(4px * var(--un-divide-y-reverse));border-top-style:solid;border-bottom-style:solid;}
.divide-x-reverse>:not([hidden])~:not([hidden]){--un-divide-x-reverse:1;}
.divide-block-4>:not([hidden])~:not([hidden]){--un-divide-block-reverse:0;border-block-start-width:calc(4px * calc(1 - var(--un-divide-block-reverse)));border-block-end-width:calc(4px * calc(1 - var(--un-divide-block-reverse)));border-block-start-style:solid;border-block-end-style:solid;}
.divide-inline-\\\\$variable>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:0;border-inline-start-width:calc(var(--variable) * calc(1 - var(--un-divide-inline-reverse)));border-inline-end-width:calc(var(--variable) * calc(1 - var(--un-divide-inline-reverse)));border-inline-start-style:solid;border-inline-end-style:solid;}
.divide-inline-4>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:0;border-inline-start-width:calc(4px * calc(1 - var(--un-divide-inline-reverse)));border-inline-end-width:calc(4px * calc(1 - var(--un-divide-inline-reverse)));border-inline-start-style:solid;border-inline-end-style:solid;}
.divide-inline-none>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:0;border-inline-start-width:calc(0 * calc(1 - var(--un-divide-inline-reverse)));border-inline-end-width:calc(0 * calc(1 - var(--un-divide-inline-reverse)));border-inline-start-style:solid;border-inline-end-style:solid;}
.divide-inline-none>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:0;border-inline-start-width:calc(0px * calc(1 - var(--un-divide-inline-reverse)));border-inline-end-width:calc(0px * calc(1 - var(--un-divide-inline-reverse)));border-inline-start-style:solid;border-inline-end-style:solid;}
.divide-inline-reverse>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:1;}
.divide-\\\\$variable>:not([hidden])~:not([hidden]){border-color:var(--variable);}
.divide-current>:not([hidden])~:not([hidden]){border-color:currentColor;}
Expand Down
8 changes: 4 additions & 4 deletions test/__snapshots__/preset-wind.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,22 +232,22 @@ exports[`preset-wind > targets 1`] = `
.space-x-\\\\$space>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(var(--space) * calc(1 - var(--un-space-x-reverse)));margin-right:calc(var(--space) * var(--un-space-x-reverse));}
.space-x-2>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.5rem * var(--un-space-x-reverse));}
.space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}
.space-y-none>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0 * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0 * var(--un-space-y-reverse));}
.space-y-none>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0px * var(--un-space-y-reverse));}
.space-x-reverse>:not([hidden])~:not([hidden]){--un-space-x-reverse:1;}
.space-block-4{--un-space-block-reverse:0;margin-block-start:calc(1rem * calc(1 - var(--un-space-block-reverse)));margin-block-end:calc(1rem * calc(1 - var(--un-space-block-reverse)));}
.space-block-none{--un-space-block-reverse:0;margin-block-start:calc(0 * calc(1 - var(--un-space-block-reverse)));margin-block-end:calc(0 * calc(1 - var(--un-space-block-reverse)));}
.space-block-none{--un-space-block-reverse:0;margin-block-start:calc(0px * calc(1 - var(--un-space-block-reverse)));margin-block-end:calc(0px * calc(1 - var(--un-space-block-reverse)));}
.space-inline-\\\\$space{--un-space-inline-reverse:0;margin-inline-start:calc(var(--space) * calc(1 - var(--un-space-inline-reverse)));margin-inline-end:calc(var(--space) * calc(1 - var(--un-space-inline-reverse)));}
.space-inline-2{--un-space-inline-reverse:0;margin-inline-start:calc(0.5rem * calc(1 - var(--un-space-inline-reverse)));margin-inline-end:calc(0.5rem * calc(1 - var(--un-space-inline-reverse)));}
.space-inline-reverse{--un-space-inline-reverse:1;}
.divide-x-\\\\$variable>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(var(--variable) * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(var(--variable) * var(--un-divide-x-reverse));border-left-style:solid;border-right-style:solid;}
.divide-x-4>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(4px * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(4px * var(--un-divide-x-reverse));border-left-style:solid;border-right-style:solid;}
.divide-x-none>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(0 * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(0 * var(--un-divide-x-reverse));border-left-style:solid;border-right-style:solid;}
.divide-x-none>:not([hidden])~:not([hidden]){--un-divide-x-reverse:0;border-left-width:calc(0px * calc(1 - var(--un-divide-x-reverse)));border-right-width:calc(0px * var(--un-divide-x-reverse));border-left-style:solid;border-right-style:solid;}
.divide-y-4>:not([hidden])~:not([hidden]){--un-divide-y-reverse:0;border-top-width:calc(4px * calc(1 - var(--un-divide-y-reverse)));border-bottom-width:calc(4px * var(--un-divide-y-reverse));border-top-style:solid;border-bottom-style:solid;}
.divide-x-reverse>:not([hidden])~:not([hidden]){--un-divide-x-reverse:1;}
.divide-block-4>:not([hidden])~:not([hidden]){--un-divide-block-reverse:0;border-block-start-width:calc(4px * calc(1 - var(--un-divide-block-reverse)));border-block-end-width:calc(4px * calc(1 - var(--un-divide-block-reverse)));border-block-start-style:solid;border-block-end-style:solid;}
.divide-inline-\\\\$variable>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:0;border-inline-start-width:calc(var(--variable) * calc(1 - var(--un-divide-inline-reverse)));border-inline-end-width:calc(var(--variable) * calc(1 - var(--un-divide-inline-reverse)));border-inline-start-style:solid;border-inline-end-style:solid;}
.divide-inline-4>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:0;border-inline-start-width:calc(4px * calc(1 - var(--un-divide-inline-reverse)));border-inline-end-width:calc(4px * calc(1 - var(--un-divide-inline-reverse)));border-inline-start-style:solid;border-inline-end-style:solid;}
.divide-inline-none>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:0;border-inline-start-width:calc(0 * calc(1 - var(--un-divide-inline-reverse)));border-inline-end-width:calc(0 * calc(1 - var(--un-divide-inline-reverse)));border-inline-start-style:solid;border-inline-end-style:solid;}
.divide-inline-none>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:0;border-inline-start-width:calc(0px * calc(1 - var(--un-divide-inline-reverse)));border-inline-end-width:calc(0px * calc(1 - var(--un-divide-inline-reverse)));border-inline-start-style:solid;border-inline-end-style:solid;}
.divide-inline-reverse>:not([hidden])~:not([hidden]){--un-divide-inline-reverse:1;}
.divide-\\\\$variable>:not([hidden])~:not([hidden]){border-color:var(--variable);}
.divide-current>:not([hidden])~:not([hidden]){border-color:currentColor;}
Expand Down

0 comments on commit 397749a

Please sign in to comment.