From 2fc5cd77f45df43d3b787a94365e3055efa52df7 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Wed, 11 Jan 2023 14:04:17 +0900
Subject: [PATCH] Allow child id to be specified (still hacky)

---
 packages/yoshiki/package.json                | 2 +-
 packages/yoshiki/src/native/generator.tsx    | 2 +-
 packages/yoshiki/src/native/generator.web.ts | 4 ++--
 packages/yoshiki/src/web/generator.ts        | 9 +++++----
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/yoshiki/package.json b/packages/yoshiki/package.json
index 79786e4..1e8b617 100644
--- a/packages/yoshiki/package.json
+++ b/packages/yoshiki/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "yoshiki",
-	"version": "1.1.0",
+	"version": "1.1.2",
 	"author": "Zoe Roux <zoe.roux@sdg.moe> (https://github.com/AnonymusRaccoon)",
 	"license": "MIT",
 	"keywords": [
diff --git a/packages/yoshiki/src/native/generator.tsx b/packages/yoshiki/src/native/generator.tsx
index 35d32d8..173a431 100644
--- a/packages/yoshiki/src/native/generator.tsx
+++ b/packages/yoshiki/src/native/generator.tsx
@@ -66,7 +66,7 @@ const useForceRerender = () => {
 
 type State = EnhancedStyle<ViewStyle | TextStyle | ImageStyle> | undefined;
 
-export const useYoshiki = () => {
+export const useYoshiki = (_?: string) => {
 	const breakpoint = useBreakpoint();
 	const theme = useTheme();
 	const rerender = useForceRerender();
diff --git a/packages/yoshiki/src/native/generator.web.ts b/packages/yoshiki/src/native/generator.web.ts
index 146dd9c..4bacf35 100644
--- a/packages/yoshiki/src/native/generator.web.ts
+++ b/packages/yoshiki/src/native/generator.web.ts
@@ -16,10 +16,10 @@ const rnwPreprocess = (block: Record<string, unknown>) => {
 	return createReactDOMStyle(block);
 };
 
-export const useYoshiki = () => {
+export const useYoshiki = (prefixKey?: string) => {
 	const registry = useStyleRegistry();
 	const theme = useTheme();
-	const [parentPrefix, childPrefix] = useClassId();
+	const [parentPrefix, childPrefix] = useClassId(prefixKey);
 
 	useInsertionEffect(() => {
 		registry.flushToBrowser();
diff --git a/packages/yoshiki/src/web/generator.ts b/packages/yoshiki/src/web/generator.ts
index c4cdb1c..42b86aa 100644
--- a/packages/yoshiki/src/web/generator.ts
+++ b/packages/yoshiki/src/web/generator.ts
@@ -207,8 +207,9 @@ export const yoshikiCssToClassNames = (
 	);
 };
 
-export const useClassId = () => {
-	const id = useId().replaceAll(":", "-");
+// TODO: This is extremly hacky and an ID should be unique to a component, not an instance.
+export const useClassId = (prefixKey?: string) => {
+	const id = prefixKey ?? useId().replaceAll(":", "-");
 	return ["ysp" + id, "ysc" + id] as const;
 };
 
@@ -293,10 +294,10 @@ export const generateChildCss = (
 	processStyles(press, "press");
 };
 
-export const useYoshiki = () => {
+export const useYoshiki = (prefixKey?: string) => {
 	const theme = useTheme();
 	const registry = useStyleRegistry();
-	const [parentPrefix, childPrefix] = useClassId();
+	const [parentPrefix, childPrefix] = useClassId(prefixKey);
 
 	useInsertionEffect(() => {
 		registry.flushToBrowser();