feat: negative custom spacing

src/utils/mappings.ts

@@ -117,3 +117,4 @@ export const globalKeywords = [
 ]
 
 export const cssMathFnRE = /^(calc|clamp|min|max)\s*\((.+)\)(.*)/
+export const cssVarFnRE = /^(var)\s*\((.+)\)(.*)/

src/utils/utilities.ts

@@ -20,8 +20,15 @@ export function directionSize(propertyPrefix: string): DynamicMatcher {
   return ([_, direction, size]: string[], { theme }: RuleContext<Theme>): CSSEntries | undefined => {
     size = cacheRestoreSelector(size, theme?.transformRules)
     const v = theme.spacing?.[size || 'DEFAULT'] ?? h.bracket.cssvar.global.auto.fraction.remToRpx(size)
-    if (v != null)
+    if (v != null) {
       return directionMap[direction].map(i => [`${propertyPrefix}${i}`, v])
+    }
+    else if (size.startsWith('-')) {
+      // --custom-spacing-value
+      const v = theme.spacing?.[size.slice(1)]
+      if (v != null)
+        return directionMap[direction].map(i => [`${propertyPrefix}${i}`, `calc(${v} * -1)`])
+    }
   }
 }
 

src/variants/negative.ts

@@ -1,6 +1,6 @@
 import type { Variant } from '@unocss/core'
 import { getStringComponent } from '@unocss/rule-utils'
-import { CONTROL_MINI_NO_NEGATIVE, cssMathFnRE } from '../utils'
+import { CONTROL_MINI_NO_NEGATIVE, cssMathFnRE, cssVarFnRE } from '../utils'
 
 const anchoredNumberRE = /^-?[0-9.]+(?:[a-z]+|%)?$/
 const numberRE = /-?[0-9.]+(?:[a-z]+|%)?/
@@ -10,7 +10,7 @@ const ignoreProps = [
 ]
 
 function negateMathFunction(value: string) {
-  const match = value.match(cssMathFnRE)
+  const match = value.match(cssMathFnRE) || value.match(cssVarFnRE)
   if (match) {
     const [fnBody, rest] = getStringComponent(`(${match[2]})${match[3]}`, '(', ')', ' ') ?? []
     if (fnBody)

test/assets/output/preset-mini/targets.css

@@ -212,7 +212,10 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
 .peer:where(.child)~.peer-where-\[\.child\]\:m-1,
 .previous:is(div)+.previous-is-\[div\]\:m-1,
 .has-\[\:hover\]\:m-1:has(:hover){margin:8rpx;}
-.-m-lg{margin:-40rpx;}
+.-m-lg,
+.m--lg{margin:calc(var(--spacing-lg) * -1);}
+.-m-md,
+.m--md{margin:calc(calc(var(--spacing-md)) * -1);}
 .\!m-\$c-m{margin:var(--c-m) !important;}
 .\[\&_\&\]\:m-13 .\[\&_\&\]\:m-13{margin:104rpx;}
 .\[\&\:nth-child\(2\)\]\:m-10:nth-child(2){margin:80rpx;}
@@ -229,6 +232,8 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
 .m-none{margin:0;}
 .m-1\/2{margin:50%;}
 .m-inherit{margin:inherit;}
+.m-lg{margin:var(--spacing-lg);}
+.m-md{margin:calc(var(--spacing-md));}
 *[open]:readonly .\[\*\[open\]\:readonly_\&\]\:\[\&\[open\]\:disabled\]\:m-17[open]:disabled{margin:136rpx;}
 *>.\[\*\>\&\]\:m-12{margin:96rpx;}
 .m-xy,

test/assets/output/preset-weapp/targets-custom-rules.css

@@ -220,15 +220,20 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
 ._lfl11_\&_lfl11_readonly_lfr11__lfl11_disabled_lfr11__lfr11__cl11_m-15[readonly][disabled]{margin:120rpx;}
 ._lfl11_\&\>_star__lfr11__cl11_m-11>*{margin:88rpx;}
 .-m-lg{margin:-40rpx;}
+.-m-md{margin:-36rpx;}
 .all_cl11_m-auto *,
 .children_cl11_m-auto>*,
 .m-auto{margin:auto;}
 .all_cl11_m1_sl11_1 *{margin:100%;}
 .m-_lfl11_3em_lfr11_{margin:3em;}
+.m--lg{margin:calc(40rpx * -1);}
+.m--md{margin:calc(36rpx * -1);}
 .m-0,
 .m-none{margin:0;}
 .m-1_sl11_2{margin:50%;}
 .m-inherit{margin:inherit;}
+.m-lg{margin:40rpx;}
+.m-md{margin:36rpx;}
 *[open]:readonly ._lfl11__star__lfl11_open_lfr11__cl11_readonly_\&_lfr11__cl11__lfl11_\&_lfl11_open_lfr11__cl11_disabled_lfr11__cl11_m-17[open]:disabled{margin:136rpx;}
 *>._lfl11__star_\>\&_lfr11__cl11_m-12{margin:96rpx;}
 .m-xy,

test/assets/output/preset-weapp/targets.css

@@ -220,15 +220,20 @@ page,root-portal-content,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rot
 ._lfl_\&_lfl_readonly_lfr__lfl_disabled_lfr__lfr__cl_m-15[readonly][disabled]{margin:120rpx;}
 ._lfl_\&\>_star__lfr__cl_m-11>*{margin:88rpx;}
 .-m-lg{margin:-40rpx;}
+.-m-md{margin:-36rpx;}
 .all_cl_m-auto *,
 .children_cl_m-auto>*,
 .m-auto{margin:auto;}
 .all_cl_m1_sl_1 *{margin:100%;}
 .m-_lfl_3em_lfr_{margin:3em;}
+.m--lg{margin:calc(40rpx * -1);}
+.m--md{margin:calc(36rpx * -1);}
 .m-0,
 .m-none{margin:0;}
 .m-1_sl_2{margin:50%;}
 .m-inherit{margin:inherit;}
+.m-lg{margin:40rpx;}
+.m-md{margin:36rpx;}
 *[open]:readonly ._lfl__star__lfl_open_lfr__cl_readonly_\&_lfr__cl__lfl_\&_lfl_open_lfr__cl_disabled_lfr__cl_m-17[open]:disabled{margin:136rpx;}
 *>._lfl__star_\>\&_lfr__cl_m-12{margin:96rpx;}
 .m-xy,

test/assets/preset-mini-targets.ts

@@ -835,6 +835,11 @@ export const presetMiniTargets: string[] = [
   'mxy',
   'm-xy',
   '-m-lg',
+  '-m-md',
+  'm--lg',
+  'm--md',
+  'm-lg',
+  'm-md',
 
   // static
   'contents',

test/preset-mini.test.ts

@@ -29,6 +29,8 @@ const uno = createGenerator({
     },
     spacing: {
       safe: 'max(env(safe-area-inset-left), env(safe-area-inset-right))',
+      md: 'calc(var(--spacing-md))',
+      lg: 'var(--spacing-lg)',
     },
     data: {
       dropdown: 'data-bs-toggle="dropdown"',