2019-03-17 00:25:20 +01:00
|
|
|
import Head from 'next/head'
|
|
|
|
|
import { styled } from 'linaria/react'
|
2021-03-26 19:02:55 +01:00
|
|
|
import { css } from 'linaria'
|
2019-03-17 00:25:20 +01:00
|
|
|
|
|
|
|
|
const Box = styled.div`
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
margin-left: 40px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
width: 200px;
|
|
|
|
|
background-color: tomato;
|
|
|
|
|
animation: spin 2s linear infinite;
|
|
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
from {
|
|
|
|
|
transform: rotate(0deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`
|
|
|
|
|
|
2021-03-26 19:02:55 +01:00
|
|
|
const anotherClass = css`
|
|
|
|
|
color: blue;
|
|
|
|
|
`
|
|
|
|
|
|
2020-05-18 23:44:18 +02:00
|
|
|
export default function Home() {
|
2019-03-17 00:25:20 +01:00
|
|
|
return (
|
2020-07-14 06:59:24 +02:00
|
|
|
<>
|
2019-03-17 00:25:20 +01:00
|
|
|
<Head>
|
|
|
|
|
<title>With Linaria</title>
|
|
|
|
|
</Head>
|
2021-03-26 19:02:55 +01:00
|
|
|
<Box className={anotherClass}>Zero runtime CSS in JS</Box>
|
2020-07-14 06:59:24 +02:00
|
|
|
</>
|
2019-03-17 00:25:20 +01:00
|
|
|
)
|
|
|
|
|
}
|
