Handle negative values in styled token strings

Temzasse · Oct 23, 2021 · a29cdee · a29cdee
1 parent 28e72c9
commit a29cdee
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/example/src/Example.tsx b/example/src/Example.tsx
@@ -114,6 +114,8 @@ const Box2 = styled(Box, {
   marginTop: '$3',
   size: 100,
   borderRadius: theme.radii.lg,
+  marginRight: '-$space$6',
+  marginBottom: '-$4',
 });
 
 const FunctionBox = styled(

diff --git a/src/internals/utils.js b/src/internals/utils.js
@@ -96,7 +96,10 @@ export function processStyles({ styles, theme, config }) {
       // Handle theme tokens, eg. `color: "$primary"` or `color: "$colors$primary"`
       const arr = val.split('$');
       const token = arr.pop();
-      const scale = arr.pop();
+      const scaleOrSign = arr.pop();
+      const maybeSign = arr.pop(); // handle negative values
+      const scale = scaleOrSign !== '-' ? scaleOrSign : undefined;
+      const sign = scaleOrSign === '-' || maybeSign === '-' ? -1 : undefined;
 
       if (scale && theme[scale]) {
         acc[key] = theme[scale][token].value;
@@ -128,6 +131,10 @@ export function processStyles({ styles, theme, config }) {
       ) {
         acc[key] = theme.letterSpacings[token].value;
       }
+
+      if (typeof acc[key] === 'number' && sign) {
+        acc[key] *= sign;
+      }
     } else if (typeof val === 'object' && val.value !== undefined) {
       // Handle cases where the value comes from the `theme` returned by `createStitches`
       acc[key] = val.value;