feat: support negated values in directive groupings

README.md

@@ -173,6 +173,13 @@ bw`ring(& ping-700 offset(4 ping-200))`)
 // => ring ring-ping-700 ring-offset-4 ring-offset-on-ping-200
 ```
 
+Negated values can be used within the braces and will be applied to the directive:
+
+```js
+bw`rotate(-3 hover:6 md:(3 hover:-6))`
+// => -rotate-3 hover:rotate-6 md:rotate-3 md:hover:-rotate-6"
+```
+
 ### Function Signature
 
 It is possible to invoke beamwind in a multitude of different ways. The [`bw` function](https://beamwind.js.org/packages/types/interfaces/instance.html#bw) can take **_any_** number of arguments, each of which can be an Object, Array, Boolean, Number, String or [inline plugins](#inline-plugins). This feature is based on [clsx](https://www.npmjs.com/package/cslx).

packages/core/src/__tests__/api.json

@@ -872,5 +872,14 @@
   "even:font-bold": ".even\\:font-bold:nth-child(2n){font-weight:700}",
   "transform-none": { "transform": "none" },
   "transform-gpu": ".transform-gpu{--translate-x:0;--translate-y:0;--rotate:0;--skew-x:0;--skew-y:0;--scale-x:1;--scale-y:1;transform:translate3d(var(--translate-x,0),var(--translate-y,0),0) rotate(var(--rotate,0)) skewX(var(--skew-x,0)) skewY(var(--skew-y,0)) scaleX(var(--scale-x,1)) scaleY(var(--scale-y,1))}",
-  "transform": ".transform{--translate-x:0;--translate-y:0;--rotate:0;--skew-x:0;--skew-y:0;--scale-x:1;--scale-y:1;transform:translateX(var(--translate-x,0)) translateY(var(--translate-y,0)) rotate(var(--rotate,0)) skewX(var(--skew-x,0)) skewY(var(--skew-y,0)) scaleX(var(--scale-x,1)) scaleY(var(--scale-y,1))}"
+  "transform": ".transform{--translate-x:0;--translate-y:0;--rotate:0;--skew-x:0;--skew-y:0;--scale-x:1;--scale-y:1;transform:translateX(var(--translate-x,0)) translateY(var(--translate-y,0)) rotate(var(--rotate,0)) skewX(var(--skew-x,0)) skewY(var(--skew-y,0)) scaleX(var(--scale-x,1)) scaleY(var(--scale-y,1))}",
+  "rotate(-3 hover:6 md:(3 hover:-6))": [
+    "-rotate-3 hover:rotate-6 md:rotate-3 md:hover:-rotate-6",
+    [
+      ".-rotate-3{--rotate:calc(3deg * -1);transform:rotate(calc(3deg * -1));transform:translateX(var(--translate-x,0)) translateY(var(--translate-y,0)) rotate(var(--rotate,0)) skewX(var(--skew-x,0)) skewY(var(--skew-y,0)) scaleX(var(--scale-x,1)) scaleY(var(--scale-y,1))}",
+      ".hover\\:rotate-6:hover{--rotate:6deg;transform:rotate(6deg);transform:translateX(var(--translate-x,0)) translateY(var(--translate-y,0)) rotate(var(--rotate,0)) skewX(var(--skew-x,0)) skewY(var(--skew-y,0)) scaleX(var(--scale-x,1)) scaleY(var(--scale-y,1))}",
+      "@media (min-width: 768px){.md\\:rotate-3{--rotate:3deg;transform:rotate(3deg);transform:translateX(var(--translate-x,0)) translateY(var(--translate-y,0)) rotate(var(--rotate,0)) skewX(var(--skew-x,0)) skewY(var(--skew-y,0)) scaleX(var(--scale-x,1)) scaleY(var(--scale-y,1))}}",
+      "@media (min-width: 768px){.md\\:hover\\:-rotate-6:hover{--rotate:calc(6deg * -1);transform:rotate(calc(6deg * -1));transform:translateX(var(--translate-x,0)) translateY(var(--translate-y,0)) rotate(var(--rotate,0)) skewX(var(--skew-x,0)) skewY(var(--skew-y,0)) scaleX(var(--scale-x,1)) scaleY(var(--scale-y,1))}}"
+    ]
+  ]
 }

packages/core/src/process.ts

@@ -89,6 +89,9 @@ const handlePluginResult = (
   }
 }
 
+const handleNegation = (value: string): string =>
+  value[0] === '-' ? ((negate = '-'), tail(value)) : ((negate = ''), value)
+
 const translate = (token: string, variants: readonly string[]): unknown => {
   const className =
     // Return the marker class name
@@ -100,12 +103,7 @@ const translate = (token: string, variants: readonly string[]): unknown => {
 
   let directive = token
 
-  negate = ''
-
-  if (directive[0] === '-') {
-    negate = '-'
-    directive = tail(directive)
-  }
+  directive = handleNegation(directive)
 
   let parts = directive.split('-')
 
@@ -178,12 +176,11 @@ const onlyVariants = (s: string): '' | boolean => s[0] === ':'
 
 const translateBuffer = (buffer: string): '' => {
   if (buffer) {
+    buffer = handleNegation(buffer)
+
     const p = join(groupings.filter(onlyPrefixes))
-    const token = buffer === '&' ? p : (p && p + '-') + buffer
 
-    if (token) {
-      translate(token, groupings.filter(onlyVariants))
-    }
+    translate(buffer === '&' ? p : negate + (p && p + '-') + buffer, groupings.filter(onlyVariants))
   }
 
   return ''