Add next example and handle media query on the web

.eslintrc.json

@@ -1,6 +1,11 @@
 {
 	"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
 	"plugins": ["header"],
+	"settings": {
+		"next": {
+			"rootDir": "examples/next-example/"
+		}
+	},
 	"rules": {
 		"header/header": [
 			"error",

examples/next-example/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/next-example/next.config.js

@@ -0,0 +1,25 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+const withTM = require("next-transpile-modules")(["@yoshiki/react", "@yoshiki/core"]);
+const path = require("path");
+
+/**
+ * @type {import("next").NextConfig}
+ */
+const nextConfig = {
+	reactStrictMode: true,
+	swcMinify: true,
+	webpack: (config, options) => {
+		if (options.isServer) {
+			config.externals = ["react", ...config.externals];
+		}
+
+		config.resolve.alias["react"] = path.resolve(__dirname, ".", "node_modules", "react");
+		return config;
+	},
+};
+
+module.exports = withTM(nextConfig);

examples/next-example/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "next-example",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@types/node": "18.11.9",
+		"@types/react": "18.0.25",
+		"@types/react-dom": "18.0.8",
+		"@yoshiki/react": "*",
+		"eslint": "8.27.0",
+		"eslint-config-next": "13.0.2",
+		"next": "13.0.2",
+		"next-transpile-modules": "^10.0.0",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"typescript": "4.8.4"
+	}
+}

examples/next-example/src/pages/_app.tsx

@@ -0,0 +1,14 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import type { AppProps } from "next/app";
+import { useLayoutEffect, useState } from "react";
+
+export default function App({ Component, pageProps }: AppProps) {
+	const [show, showApp] = useState(false);
+
+	useLayoutEffect(() => showApp(true));
+	return show ? <Component {...pageProps} /> : null;
+}

examples/next-example/src/pages/index.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import Head from "next/head";
+import Image from "next/image";
+import { useYoshiki } from "@yoshiki/react";
+
+export default function Home(props: {}) {
+	const { css } = useYoshiki();
+
+	return (
+		<div {...css({ paddingLeft: "2rem", paddingRight: "2rem" }, props)}>
+			<Head>
+				<title>Create Next App</title>
+				<meta name="description" content="Generated by create next app" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+
+			<main>
+				<h1>
+					Welcome to <a href="https://nextjs.org">Next.js!</a>
+				</h1>
+
+				<p>
+					Get started by editing <code>pages/index.tsx</code>
+				</p>
+
+				<div
+					{...css({
+						background: { xs: "red", sm: "blue", md: "green" },
+					})}
+				>
+					<a href="https://nextjs.org/docs">
+						<h2>Documentation &rarr;</h2>
+						<p>Find in-depth information about Next.js features and API.</p>
+					</a>
+
+					<a href="https://nextjs.org/learn">
+						<h2>Learn &rarr;</h2>
+						<p>Learn about Next.js in an interactive course with quizzes!</p>
+					</a>
+
+					<a href="https://github.com/vercel/next.js/tree/canary/examples">
+						<h2>Examples &rarr;</h2>
+						<p>Discover and deploy boilerplate example Next.js projects.</p>
+					</a>
+
+					<a
+						href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<h2>Deploy &rarr;</h2>
+						<p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
+					</a>
+				</div>
+			</main>
+
+			<footer>
+				<a
+					href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					Powered by{" "}
+					<span>
+						<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+					</span>
+				</a>
+			</footer>
+		</div>
+	);
+}

examples/next-example/src/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

examples/next-example/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "preserve",
+		"incremental": true
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
+}

package.json

@@ -8,10 +8,20 @@
 	"scripts": {
 		"lint": "eslint . --ext .ts,.tsx "
 	},
-	"workspaces": [
-		"packages/*",
-		"examples/*"
-	],
+	"workspaces": {
+		"packages": [
+			"packages/*",
+			"examples/*"
+		],
+		"nohoist": [
+			"**/react",
+			"**/react/**",
+			"**/react-dom",
+			"**/react-dom/**",
+			"**/react-native",
+			"**/react-native/**"
+		]
+	},
 	"prettier": {
 		"useTabs": true,
 		"printWidth": 100,

packages/core/src/index.ts

@@ -4,3 +4,6 @@
 //
 
 export * from "./type";
+export * from "./theme";
+
+export * from "./utils";

packages/core/src/theme.tsx

@@ -0,0 +1,10 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { Theme } from "./type";
+
+export const useTheme = () => {
+	return {} as Theme;
+};

packages/core/src/utils.ts

@@ -0,0 +1,16 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import { Breakpoints, breakpoints } from "./type";
+
+export const isBreakpoints = <T>(value: unknown): value is Breakpoints<T> => {
+	if (typeof value !== "object" || !value) return false;
+	for (const v of Object.keys(value)) {
+		if (!(v in breakpoints)) {
+			return false;
+		}
+	}
+	return true;
+};

packages/native/src/index.tsx

@@ -4,7 +4,14 @@
 //
 
 import { ViewStyle, TextStyle, ImageStyle, useWindowDimensions } from "react-native";
-import { breakpoints, Breakpoints, Theme, YoshikiStyle } from "@yoshiki/core";
+import {
+	breakpoints,
+	Breakpoints,
+	Theme,
+	YoshikiStyle,
+	useTheme,
+	isBreakpoints,
+} from "@yoshiki/core";
 
 // TODO: shorhands
 type EnhancedStyle<Properties> = {
@@ -23,20 +30,6 @@ const useBreakpoint = (): number => {
 	return idx - 1;
 };
 
-export const useTheme = () => {
-	return {} as Theme;
-};
-
-const isBreakpoints = <T,>(value: unknown): value is Breakpoints<T> => {
-	if (typeof value !== "object" || !value) return false;
-	for (const v of Object.keys(value)) {
-		if (!(v in breakpoints)) {
-			return false;
-		}
-	}
-	return true;
-};
-
 const propertyMapper = <
 	Property extends number | string | boolean | undefined | Property[] | object,
 >(

packages/react/src/index.ts

@@ -4,7 +4,7 @@
 //
 
 import { Properties } from "csstype";
-import { Theme, YoshikiStyle, Breakpoints } from "@yoshiki/core";
+import { Theme, YoshikiStyle, useTheme, breakpoints, isBreakpoints } from "@yoshiki/core";
 import { useInsertionEffect } from "react";
 
 // TODO: shorthands
@@ -12,44 +12,63 @@ export type CssObject = {
 	[key in keyof Properties]: YoshikiStyle<Properties[key]>;
 };
 
-const useTheme = () => {
-	return {} as Theme;
-};
-
-const generateAtomicCss = <Key extends keyof CssObject, Value extends CssObject[Key]>(
-	key: Key,
-	value: Value,
+const generateAtomicCss = <Property extends number | boolean | string | undefined>(
+	key: string,
+	value: YoshikiStyle<Property>,
 	{ theme }: { theme: Theme },
-): string => {
-	const cssKey = "toto";
+): [string, string][] => {
+	const cssKey = key.replace(/[A-Z]/g, "-$&").toLowerCase();
 
-	return `.ys-${key}-${value}: {
-		${cssKey}: ${value};
-	}`;
+	if (typeof value === "function") {
+		value = value(theme);
+	}
+	if (isBreakpoints<Property>(value)) {
+		return Object.entries(value).map(([bp, bpValue]) => {
+			const className = `ys-${bp}_${key}-${bpValue}`;
+			const bpWidth = breakpoints[bp as keyof typeof breakpoints];
+			return [
+				className,
+				`@media (min-width: ${bpWidth}px) { .${className} { ${cssKey}: ${bpValue}; } }`,
+			];
+		});
+	}
+
+	const className = `ys-${key}-${value}`;
+	return [[className, `.${className} { ${cssKey}: ${value}; }`]];
 };
 
-const dedupProperties = (...classes: string[]) => {
-	return classes.join(" ");
+const dedupProperties = (...classes: (string | undefined)[]) => {
+	return classes.filter((x) => x).join(" ");
 };
 
 export const useYoshiki = () => {
 	const theme = useTheme();
-	const classes: string[] = [];
+	let classes: string[] = [];
 	useInsertionEffect(() => {
+		console.log(classes);
 		document.head.insertAdjacentHTML("beforeend", `<style>${classes.join("\n")}</style>`);
 	}, [classes]);
 
 	return {
 		css: (
 			css: CssObject /*  | CssObject[] */,
-			{ className, style, ...leftOver }: { className: string; style: Properties },
+			leftOverProps?: { className?: string; style?: Properties },
 		) => {
-			const localStyle = Object.entries(css).map(([key, value]) =>
-				generateAtomicCss(key as keyof CssObject, value, { theme }),
+			const { className, style, ...leftOver } = leftOverProps ?? {};
+
+			// I'm sad that traverse is not a thing in JS.
+			const [localClassNames, localStyle] = Object.entries(css).reduce<[string[], string[]]>(
+				(acc, [key, value]) => {
+					const n = generateAtomicCss(key, value, { theme });
+					acc[0].push(...n.map((x) => x[0]));
+					acc[1].push(...n.map((x) => x[1]));
+					return acc;
+				},
+				[[], []],
 			);
-			classes.concat(localStyle);
+			classes = classes.concat(localStyle);
 			return {
-				className: dedupProperties(...localStyle, className),
+				className: dedupProperties(...localClassNames, className),
 				style: style,
 				...leftOver,
 			};