Add automatic vendor prefixing

This commit is contained in:
Zoe Roux
2022-11-25 15:54:19 +09:00
parent 284debaa70
commit c2494ee2f0
9 changed files with 92 additions and 27 deletions
-1
View File
@@ -51,7 +51,6 @@ function App() {
return (
<View
{...css({
// @ts-ignore
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
+3 -3
View File
@@ -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>