From 96fca489f65a16fb35636679306ccf8887b862bc Mon Sep 17 00:00:00 2001
From: Artem Sapegin <artem@sapegin.ru>
Date: Sun, 21 Jun 2020 08:53:04 +0200
Subject: [PATCH] fix(Stack): Parent stack shouldn't override gap value of
 nested stacks

---
 src/components/Stack.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Stack.tsx b/src/components/Stack.tsx
index cf557f7..4b4931c 100644
--- a/src/components/Stack.tsx
+++ b/src/components/Stack.tsx
@@ -37,8 +37,11 @@ export const Stack = styled(Flex)<Props>(
 			// at the correct side. We have to use CSS properties becase it's the
 			// only way to use several responsive props together
 			// @ts-ignore
-			property: '--stack-gap',
+			property: '> * + *',
 			scale: 'space',
+			transform: (value, scale) => ({
+				'--stack-gap': (scale as TLengthStyledSystem[])[value],
+			}),
 		},
 		direction: {
 			// @ts-ignore