From 7d14bedf82c9e6ecf106d448bd4ff735af8804bb Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Sat, 26 Nov 2022 01:49:43 +0900
Subject: [PATCH] Allow a list of css objects

---
 examples/expo-example/src/app.tsx            | 22 ++++++++-
 examples/expo-example/src/theme.d.ts         | 19 ++++++++
 packages/yoshiki/package.json                |  2 +-
 packages/yoshiki/src/native/generator.tsx    | 51 +++++++++++---------
 packages/yoshiki/src/native/generator.web.ts | 20 +++++---
 packages/yoshiki/src/type.ts                 |  9 ++++
 packages/yoshiki/src/web/generator.ts        | 12 +++--
 7 files changed, 98 insertions(+), 37 deletions(-)
 create mode 100644 examples/expo-example/src/theme.d.ts

diff --git a/examples/expo-example/src/app.tsx b/examples/expo-example/src/app.tsx
index 39e9ca6..20ed3ef 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, Pressable } from "react-native";
+import { Text, View, Pressable, TextProps } from "react-native";
 import { registerRootComponent } from "expo";
 import { Stylable, useYoshiki, px } from "yoshiki/native";
 import { H1 } from "@expo/html-elements";
@@ -45,6 +45,20 @@ const BoxWithoutProps = (props: Stylable) => {
 	);
 };
 
+const P = (props: TextProps) => {
+	const { css } = useYoshiki();
+	return (
+		<Text
+			{...css(
+				{
+					fontFamily: "toto",
+				},
+				props
+			)}
+		/>
+	);
+};
+
 function App() {
 	const { css } = useYoshiki();
 
@@ -60,6 +74,12 @@ function App() {
 			<Text>Open up App.tsx to start working on your app!</Text>
 			<CustomBox color="black" {...css({ borderColor: "red", borderWidth: px(3) })} />
 			<BoxWithoutProps {...css({ borderColor: "red", borderWidth: px(3) })} />
+			<P
+				accessibilityLabel="toto"
+				style={[undefined, false, { color: "red" }, [{ color: "green" }, false]]}
+			>
+				Test
+			</P>
 			<StatusBar style="auto" />
 		</View>
 	);
diff --git a/examples/expo-example/src/theme.d.ts b/examples/expo-example/src/theme.d.ts
new file mode 100644
index 0000000..582c9cf
--- /dev/null
+++ b/examples/expo-example/src/theme.d.ts
@@ -0,0 +1,19 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import "yoshiki";
+import "yoshiki/native";
+
+declare module "yoshiki" {
+	interface Theme {
+		font: string;
+	}
+}
+
+declare module "yoshiki/native" {
+	interface Theme {
+		font: string;
+	}
+}
diff --git a/packages/yoshiki/package.json b/packages/yoshiki/package.json
index 5fe5391..d042bd0 100644
--- a/packages/yoshiki/package.json
+++ b/packages/yoshiki/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "yoshiki",
-	"version": "0.2.2",
+	"version": "0.2.3",
 	"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 cd8482a..a04b4d4 100644
--- a/packages/yoshiki/src/native/generator.tsx
+++ b/packages/yoshiki/src/native/generator.tsx
@@ -3,9 +3,16 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 //
 
-import { ViewStyle, TextStyle, ImageStyle, useWindowDimensions } from "react-native";
+import { ViewStyle, TextStyle, ImageStyle, StyleProp, useWindowDimensions } from "react-native";
 import { breakpoints, Theme, useTheme } from "../theme";
-import { Breakpoints, WithState, YoshikiStyle, hasState } from "../type";
+import {
+	Breakpoints,
+	WithState,
+	YoshikiStyle,
+	hasState,
+	StyleList,
+	processStyleList,
+} from "../type";
 import { isBreakpoints } from "../utils";
 import { shorthandsFn } from "../shorthands";
 import { EnhancedStyle, YsStyleProps } from "./type";
@@ -17,16 +24,13 @@ const useBreakpoint = (): number => {
 	return idx - 1;
 };
 
-const propertyMapper = <
-	Property extends number | string | boolean | undefined | Property[] | object,
->(
+const propertyMapper = (
 	key: string,
-	value: YoshikiStyle<Property>,
+	value: YoshikiStyle<unknown>,
 	{ breakpoint, theme }: { breakpoint: number; theme: Theme },
-): [string, number | string | boolean | undefined | object][] => {
+): [string, unknown][] => {
 	if (key in shorthandsFn) {
-		// @ts-ignore `key` is not narrowed to `keyof typeof shorthandsFn` and value is not type safe.
-		const expanded = shorthandsFn[key as keyof typeof shorthandsFn](value);
+		const expanded = shorthandsFn[key as keyof typeof shorthandsFn](value as any);
 		return Object.entries(expanded)
 			.map(([eKey, eValue]) => propertyMapper(eKey, eValue, { breakpoint, theme }))
 			.flat();
@@ -35,8 +39,8 @@ const propertyMapper = <
 	if (typeof value === "function") {
 		value = value(theme);
 	}
-	if (isBreakpoints<Property>(value)) {
-		const bpKeys = Object.keys(breakpoints) as Array<keyof Breakpoints<Property>>;
+	if (isBreakpoints(value)) {
+		const bpKeys = Object.keys(breakpoints) as Array<keyof Breakpoints<unknown>>;
 		for (let i = breakpoint; i >= 0; i--) {
 			if (bpKeys[i] in value) {
 				const bpVal = value[bpKeys[i]];
@@ -56,19 +60,21 @@ export const useYoshiki = () => {
 		css: <
 			Style extends ViewStyle | TextStyle | ImageStyle,
 			State extends Partial<WithState<EnhancedStyle<Style>>> | Record<string, never>,
+			Leftover,
 		>(
-			css: EnhancedStyle<Style> & State,
-			leftOvers?: { style?: Style },
-		): YsStyleProps<Style, State> => {
+			cssList: StyleList<EnhancedStyle<Style> & State>,
+			leftOvers?: { style?: StyleProp<Style> } & Leftover,
+		): YsStyleProps<Style, State> & Omit<Leftover, "style"> => {
+			const css = processStyleList(cssList);
 			const { style, ...leftOverProps } = leftOvers ?? {};
 
-			const processStyle = (styleList: EnhancedStyle<Style>): Style => {
-				// @ts-ignore propertyMapper always returns key that are valid for the current Style
-				return Object.fromEntries(
+			const processStyle = (styleList: Record<string, YoshikiStyle<unknown>>): Style => {
+				const ret = Object.fromEntries(
 					Object.entries(styleList).flatMap(([key, value]) =>
 						propertyMapper(key, value, { breakpoint, theme }),
 					),
 				);
+				return ret as unknown as Style;
 			};
 
 			if (hasState<Style>(css)) {
@@ -77,26 +83,23 @@ export const useYoshiki = () => {
 					style: (state: { hovered: boolean; focused: boolean; pressed: boolean }) => Style;
 				} = {
 					style: ({ hovered, focused, pressed }) => ({
-						// @ts-ignore EnhancedStyle<Style> is not assignable to EnhancedStyle<Style>...
 						...processStyle(inline),
 						...(hovered ? processStyle(hover) : {}),
 						...(focused ? processStyle(focus) : {}),
 						...(pressed ? processStyle(press) : {}),
-						...style,
+						...processStyleList(style),
 					}),
 					...leftOverProps,
 				};
 
-				// @ts-ignore Ts is not able to identify the type of the return type (the condition throws him off).
-				return ret;
+				return ret as any;
 			} else {
 				const ret: { style: Style } = {
-					style: { ...processStyle(css), ...style },
+					style: { ...processStyle(css), ...processStyleList(style) },
 					...leftOverProps,
 				};
 
-				// @ts-ignore Ts is not able to identify the type of the return type (the condition throws him off).
-				return ret;
+				return ret as YsStyleProps<Style, State> & Leftover;
 			}
 		},
 		theme: theme,
diff --git a/packages/yoshiki/src/native/generator.web.ts b/packages/yoshiki/src/native/generator.web.ts
index 3d136f4..b123350 100644
--- a/packages/yoshiki/src/native/generator.web.ts
+++ b/packages/yoshiki/src/native/generator.web.ts
@@ -3,9 +3,9 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 //
 import { useInsertionEffect } from "react";
-import { ImageStyle, TextStyle, ViewStyle } from "react-native";
+import { ImageStyle, RegisteredStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { useTheme } from "../theme";
-import { WithState } from "../type";
+import { processStyleList, StyleList, WithState } from "../type";
 import { EnhancedStyle } from "./type";
 import createReactDOMStyle from "react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle";
 import { yoshikiCssToClassNames } from "../web/generator";
@@ -27,17 +27,23 @@ export const useYoshiki = () => {
 		css: <
 			Style extends ViewStyle | TextStyle | ImageStyle,
 			State extends Partial<WithState<EnhancedStyle<Style>>> | Record<string, never>,
+			Leftover,
 		>(
-			css: EnhancedStyle<Style> & State,
-			leftOvers?: { style?: Style },
-		): { style: Style } => {
-			const overrides = leftOvers?.style?.$$css ? leftOvers.style.yoshiki : undefined;
+			cssList: StyleList<EnhancedStyle<Style> & State>,
+			leftOvers?: { style?: StyleProp<Style> } & Leftover,
+		): { style: Style } & Omit<Leftover, "style"> => {
+			const css = processStyleList(cssList);
+			const inline = processStyleList<Style | RegisteredStyle<Style>>(leftOvers?.style);
+			const overrides = "$$css" in inline && inline.$$css ? inline.yoshiki : undefined;
 			const classNames = yoshikiCssToClassNames(css, overrides?.split(" "), {
 				registry,
 				theme,
 				preprocessBlock: rnwPreprocess,
 			});
-			return { style: { $$css: true, yoshiki: classNames } as Style };
+			return {
+				...leftOvers,
+				style: [inline, { $$css: true, yoshiki: classNames } as Style],
+			} as any;
 		},
 		theme,
 	};
diff --git a/packages/yoshiki/src/type.ts b/packages/yoshiki/src/type.ts
index bd5783b..2fa1697 100644
--- a/packages/yoshiki/src/type.ts
+++ b/packages/yoshiki/src/type.ts
@@ -28,6 +28,15 @@ export const hasState = <Style>(obj: unknown): obj is WithState<Style> => {
 	return "hover" in obj || "focus" in obj || "press" in obj;
 };
 
+const isReadonlyArray = (array: unknown): array is ReadonlyArray<unknown> => Array.isArray(array);
+
+export type StyleList<T> = T | undefined | null | false | ReadonlyArray<StyleList<T>>;
+export const processStyleList = <Style>(los: StyleList<Style>): Partial<Style> => {
+	if (isReadonlyArray(los))
+		return los.reduce((acc, x) => ({ ...acc, ...processStyleList(x) }), {});
+	return los ? los : {};
+};
+
 // dummy type only used for the API.
 export type Length = { a: 1 };
 export type CssProperties = _CssProperties<0 | Length | string>;
diff --git a/packages/yoshiki/src/web/generator.ts b/packages/yoshiki/src/web/generator.ts
index 86a0468..0619ec5 100644
--- a/packages/yoshiki/src/web/generator.ts
+++ b/packages/yoshiki/src/web/generator.ts
@@ -6,7 +6,7 @@
 import { useInsertionEffect } from "react";
 import { prefix } from "inline-style-prefixer";
 import { Theme, breakpoints, useTheme } from "../theme";
-import { WithState, YoshikiStyle, CssProperties } from "../type";
+import { WithState, YoshikiStyle, CssProperties, StyleList, processStyleList } from "../type";
 import { isBreakpoints } from "../utils";
 import { StyleRegistry, useStyleRegistry } from "./registry";
 import { shorthandsFn } from "../shorthands";
@@ -160,7 +160,7 @@ export const yoshikiCssToClassNames = (
 				const n = generateAtomicCss(key, value, state ?? "normal", {
 					theme,
 					preprocess,
-					preprocessBlock
+					preprocessBlock,
 				});
 				acc[0].push(...n.map((x) => x[0]));
 				acc[1].push(...n.map((x) => x[1]));
@@ -190,12 +190,16 @@ export const useYoshiki = () => {
 	}, [registry]);
 
 	return {
-		css: (css: CssObject, leftOverProps?: { className?: string }) => {
+		css: <Leftover>(
+			cssList: StyleList<CssObject>,
+			leftOverProps?: Leftover & { className?: string },
+		): { className: string } & Omit<Leftover, "className"> => {
+			const css = processStyleList(cssList);
 			const { className, ...leftOver } = leftOverProps ?? {};
 			return {
 				className: yoshikiCssToClassNames(css, className?.split(" "), { registry, theme }),
 				...leftOver,
-			};
+			} as any;
 		},
 		theme,
 	};