How to use the @emotion/css function in @emotion/css
To help you get started, we’ve selected a few @emotion/css examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
emotion-js / emotion / next-packages / core / src / keyframes.js View on Github 
export const keyframes = (...args: *): Keyframes => {
let insertable = css(...args)
const name = `animation-${insertable.name}`
// $FlowFixMe
return {
name,
styles: `@keyframes ${name}{${insertable.styles}}`,
anim: 1,
toString() {
return `_EMO_${this.name}_${this.styles}_EMO_`
}
}
}it('does not warn when valid values are passed for the content property', () => {
const style = css(validValues.map(value => ({ content: value })))
expect(console.error).not.toBeCalled()
expect(renderer.create(<div>).toJSON()).toMatchSnapshot()
})
</div>it('does not warn when valid values are passed for the content property', () => {
const style = css(validValues.map(value => ({ content: value })))
expect(console.error).not.toBeCalled()
expect(renderer.create(<div>).toJSON()).toMatchSnapshot()
})
</div>test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }
])
const Avatar = styled('img')`
${prettyStyles};test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }
])
const Avatar = styled('img')`
${prettyStyles};
${imageStyles};
${blue};
`test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }
])
const Avatar = styled('img')`
${prettyStyles};
${imageStyles};
${blue};test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }
])
const Avatar = styled('img')`
${prettyStyles};
${imageStyles};
${blue};test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }if (state.emotionSourceMap) {
if (!sourceMap && path.node.loc !== undefined) {
sourceMap = getSourceMap(path.node.loc.start, state)
}
appendStringToExpressions(path.node.arguments, sourceMap, t)
}
path.node.arguments = joinStringLiterals(path.node.arguments, t)
if (
path.node.arguments.length === 1 &&
t.isStringLiteral(path.node.arguments[0])
) {
let cssString = path.node.arguments[0].value
let res = css(cssString)
path.replaceWith(
t.objectExpression([
t.objectProperty(t.identifier('name'), t.stringLiteral(res.name)),
t.objectProperty(t.identifier('styles'), t.stringLiteral(res.styles))
])
)
}
if (isPure) {
path.hoist()
}
}
}
