React HTML elements with CSS-in-JS

npm i horror styled-components

npm init horror my-horror-project

import React from 'react'
import { Div, H1 } from 'horror'

export default props =>
  <Div css={{
    padding: '32px'
  }}>
    <H1 css={`color: red;`}>
      Horror
    </H1>
  </Div>

import React from 'react'
import { Link } from 'react-router-dom'
import H from 'horror'

const RedLink = props =>
  <H
    {...props}
    is={Link}
    css={{
      color: 'red'
    }}
  />

import React from 'react'
import H from 'horror'

const Button = ({
  primary,
  ...props
}) =>
  <H.button
    {...props}
    css={{
      fontFamily: 'inherit',
      fontSize: '14px',
      fontWeight: 'bold',
      textAlign: 'center',
      textDecoration: 'none',
      display: 'inline-block',
      margin: 0,
      paddingLeft: '16px',
      paddingRight: '16px',
      paddingTop: '8px',
      paddingBottom: '8px',
      verticalAlign: 'middle',
      appearance: 'none',
      border: 0,
      borderRadius: '4px',
      color: 'white',
      backgroundColor: primary ? '#07c' : '#444',
      '&:hover': {
        boxShadow: 'inset 0 0 0 64px rgba(0, 0, 0, .125)'
      }
    }}
  />

Button.displayName = 'Button'

export default Button

npm i emotion react-emotion

import H from 'horror/emotion'