4e5a359ae5
## Documentation / Examples * removes deprecated `@zeit/next-css`. * adds https://github.com/Mistereo/next-linaria to work with the new built-in CSS functionality. * updates Linaria to latest release (v3 will require https://github.com/Mistereo/next-linaria/pull/3 ) * adds an example of using Linaria without React * gitignores `.linaria-cache`
37 lines
625 B
JavaScript
37 lines
625 B
JavaScript
import Head from 'next/head'
|
|
import { styled } from 'linaria/react'
|
|
import { css } from 'linaria'
|
|
|
|
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);
|
|
}
|
|
}
|
|
`
|
|
|
|
const anotherClass = css`
|
|
color: blue;
|
|
`
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>With Linaria</title>
|
|
</Head>
|
|
<Box className={anotherClass}>Zero runtime CSS in JS</Box>
|
|
</>
|
|
)
|
|
}
|