diff --git a/examples/expo-example/src/app.tsx b/examples/expo-example/src/app.tsx
index 2429e9e..39e9ca6 100644
--- a/examples/expo-example/src/app.tsx
+++ b/examples/expo-example/src/app.tsx
@@ -51,7 +51,6 @@ function App() {
 	return (
 		<View
 			{...css({
-				// @ts-ignore
 				flex: 1,
 				backgroundColor: "#fff",
 				alignItems: "center",
diff --git a/examples/next-example/src/pages/index.tsx b/examples/next-example/src/pages/index.tsx
index efc4408..f5c7894 100644
--- a/examples/next-example/src/pages/index.tsx
+++ b/examples/next-example/src/pages/index.tsx
@@ -5,7 +5,7 @@
 
 import Head from "next/head";
 import Image from "next/image";
-import { useYoshiki, Stylable } from "yoshiki/web";
+import { useYoshiki, Stylable, px } from "yoshiki/web";
 import { ReactNode } from "react";
 
 const Box = ({ children, ...props }: { children?: ReactNode } & Stylable) => {
@@ -20,7 +20,7 @@ export default function Home(props: object) {
 	const { css } = useYoshiki();
 
 	return (
-		<div {...css({ paddingLeft: "2rem", paddingRight: "2rem" }, props)}>
+		<div {...css({ display: "flex", paddingLeft: "2rem", paddingRight: "2rem" }, props)}>
 			<Head>
 				<title>Create Next App</title>
 				<meta name="description" content="Generated by create next app" />
@@ -33,7 +33,7 @@ export default function Home(props: object) {
 				</h1>
 
 				<Box />
-				<Box {...css({ bg: "blue", p: "12px" })} />
+				<Box {...css({ bg: "blue", p: px(12) })} />
 
 				<p>
 					Get started by editing <code>pages/index.tsx</code>
diff --git a/packages/yoshiki/package.json b/packages/yoshiki/package.json
index ce367ee..b3ad0b6 100644
--- a/packages/yoshiki/package.json
+++ b/packages/yoshiki/package.json
@@ -26,7 +26,8 @@
 	"dependencies": {
 		"@types/node": "18.x.x",
 		"@types/react": "18.x.x",
-		"@types/react-native": ">= 0.70.0"
+		"@types/react-native": ">= 0.70.0",
+		"inline-style-prefixer": "^7.0.0"
 	},
 	"peerDependencies": {
 		"react": "*",
@@ -42,6 +43,7 @@
 		}
 	},
 	"devDependencies": {
+		"@types/inline-style-prefixer": "^5.0.0",
 		"react": "18.x.x",
 		"react-dom": "^18.2.0",
 		"react-native-web": "^0.18.10",
diff --git a/packages/yoshiki/src/native/generator.web.ts b/packages/yoshiki/src/native/generator.web.ts
index e848091..3d136f4 100644
--- a/packages/yoshiki/src/native/generator.web.ts
+++ b/packages/yoshiki/src/native/generator.web.ts
@@ -11,9 +11,8 @@ import createReactDOMStyle from "react-native-web/dist/exports/StyleSheet/compil
 import { yoshikiCssToClassNames } from "../web/generator";
 import { useStyleRegistry } from "../web";
 
-const rnwPreprocess = (prop: string, value: unknown) => {
-	const styles = createReactDOMStyle({ [prop]: value });
-	return Object.entries(styles);
+const rnwPreprocess = (block: Record<string, unknown>) => {
+	return createReactDOMStyle(block);
 };
 
 export const useYoshiki = () => {
@@ -36,7 +35,7 @@ export const useYoshiki = () => {
 			const classNames = yoshikiCssToClassNames(css, overrides?.split(" "), {
 				registry,
 				theme,
-				preprocess: rnwPreprocess,
+				preprocessBlock: rnwPreprocess,
 			});
 			return { style: { $$css: true, yoshiki: classNames } as Style };
 		},
diff --git a/packages/yoshiki/src/type.ts b/packages/yoshiki/src/type.ts
index 3515901..bd5783b 100644
--- a/packages/yoshiki/src/type.ts
+++ b/packages/yoshiki/src/type.ts
@@ -30,7 +30,7 @@ export const hasState = <Style>(obj: unknown): obj is WithState<Style> => {
 
 // dummy type only used for the API.
 export type Length = { a: 1 };
-export type CssProperties = _CssProperties<0 | Length>;
+export type CssProperties = _CssProperties<0 | Length | string>;
 
 type FilterOrNever<T, Filter> = T extends Filter ? Filter : never;
 export type FilterOr<T, Filter, Replacement = Filter> = [FilterOrNever<T, Filter>] extends [never]
diff --git a/packages/yoshiki/src/web/generator.ts b/packages/yoshiki/src/web/generator.ts
index 75731da..86a0468 100644
--- a/packages/yoshiki/src/web/generator.ts
+++ b/packages/yoshiki/src/web/generator.ts
@@ -3,10 +3,11 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 //
 
+import { useInsertionEffect } from "react";
+import { prefix } from "inline-style-prefixer";
 import { Theme, breakpoints, useTheme } from "../theme";
 import { WithState, YoshikiStyle, CssProperties } from "../type";
 import { isBreakpoints } from "../utils";
-import { useInsertionEffect } from "react";
 import { StyleRegistry, useStyleRegistry } from "./registry";
 import { shorthandsFn } from "../shorthands";
 
@@ -26,8 +27,8 @@ const stateMapper: {
 	// :focus-visible is a pseudo-selector that only enables the focus ring when using the keyboard.
 	focus: (cn) => `.${cn}:focus-visible`,
 	// The body.noHover will be set when the users uses a touch screen instead of a mouse. This is used to only enable hover with the mouse.
+	// The where is used to decrease the rule specificity (make it the same as juste .cn:hover)
 	hover: (cn) => `:where(body:not(.noHover)) .${cn}:hover`,
-	/* ["hover", ":hover"], */
 };
 
 const sanitize = (className: unknown) => {
@@ -36,23 +37,35 @@ const sanitize = (className: unknown) => {
 };
 
 type PreprocessFunction = (key: string, value: unknown) => [key: string, value: unknown][];
+type PreprocessBlockFunction = (block: { [key: string]: unknown }) => { [key: string]: unknown };
 
 const generateClass = (
 	key: string,
 	value: unknown,
 	context: string,
 	addCssContext: (className: string, block: string) => string,
-	preprocess?: PreprocessFunction,
+	{
+		preprocess,
+		preprocessBlock,
+	}: { preprocess?: PreprocessFunction; preprocessBlock?: PreprocessBlockFunction },
 ): [string, string][] => {
 	if (preprocess) {
 		return preprocess(key, value).flatMap(([nKey, nValue]) =>
-			generateClass(nKey, nValue, context, addCssContext),
+			generateClass(nKey, nValue, context, addCssContext, { preprocessBlock }),
 		);
 	}
 
+	preprocessBlock ??= (id) => id;
 	const className = `ys-${context}${key}-${sanitize(value)}`;
-	const cssKey = key.replace(/[A-Z]/g, "-$&").toLowerCase();
-	return [[className, addCssContext(className, `{ ${cssKey}: ${value}; }`)]];
+	const block = Object.entries(prefix(preprocessBlock({ [key]: value })))
+		.flatMap(([nKey, nValue]) => {
+			const cssKey = nKey.replace(/[A-Z]/g, "-$&").toLowerCase();
+			return Array.isArray(nValue)
+				? nValue.map((x) => `${cssKey}: ${x};`)
+				: [`${cssKey}: ${nValue};`];
+		})
+		.join(" ");
+	return [[className, addCssContext(className, `{ ${block} }`)]];
 };
 
 const generateAtomicCss = (
@@ -62,15 +75,19 @@ const generateAtomicCss = (
 	{
 		theme,
 		preprocess,
+		preprocessBlock,
 	}: {
 		theme: Theme;
 		preprocess?: PreprocessFunction;
+		preprocessBlock?: PreprocessBlockFunction;
 	},
 ): [string, string][] => {
 	if (key in shorthandsFn) {
 		const expanded = shorthandsFn[key as keyof typeof shorthandsFn](value as any);
 		return Object.entries(expanded)
-			.map(([eKey, eValue]) => generateAtomicCss(eKey, eValue, state, { theme, preprocess }))
+			.map(([eKey, eValue]) =>
+				generateAtomicCss(eKey, eValue, state, { theme, preprocess, preprocessBlock }),
+			)
 			.flat();
 	}
 	if (typeof value === "function") {
@@ -88,7 +105,7 @@ const generateAtomicCss = (
 					const bpWidth = breakpoints[bp as keyof typeof breakpoints];
 					return `@media (min-width: ${bpWidth}px) { ${stateMapper[state](className)} ${block} }`;
 				},
-				preprocess,
+				{ preprocess, preprocessBlock },
 			);
 		});
 	}
@@ -98,7 +115,7 @@ const generateAtomicCss = (
 		value,
 		statePrefix,
 		(className, block) => `${stateMapper[state](className)} ${block}`,
-		preprocess,
+		{ preprocess, preprocessBlock },
 	);
 };
 
@@ -124,7 +141,13 @@ export const yoshikiCssToClassNames = (
 		registry,
 		theme,
 		preprocess,
-	}: { registry: StyleRegistry; theme: Theme; preprocess?: PreprocessFunction },
+		preprocessBlock,
+	}: {
+		registry: StyleRegistry;
+		theme: Theme;
+		preprocess?: PreprocessFunction;
+		preprocessBlock?: PreprocessBlockFunction;
+	},
 ) => {
 	const { hover, focus, press, ...inline } = css;
 
@@ -134,7 +157,11 @@ export const yoshikiCssToClassNames = (
 		// I'm sad that traverse is not a thing in JS.
 		const [localClassNames, localStyle] = Object.entries(inlineStyle).reduce<[string[], string[]]>(
 			(acc, [key, value]) => {
-				const n = generateAtomicCss(key, value, state ?? "normal", { theme, preprocess });
+				const n = generateAtomicCss(key, value, state ?? "normal", {
+					theme,
+					preprocess,
+					preprocessBlock
+				});
 				acc[0].push(...n.map((x) => x[0]));
 				acc[1].push(...n.map((x) => x[1]));
 				return acc;
diff --git a/packages/yoshiki/src/web/registry.ts b/packages/yoshiki/src/web/registry.ts
index 8938df0..2d53956 100644
--- a/packages/yoshiki/src/web/registry.ts
+++ b/packages/yoshiki/src/web/registry.ts
@@ -33,13 +33,14 @@ export class StyleRegistry {
 	}
 
 	addRule(key: string, rule: string) {
+		if (this.rules.find(([eKey]) => key === eKey)) return;
 		this.rules.push([key, rule]);
 	}
 
 	addRules(keys: string[], rules: string[]) {
 		// I'm sad that sequence is not a thing...
 		for (let i = 0; i < keys.length; i++) {
-			this.rules.push([keys[i], rules[i]]);
+			this.addRule(keys[i], rules[i]);
 		}
 	}
 
diff --git a/packages/yoshiki/src/web/units.ts b/packages/yoshiki/src/web/units.ts
index a6ab95e..8b67cfd 100644
--- a/packages/yoshiki/src/web/units.ts
+++ b/packages/yoshiki/src/web/units.ts
@@ -3,7 +3,9 @@
 // Licensed under the MIT license. See LICENSE file in the project root for details.
 //
 
-export const px = (value: number) => `${value}px`;
-export const percent = (value: number) => `${value}%`;
-export const em = (value: number) => `${value}em`;
-export const rem = (value: number) => `${value}rem`;
+import { Length } from "../type";
+
+export const px = (value: number) => `${value}px` as unknown as Length;
+export const percent = (value: number) => `${value}%` as unknown as Length;
+export const em = (value: number) => `${value}em` as unknown as Length;
+export const rem = (value: number) => `${value}rem` as unknown as Length;
diff --git a/yarn.lock b/yarn.lock
index e137ad9..21048ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2728,6 +2728,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/inline-style-prefixer@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@types/inline-style-prefixer@npm:5.0.0"
+  checksum: f138ba446d01a32e4612cc626a8fc44be15713560035c73d721c20c744083c488d072d7a11fc9b14c9212582271f04001e9d8d432267ff806dc3e6186959860a
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
@@ -5512,6 +5519,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-in-js-utils@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "css-in-js-utils@npm:3.1.0"
+  dependencies:
+    hyphenate-style-name: ^1.0.3
+  checksum: 066318e918c04a5e5bce46b38fe81052ea6ac051bcc6d3c369a1d59ceb1546cb2b6086901ab5d22be084122ee3732169996a3dfb04d3406eaee205af77aec61b
+  languageName: node
+  linkType: hard
+
 "css-loader@npm:~3.6.0":
   version: 3.6.0
   resolution: "css-loader@npm:3.6.0"
@@ -7222,6 +7238,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-loops@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "fast-loops@npm:1.1.3"
+  checksum: b674378ba2ed8364ca1a00768636e88b22201c8d010fa62a8588a4cace04f90bac46714c13cf638be82b03438d2fe813600da32291fb47297a1bd7fa6cef0cee
+  languageName: node
+  linkType: hard
+
 "fastq@npm:^1.6.0":
   version: 1.13.0
   resolution: "fastq@npm:1.13.0"
@@ -8454,7 +8477,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hyphenate-style-name@npm:^1.0.2":
+"hyphenate-style-name@npm:^1.0.2, hyphenate-style-name@npm:^1.0.3":
   version: 1.0.4
   resolution: "hyphenate-style-name@npm:1.0.4"
   checksum: 4f5bf4b055089754924babebaa23c17845937bcca6aee95d5d015f8fa1e6814279002bd6a9e541e3fac2cd02519fc76305396727066c57c8e21a7e73e7a12137
@@ -8643,6 +8666,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inline-style-prefixer@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "inline-style-prefixer@npm:7.0.0"
+  dependencies:
+    css-in-js-utils: ^3.1.0
+    fast-loops: ^1.1.3
+  checksum: 89fd73eb06e7392e24032ea33b8b33ae7f9a24298f2d9ebbf7b31a3a3934247270047f4f49a454a363aace14e25c3a20fd97465405b0399cc888e5a2bc04ec05
+  languageName: node
+  linkType: hard
+
 "internal-ip@npm:4.3.0, internal-ip@npm:^4.3.0":
   version: 4.3.0
   resolution: "internal-ip@npm:4.3.0"
@@ -16248,9 +16281,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "yoshiki@workspace:packages/yoshiki"
   dependencies:
+    "@types/inline-style-prefixer": ^5.0.0
     "@types/node": 18.x.x
     "@types/react": 18.x.x
     "@types/react-native": ">= 0.70.0"
+    inline-style-prefixer: ^7.0.0
     react: 18.x.x
     react-dom: ^18.2.0
     react-native-web: ^0.18.10
