message: feat: use styled-components instead of styled-jsx
diff: +/* tslint:disable */
  import * as React from 'react'
  import * as cx from 'classnames'
  +import { $p } from 'graphcool-styles'
  +import styled, { css } from 'styled-components'
  export interface Props {
  checked: boolean
  @@ -9,17 +12,48 @@ export interface Props {
  const ToggleButton = ({ checked, onChange, className }: Props) => {
  return (
  - <div className={cx('toggle-button', className)} onClick={onChange}>
  - <style jsx={true}>{`
  - .toggle-button {
  - @p: .relative, .dib;
  + <Wrapper className={className} onClick={onChange}>
  + <Input type="checkbox" checked={checked} readOnly={true} />
  + <Slider checked={checked} />
  + </Wrapper>
  + )
  +}
  +
  +export default ToggleButton
  +
  +const Wrapper = styled.div.attrs({
  + // Here we're extending the particles and the passed down className
  + // from the own props
  + className: p => cx($p.relative, $p.dib, p.className),
  +})`
  + /* Other custom styles */
  width: 39px;
  height: 21px;
  +`
  +
  +const Input = styled.input`display: none;`
  +
  +interface SliderProps {
  + checked: boolean
  + className?: string
  }
  - .toggle-slider {
  - @p: .absolute, .pointer, .top0, .left0, .right0, .bottom0, .bgBlack40;
  +
  +const Slider = styled.div.attrs({
  + className: (p: SliderProps) =>
  + cx(
  + $p.absolute,
  + $p.pointer,
  + $p.top0,
  + $p.left0,
  + $p.right0,
  + $p.bottom0,
  + // Change color if it's checked
  + p.checked ? $p.bgGreen : $p.bgBlack40,
  + ),
  +})`
  transition: transform 70ms linear;
  border-radius: 23px;
  +
  &:before {
  position: absolute;
  content: "";
  @@ -31,27 +65,12 @@ const ToggleButton = ({ checked, onChange, className }: Props) => {
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform 70ms linear;
  - }
  - }
  - .toggle-input {
  - display: none;
  - &:checked + div {
  - @p: .bgGreen;
  - }
  - &:checked + div:before {
  +
  + ${(p: SliderProps) =>
  + p.checked
  + ? css`
  transform: translateX(19px);
  + `
  + : ''}
  }
  - }
  - `}</style>
  - <input
  - className="toggle-input"
  - type="checkbox"
  - checked={checked}
  - readOnly={true}
  - />
  - <div className="toggle-slider" />
  - </div>
  - )
  -}
  -
  -export default ToggleButton
  +`
  