Package Exports

emotion
emotion/babel
emotion/lib/index
emotion/lib/sheet

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (emotion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

emotion

high performance js for your css

Install

npm install -S emotion

.babelrc

{
  "plugins": [
    "emotion/babel"
  ]
}

API

emotion

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|%