From 08eeec7e73b85cab7460cbc68f7f1c591f99417a Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Wed, 9 Nov 2022 01:05:44 +0900
Subject: [PATCH] Add web hook

---
 examples/expo-example/src/app.tsx |  2 +-
 packages/core/src/type.ts         |  2 +-
 packages/native/src/index.tsx     |  8 ++---
 packages/react/src/index.ts       | 49 ++++++++++++++++++++++++++++---
 4 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/examples/expo-example/src/app.tsx b/examples/expo-example/src/app.tsx
index 08253d6..674d154 100644
--- a/examples/expo-example/src/app.tsx
+++ b/examples/expo-example/src/app.tsx
@@ -4,7 +4,7 @@
 //
 
 import { StatusBar } from "expo-status-bar";
-import { Text, View } from "react-native";
+import { Pressable, Text, View } from "react-native";
 import { registerRootComponent } from "expo";
 import { useCss } from "@yoshiki/native";
 
diff --git a/packages/core/src/type.ts b/packages/core/src/type.ts
index d42ce39..b850d38 100644
--- a/packages/core/src/type.ts
+++ b/packages/core/src/type.ts
@@ -16,7 +16,7 @@ export const breakpoints = {
 	xl: 1600,
 }
 
-export type YoushikiStyle<Property> =
+export type YoshikiStyle<Property> =
 	| Property
 	| ((theme: Theme) => Property)
 	| Breakpoints<Property>;
diff --git a/packages/native/src/index.tsx b/packages/native/src/index.tsx
index 9f9dbf5..82b7486 100644
--- a/packages/native/src/index.tsx
+++ b/packages/native/src/index.tsx
@@ -4,11 +4,11 @@
 //
 
 import { ViewStyle, TextStyle, ImageStyle, useWindowDimensions } from "react-native";
-import { breakpoints, Breakpoints, Theme, YoushikiStyle } from "@yoshiki/core";
+import { breakpoints, Breakpoints, Theme, YoshikiStyle } from "@yoshiki/core";
 
 // TODO: shorhands
 type EnhancedStyle<Properties> = {
-	[key in keyof Properties]: YoushikiStyle<Properties[key]>;
+	[key in keyof Properties]: YoshikiStyle<Properties[key]>;
 };
 export type CssObject =
 	| EnhancedStyle<ViewStyle>
@@ -66,14 +66,14 @@ export const useCss = () => {
 	return (css: CssObject, leftOvers?: { style?: Properties }) => {
 		const { style, ...leftOverProps } = leftOvers ?? {};
 
-		const ret: Properties = Object.fromEntries(
+		const inline: Properties = Object.fromEntries(
 			Object.entries(css)
 				.map(([key, value]) => [key, propertyMapper(value, { breakpoint, theme })])
 				.filter(([, value]) => value !== undefined),
 		);
 
 		return {
-			style: { ...ret, ...style },
+			style: { ...inline, ...style },
 			...leftOverProps,
 		};
 	};
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 097ea64..9681510 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -4,15 +4,56 @@
 //
 
 import { Properties } from "csstype";
-import { YoushikiStyle } from "@yoshiki/core";
+import { Theme, YoshikiStyle, Breakpoints } from "@yoshiki/core";
+import { useInsertionEffect } from "react";
 
 // TODO: shorthands
 export type CssObject = {
-	[key in keyof Properties]: YoushikiStyle<Properties[key]>;
+	[key in keyof Properties]: YoshikiStyle<Properties[key]>;
 };
 
-export const css = (css: CssObject) => {
+const useTheme = () => {
+	return {} as Theme;
+};
+
+const generateAtomicCss = <Key extends keyof CssObject, Value extends CssObject[Key]>(
+	key: Key,
+	value: Value,
+	{ theme }: { theme: Theme },
+): string => {
+	const cssKey = "toto";
+
+	return `.ys-${key}-${value}: {
+		${cssKey}: ${value};
+	}`;
+};
+
+const dedupProperties = (...classes: string[]) => {
+	return classes.join(" ");
+};
+
+export const useYoshiki = () => {
+	const theme = useTheme();
+	const classes: string[] = [];
+	useInsertionEffect(() => {
+		document.head.insertAdjacentHTML("beforeend", `<style>${classes.join("\n")}</style>`);
+	}, [classes]);
+
 	return {
-		styled: {},
+		css: (
+			css: CssObject /*  | CssObject[] */,
+			{ className, style, ...leftOver }: { className: string; style: Properties },
+		) => {
+			const localStyle = Object.entries(css).map(([key, value]) =>
+				generateAtomicCss(key as keyof CssObject, value, { theme }),
+			);
+			classes.concat(localStyle);
+			return {
+				className: dedupProperties(...localStyle, className),
+				style: style,
+				...leftOver,
+			};
+		},
+		theme,
 	};
 };