diff --git a/packages/preset-mini/src/rules/border.ts b/packages/preset-mini/src/rules/border.ts index 1e445a81ec..5059c43269 100644 --- a/packages/preset-mini/src/rules/border.ts +++ b/packages/preset-mini/src/rules/border.ts @@ -122,7 +122,7 @@ function handlerRounded([, a = '', s]: string[], { theme }: RuleContext): 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]) } diff --git a/packages/preset-wind/src/rules/divide.ts b/packages/preset-wind/src/rules/divide.ts index 9dabadb018..55e5248966 100644 --- a/packages/preset-wind/src/rules/divide.ts +++ b/packages/preset-wind/src/rules/divide.ts @@ -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[] = [ @@ -30,11 +30,13 @@ function handlerDivide([, d, s]: string[], { theme }: RuleContext): 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, ] } } diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap index 511d677ecf..b635f4d72c 100644 --- a/test/__snapshots__/preset-wind.test.ts.snap +++ b/test/__snapshots__/preset-wind.test.ts.snap @@ -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;}