chore(@jsxcss/emotion): add dependency

.npmrc

@@ -0,0 +1,3 @@
+auto-install-peers = true
+node-linker = isolated
+hoist = true

apps/web/next.config.js

@@ -1,4 +1,8 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
   transpilePackages: ['@slam/ui'],
+  compiler: {
+    emotion: true,
+  },
 }

apps/web/package.json

@@ -17,6 +17,7 @@
     "@emotion/styled": "^11.10.4",
     "@hookform/devtools": "^4.2.2",
     "@hookform/resolvers": "^2.9.8",
+    "@jsxcss/emotion": "^0.2.2",
     "@sentry/nextjs": "^7.15.0",
     "@slam/hooks": "workspace:*",
     "@slam/types": "workspace:*",

apps/web/src/pages/test.tsx

@@ -0,0 +1,23 @@
+import { css } from '@emotion/react'
+import { Box, Stack } from '@jsxcss/emotion'
+import { motion } from 'framer-motion'
+
+const boxStyle = css`
+  width: 100px;
+  height: 100px;
+  background-color: red;
+`
+
+const Test = () => {
+  return (
+    <>
+      <Stack.Vertical as={motion.div} whileTap={{ scale: 0.8 }}>
+        <Box css={boxStyle} />
+        <Box css={boxStyle} />
+        <Box css={boxStyle} />
+      </Stack.Vertical>
+    </>
+  )
+}
+
+export default Test