nano-style

React functional CSS-in-JS

1npm i nano-style

• Use object literals or CSS syntax
• Pure React - no side effects
• Functional styles
• Theming support
• Universal rendering with no additional setup
• Removes props defined as propTypes from rendered HTML

Usage

Object Literal Syntax

1import styled from 'nano-style'
2
3const Button = styled('button')(props => ({
4  fontFamily: 'inherit',
5  fontSize: '14px',
6  fontWeight: props.theme.bold,
7  lineHeight: 16/14,
8  display: 'inline-block',
9  margin: 0,
10  paddingLeft: props.theme.space[3] + 'px',
11  paddingRight: props.theme.space[3] + 'px',
12  paddingTop: props.theme.space[2] + 'px',
13  paddingBottom: props.theme.space[2] + 'px',
14  verticalAlign: 'middle',
15  textAlign: 'center',
16  textDecoration: 'none',
17  borderRadius: props.theme.radius,
18  border: 0,
19  appearance: 'none',
20  color: 'white',
21  backgroundColor: props.theme.colors.blue,
22  '&:hover': {
23    boxShadow: `inset 0 0 0 999px ${darken(1/8)}`
24  },
25  '&:focus': {
26    outline: 0,
27    boxShadow: `0 0 0 2px ${props.theme.colors.blue}`
28  },
29  '&:active': {
30    boxShadow: `inset 0 0 8px ${darken(1/4)}`
31  },
32  '&:disabled': {
33    opacity: 1/4
34  }
35}))

CSS Syntax

1import styled from 'nano-style/css'
2
3const Button = styled('button')`
4  font-family: inherit;
5  font-size: 14px;
6  font-weight: ${props => props.theme.bold};
7  line-height: ${16/14};
8  display: inline-block;
9  margin: 0;
10  padding-left: ${props => props.theme.space[3] + 'px'};
11  padding-right: ${props => props.theme.space[3] + 'px'};
12  padding-top: ${props => props.theme.space[2] + 'px'};
13  padding-bottom: ${props => props.theme.space[2] + 'px'};
14  vertical-align: middle;
15  text-align: center;
16  text-decoration: none;
17  border-radius: ${props => props.theme.radius};
18  border: 0;
19  appearance: none;
20  color: white;
21  background-color: props.theme.colors.blue;
22
23  &:hover {
24    box-shadow: inset 0 0 0 999px ${darken(1/8)};
25  }
26
27  &:focus {
28    outline: 0;
29    box-shadow: 0 0 0 2px ${props => props.theme.colors.blue};
30  }
31
32  &:active {
33    box-shadow: inset 0 0 8px ${darken(1/4)};
34  }
35
36  &:disabled {
37    opacity: 1/4
38  }
39`

How it works

Using React 16's ability to return arrays of elements, nano-style generates CSS during component rendering and inserts CSS into a <style> element inlined with the component. The returned array looks something like this:

1return [
2  <Style css={css} />,
3  <Component {...props} />
4]

Caveats

Currently, this approach does not attempt to deduplicate repeated CSS when a single component is rendered in multiple instances. While this does work, it may present some slight performance issues when a component is used multiple times in a page.

Potential areas for improvement

• Caching mechanism
• Babel plugin

MIT License