Add support to undefined values

2025-12-06 07:06:13 +00:00 · 2022-11-30 14:41:15 +09:00
parent 7c1757597e
commit fab6aad87d
3 changed files with 16 additions and 2 deletions
--- a/examples/next-example/src/pages/index.tsx
+++ b/examples/next-example/src/pages/index.tsx
@@ -20,7 +20,18 @@ export default function Home(props: object) {
 	const { css } = useYoshiki();

 	return (
-		<div {...css({ display: "flex", paddingLeft: "2rem", paddingRight: "2rem" }, props)}>
+		<div
+			{...css(
+				{
+					display: "flex",
+					paddingLeft: "2rem",
+					paddingRight: "2rem",
+					flexGrow: 1,
+					margin: undefined,
+				},
+				props,
+			)}
+		>
 			<Head>
 				<title>Create Next App</title>
 				<meta name="description" content="Generated by create next app" />
--- a/packages/yoshiki/package.json
+++ b/packages/yoshiki/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "yoshiki",
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"author": "Zoe Roux <zoe.roux@sdg.moe> (https://github.com/AnonymusRaccoon)",
 	"license": "MIT",
 	"keywords": [
--- a/packages/yoshiki/src/web/generator.ts
+++ b/packages/yoshiki/src/web/generator.ts
@@ -33,6 +33,7 @@ const stateMapper: {

 const sanitize = (className: unknown) => {
 	const name = typeof className === "string" ? className : JSON.stringify(className);
+	if (name === undefined) return "undefined";
 	return name.replaceAll(/[^\w-_]/g, "");
 };

@@ -55,6 +56,8 @@ const generateClass = (
 		);
 	}

+	if (value === undefined) return [];
+
 	preprocessBlock ??= (id) => id;
 	const className = `ys-${context}${key}-${sanitize(value)}`;
 	const block = Object.entries(prefix(preprocessBlock({ [key]: value })))