emotion
high performance js for your css
Install
npm install -S emotion
.babelrc
{
"plugins": [
"emotion/babel"
]
}
Extract Mode
The default settings enable css extraction.
This js file, h1.js
import styled from 'emotion/styled'
const H1 = styled('h1')`
color: #ffd43b;
`
During babel compilation emotion will create h1.emotion.css
and add import './h1.emotion.css'
to the top of h1.js
.css-H1-duiy4a {
color: blue
}
h1.js
after babel compilation
import './h1.emotion.css'
import styled from 'emotion/styled'
const H1 = styled('h1', 'css-H1-duiy4a')
Browser Support no ie11 support (css vars)
Inline Mode
Inline mode does not extract css into external files.
.babelrc
{
"plugins": [
["emotion/babel", { inline: true }]
]
}
This js file, h1.js
import styled from 'emotion/styled'
const H1 = styled('h1')`
color: #ffd43b;
`
h1.js
after babel compilation
import './h1.emotion.css'
import styled from 'emotion/styled'
const H1 = styled('h1', 'css-H1-duiy4a', [], function createEmotionStyles() {
return ['.css-H1-duiy4a {color:blue}']
})
Browser Support anything React supports
API
styled
import { styled } from 'emotion'
const H1 = styled('h1')`
color: 'blue';
font-size: 48px;
transform: scale(${props => props.scale});
`
function Greeting ({ name }) {
return <H1 scale={2}>Hello {name}</H1> // blue, 48px, and scaled 2x text
}
// You can also pass components in
const H2 = styled(H1)`
font-size: ${fontSize * 2/3}px;
color: 'red';
`
function Greeting ({ name }) {
return <H2>Hello {name}</H2> // red, 32px, and scaled 2x text
}
// this works too
const H3 = styled.h3`
font-size: ${fontSize * 1/3}px;
color: 'red';
`
function Greeting ({ name }) {
return <H3>Hello {name}</H3> // red, 16px text
}
attr
The attr CSS function is supported in a basic capacity.
/* get value from `width` prop */
width: attr(width vw);
/* specify type or unit to apply to value */
width: attr(width vw);
/* fallback value if props.width is falsey */
width: attr(width vw, 50);
const H1 = styled.h1`
font-size: attr(fontSize px);
margin: attr(margin rem, 4);
font-family: sans-serif;
color: ${colors.pink[5]};
@media (min-width: 680px) {
color: attr(desktopColor);
}
`
const Title = ({ title, scale }) => {
return (
<H1 fontSize={16 * scale} desktopColor={colors.gray[5]}>
{title}
</H1>
)
}
Supported value types
em|ex|px|rem|vw|vh|vmin|vmax|mm|cm|in|pt|pc|%