fix(preset-mini): border-[calc(xx)] is generated to border-color (#3230)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Oct 23, 2023 · d6b1bb4 · d6b1bb4
1 parent bbf73f6
commit d6b1bb4
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
diff --git a/packages/preset-mini/src/_rules/border.ts b/packages/preset-mini/src/_rules/border.ts
@@ -1,7 +1,7 @@
 import type { CSSEntries, CSSObject, Rule, RuleContext } from '@unocss/core'
 import { colorOpacityToString, colorToString } from '@unocss/rule-utils'
 import type { Theme } from '../theme'
-import { cornerMap, directionMap, globalKeywords, h, hasParseableColor, parseColor } from '../utils'
+import { cornerMap, directionMap, globalKeywords, h, hasParseableColor, isCSSMathFn, parseColor } from '../utils'
 
 export const borderStyles = ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none', 'groove', 'ridge', 'inset', 'outset', ...globalKeywords]
 
@@ -80,6 +80,12 @@ function borderColorResolver(direction: string) {
       }
     }
     else if (color) {
+      if (isCSSMathFn(color)) {
+        return {
+          'border-width': color,
+        }
+      }
+
       return {
         [`border${direction}-color`]: colorToString(color, alpha),
       }

diff --git a/packages/preset-mini/src/_utils/mappings.ts b/packages/preset-mini/src/_utils/mappings.ts
@@ -113,3 +113,5 @@ export const globalKeywords = [
   'revert-layer',
   'unset',
 ]
+
+export const cssMathFnRE = /^(?:calc|env|clamp|min|max)\(.*\)/
diff --git a/packages/preset-mini/src/_utils/utilities.ts b/packages/preset-mini/src/_utils/utilities.ts
@@ -3,7 +3,7 @@ import { toArray } from '@unocss/core'
 import { colorOpacityToString, colorToString, getStringComponents, parseCssColor } from '@unocss/rule-utils'
 import type { Theme } from '../theme'
 import { h } from './handlers'
-import { directionMap, globalKeywords } from './mappings'
+import { cssMathFnRE, directionMap, globalKeywords } from './mappings'
 
 export const CONTROL_MINI_NO_NEGATIVE = '$$mini-no-negative'
 
@@ -240,3 +240,7 @@ export function resolveVerticalBreakpoints(context: Readonly<VariantContext<Them
 export function makeGlobalStaticRules(prefix: string, property?: string): StaticRule[] {
   return globalKeywords.map(keyword => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }])
 }
+
+export function isCSSMathFn(value: string) {
+  return cssMathFnRE.test(value)
+}
diff --git a/test/assets/output/preset-mini-targets.css b/test/assets/output/preset-mini-targets.css
@@ -9,11 +9,11 @@
 .\[--css-spacing\:theme\(spacing\.sm\)\]{--css-spacing:0.875rem;}
 .\[--css-variable-color\:theme\(colors\.green\.500\)\,theme\(colors\.blue\.500\)\]{--css-variable-color:#22c55e,#3b82f6;}
 .\[--css-variable-color\:theme\(colors\.red\.500\)\]{--css-variable-color:#ef4444;}
-.\[--css-variable-color\:theme\(colors\.red\.500\/50\%\)\]{--css-variable-color:rgba(239,68,68,50%);}
+.\[--css-variable-color\:theme\(colors\.red\.500\/50\%\)\]{--css-variable-color:rgb(239 68 68 / 50%);}
 .\[--css-variable\:\"wght\"_400\,_\"opsz\"_14\]{--css-variable:"wght" 400, "opsz" 14;}
 .\[a\:b\]{a:b;}
 .\[background-image\:url\(star_transparent\.gif\)\,_url\(cat_front\.png\)\]{background-image:url(star_transparent.gif), url(cat_front.png);}
-.\[color\:theme\(colors\.blue\.300\/40\%\)\]{color:rgba(147,197,253,40%);}
+.\[color\:theme\(colors\.blue\.300\/40\%\)\]{color:rgb(147 197 253 / 40%);}
 .\[content\:attr\(attr_content\)\]{content:attr(attr content);}
 .\[content\:attr\(attr\\_content\)\]{content:attr(attr_content);}
 .\[font-family\:\'Inter\'\,_sans-serif\]{font-family:'Inter', sans-serif;}
@@ -222,6 +222,8 @@ unocss .scope-\[unocss\]\:block{display:block;}
 .border-t-width-3{border-top-width:3px;}
 .b-block-size-\$variable{border-block-start-width:var(--variable);border-block-end-width:var(--variable);}
 .border-\[\#124\]{--un-border-opacity:1;border-color:rgb(17 34 68 / var(--un-border-opacity));}
+.border-\[calc\(10px\+1px\)\]{border-width:calc(10px + 1px);}
+.border-\[calc\(var\(--border-width\)\*1px\)\]{border-width:calc(var(--border-width) * 1px);}
 .border-\[var\(--color\)\],
 .border-\$color{border-color:var(--color);}
 .border-black{--un-border-opacity:1;border-color:rgb(0 0 0 / var(--un-border-opacity));}
@@ -1005,7 +1007,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
 }
 @media (hover) and (pointer: fine){
 .media-mouse\:block{display:block;}
-.group:hover .group-hover\:media-mouse\:bg-red{--un-bg-opacity:1;background-color:rgba(248,113,113,var(--un-bg-opacity));}
+.group:hover .group-hover\:media-mouse\:bg-red{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}
 }
 @media (prefers-color-scheme: dark){
 .dark\:text-xl{font-size:1.25rem;line-height:1.75rem;}

diff --git a/test/assets/preset-mini-targets.ts b/test/assets/preset-mini-targets.ts
@@ -71,6 +71,8 @@ export const presetMiniTargets: string[] = [
   'border-size-unset',
   'border-x-width-3',
   'border-t-width-3',
+  'border-[calc(var(--border-width)*1px)]',
+  'border-[calc(10px+1px)]',
   'rounded-[4px]',
   'rounded-1/2',
   'rounded-full',