From 69b41d282dfe9b3c4b782961f9f3353a112c46fa Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Mon, 28 Jun 2021 14:02:20 -0700
Subject: [PATCH] Remove `@emotion/css` from ZStack

---
 packages/components/src/z-stack/component.tsx | 25 +++++--------------
 packages/components/src/z-stack/styles.ts     | 22 +++++++++++++---
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx
index 8b4d0b6d107d20..9cb9be854f02c9 100644
--- a/packages/components/src/z-stack/component.tsx
+++ b/packages/components/src/z-stack/component.tsx
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { css, cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import type { Ref, ReactNode } from 'react';
 
@@ -17,9 +16,7 @@ import { getValidChildren } from '../ui/utils/get-valid-children';
 import { contextConnect, useContextSystem } from '../ui/context';
 // eslint-disable-next-line no-duplicate-imports
 import type { PolymorphicComponentProps } from '../ui/context';
-import { View } from '../view';
-import * as styles from './styles';
-const { ZStackView } = styles;
+import { ZStackView, ZStackChild } from './styles';
 
 export interface ZStackProps {
 	/**
@@ -66,27 +63,17 @@ function ZStack(
 		const zIndex = isReversed ? childrenLastIndex - index : index;
 		const offsetAmount = offset * index;
 
-		const classes = cx(
-			isLayered ? styles.positionAbsolute : styles.positionRelative,
-			css( {
-				...( isLayered
-					? { marginLeft: offsetAmount }
-					: { right: offsetAmount * -1 } ),
-			} )
-		);
-
 		const key = isValidElement( child ) ? child.key : index;
 
 		return (
-			<View
-				className={ classes }
+			<ZStackChild
+				isLayered={ isLayered }
+				offsetAmount={ offsetAmount }
+				zIndex={ zIndex }
 				key={ key }
-				style={ {
-					zIndex,
-				} }
 			>
 				{ child }
-			</View>
+			</ZStackChild>
 		);
 	} );
 
diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts
index 60ae05a2a897e4..ae199a835c4c7c 100644
--- a/packages/components/src/z-stack/styles.ts
+++ b/packages/components/src/z-stack/styles.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 export const ZStackView = styled.div`
@@ -9,10 +9,26 @@ export const ZStackView = styled.div`
 	position: relative;
 `;
 
-export const positionAbsolute = css`
+export const ZStackChild = styled.div< {
+	isLayered: boolean;
+	offsetAmount: number;
+	zIndex: number;
+} >`
+	${ ( { isLayered, offsetAmount } ) =>
+		isLayered
+			? css( { marginLeft: offsetAmount } )
+			: css( { right: offsetAmount * -1 } ) }
+
+	${ ( { isLayered } ) =>
+		isLayered ? positionAbsolute : positionRelative }
+
+	${ ( { zIndex } ) => css( { zIndex } ) }
+`;
+
+const positionAbsolute = css`
 	position: absolute;
 `;
 
-export const positionRelative = css`
+const positionRelative = css`
 	position: relative;
 `;