Skip to content

Commit

Permalink
feat(preset-wind): divide includes border-style
Browse files Browse the repository at this point in the history
  • Loading branch information
@zyyv
zyyv committed Jul 5, 2022
1 parent 71c77b3 commit 2ad1ff3
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 11 deletions.
2 changes: 1 addition & 1 deletion packages/preset-mini/src/rules/border.ts
View file
Expand Up @@ -122,7 +122,7 @@ function handlerRounded([, a = '', s]: string[], { theme }: RuleContext<Theme>):
return cornerMap[a].map(i => [`border${i}-radius`, v])
}

function handlerBorderStyle([, a = '', s]: string[]): CSSEntries | undefined {
export function handlerBorderStyle([, a = '', s]: string[]): CSSEntries | undefined {
if (borderStyles.includes(s) && a in directionMap)
return directionMap[a].map(i => [`border${i}-style`, s])
}
6 changes: 4 additions & 2 deletions packages/preset-wind/src/rules/divide.ts
View file
@@ -1,6 +1,6 @@
import type { CSSEntries, Rule, RuleContext } from '@unocss/core'
import type { Theme } from '@unocss/preset-mini'
import { borderStyles } from '@unocss/preset-mini/rules'
import { borderStyles, handlerBorderStyle } from '@unocss/preset-mini/rules'
import { colorResolver, directionMap, handler as h } from '@unocss/preset-mini/utils'

export const divides: Rule[] = [
Expand Down Expand Up @@ -30,11 +30,13 @@ function handlerDivide([, d, s]: string[], { theme }: RuleContext<Theme>): CSSEn
: `calc(${v} * calc(1 - var(--un-divide-${d}-reverse)))`
return [key, value]
})
const borderStyle = handlerBorderStyle(['', d, 'solid'])

if (results) {
if (results && borderStyle) {
return [
[`--un-divide-${d}-reverse`, 0],
...results,
...borderStyle,
]
}
}
Expand Down
16 changes: 8 additions & 8 deletions test/__snapshots__/preset-wind.test.ts.snap
View file
Expand Up @@ -202,15 +202,15 @@ exports[`preset-wind > targets 1`] = `
.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));}
.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));}
.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));}
.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));}
.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(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)));}
.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)));}
.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)));}
.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)));}
.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(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 2ad1ff3

Please sign in to comment.