From c2494ee2f08ae9ce1bf4c55e49124cc883f1db66 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Fri, 25 Nov 2022 15:54:19 +0900 Subject: [PATCH] Add automatic vendor prefixing --- examples/expo-example/src/app.tsx | 1 - examples/next-example/src/pages/index.tsx | 6 +-- packages/yoshiki/package.json | 4 +- packages/yoshiki/src/native/generator.web.ts | 7 ++- packages/yoshiki/src/type.ts | 2 +- packages/yoshiki/src/web/generator.ts | 49 +++++++++++++++----- packages/yoshiki/src/web/registry.ts | 3 +- packages/yoshiki/src/web/units.ts | 10 ++-- yarn.lock | 37 ++++++++++++++- 9 files changed, 92 insertions(+), 27 deletions(-) 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 ( { @@ -20,7 +20,7 @@ export default function Home(props: object) { const { css } = useYoshiki(); return ( -
+
Create Next App @@ -33,7 +33,7 @@ export default function Home(props: object) { - +

Get started by editing pages/index.tsx 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) => { + 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 =