terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Update emotion example to use css instead of fragment (#2497)

Browse source
This commit is contained in:
Josh Hawkins 2017-07-07 10:25:26 -05:00 committed by Tim Neutkens
parent df1cd7ebf3
commit 5bd3a5f1d1
2 changed files with 12 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/with-emotion/package.json
View file

@ -7,7 +7,7 @@
"start": "next start" "start": "next start"
}, },
"dependencies": { "dependencies": {
"emotion": "^5.0.0", "emotion": "^5.1.4",
"next": "^2.4.6", "next": "^2.4.6",
"react": "^15.6.1", "react": "^15.6.1",
"react-dom": "^15.6.1" "react-dom": "^15.6.1"

26
examples/with-emotion/pages/index.js
View file

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { hydrate, keyframes, fragment, injectGlobal } from 'emotion' import { hydrate, keyframes, css, injectGlobal } from 'emotion'
import styled from 'emotion/react' import styled from 'emotion/react'
// Adds server generated styles to emotion cache. // Adds server generated styles to emotion cache.
@ -20,7 +20,7 @@ export default () => {
} }
` `
const basicStyles = fragment` const basicStyles = css`
background-color: white; background-color: white;
color: cornflowerblue; color: cornflowerblue;
border: 1px solid lightgreen; border: 1px solid lightgreen;
@ -31,11 +31,13 @@ export default () => {
margin: 3rem 0; margin: 3rem 0;
padding: 1rem 0.5rem; padding: 1rem 0.5rem;
` `
const hoverStyles = fragment` const hoverStyles = css`
color: white; &:hover {
background-color: lightgray; color: white;
border-color: aqua; background-color: lightgray;
box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue; border-color: aqua;
box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
}
` `
const bounce = keyframes` const bounce = keyframes`
from { from {
@ -48,19 +50,13 @@ export default () => {
const Basic = styled.div`@apply ${basicStyles};` const Basic = styled.div`@apply ${basicStyles};`
const Combined = styled.div` const Combined = styled.div`
@apply ${basicStyles}; composes: ${basicStyles} ${hoverStyles};
&:hover {
@apply ${hoverStyles};
}
& code { & code {
background-color: linen; background-color: linen;
} }
` `
const Animated = styled.div` const Animated = styled.div`
@apply ${basicStyles}; composes: ${basicStyles} ${hoverStyles};
&:hover {
@apply ${hoverStyles};
}
& code { & code {
background-color: linen; background-color: linen;
} }