# nano-style

> Functional css-in-js for react

Latest version **1.0.0** (published 2018-01-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install nano-style
pnpm add nano-style
yarn add nano-style
bun add nano-style
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-01-02 |
| First published | 2017-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Brent Jackson |
| Maintainers | jxnblk |

## Links

- npm: https://www.npmjs.com/package/nano-style
- npm.io page: https://npm.io/package/nano-style

## Dependencies (3)

- [objss](https://npm.io/package/objss.md) ^1.0.3
- [stylis](https://npm.io/package/stylis.md) ^3.3.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Recent versions

- 1.0.0 (latest) — 2018-01-02
- 1.0.0-19f (alpha) — 2017-12-03
- 1.0.0-20 — 2017-12-03
- 1.0.0-19e — 2017-12-03
- 1.0.0-19d — 2017-12-03
- 1.0.0-19c — 2017-12-03
- 1.0.0-19b — 2017-12-03
- 1.0.0-19a — 2017-11-25
- 1.0.0-18 — 2017-10-14
- 1.0.0-17 — 2017-10-14
- 1.0.0-16 — 2017-10-14
- 1.0.0-15 — 2017-10-14
- 1.0.0-14 — 2017-10-14
- 1.0.0-13 — 2017-10-13
- 1.0.0-12 — 2017-10-13
- … 12 more at https://npm.io/package/nano-style/versions

## README

# nano-style

React functional CSS-in-JS

[![Build Status][build-badge]][build]
[![Coverage][coverage-badge]][coverage]
<!-- ![gzip bundle size][size-badge] -->

[build-badge]: https://img.shields.io/travis/jxnblk/nano-style/master.svg?style=flat-square
[build]: https://travis-ci.org/jxnblk/nano-style
[coverage-badge]: https://img.shields.io/codecov/c/github/jxnblk/nano-style.svg?style=flat-square
[coverage]: https://codecov.io/github/jxnblk/nano-style
[size-badge]: https://img.shields.io/badge/gzip%20size-1.66%20kB-brightgreen.svg?style=flat-square

```sh
npm 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

```js
import styled from 'nano-style'

const Button = styled('button')(props => ({
  fontFamily: 'inherit',
  fontSize: '14px',
  fontWeight: props.theme.bold,
  lineHeight: 16/14,
  display: 'inline-block',
  margin: 0,
  paddingLeft: props.theme.space[3] + 'px',
  paddingRight: props.theme.space[3] + 'px',
  paddingTop: props.theme.space[2] + 'px',
  paddingBottom: props.theme.space[2] + 'px',
  verticalAlign: 'middle',
  textAlign: 'center',
  textDecoration: 'none',
  borderRadius: props.theme.radius,
  border: 0,
  appearance: 'none',
  color: 'white',
  backgroundColor: props.theme.colors.blue,
  '&:hover': {
    boxShadow: `inset 0 0 0 999px ${darken(1/8)}`
  },
  '&:focus': {
    outline: 0,
    boxShadow: `0 0 0 2px ${props.theme.colors.blue}`
  },
  '&:active': {
    boxShadow: `inset 0 0 8px ${darken(1/4)}`
  },
  '&:disabled': {
    opacity: 1/4
  }
}))
```

### CSS Syntax

```js
import styled from 'nano-style/css'

const Button = styled('button')`
  font-family: inherit;
  font-size: 14px;
  font-weight: ${props => props.theme.bold};
  line-height: ${16/14};
  display: inline-block;
  margin: 0;
  padding-left: ${props => props.theme.space[3] + 'px'};
  padding-right: ${props => props.theme.space[3] + 'px'};
  padding-top: ${props => props.theme.space[2] + 'px'};
  padding-bottom: ${props => props.theme.space[2] + 'px'};
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  border-radius: ${props => props.theme.radius};
  border: 0;
  appearance: none;
  color: white;
  background-color: props.theme.colors.blue;

  &:hover {
    box-shadow: inset 0 0 0 999px ${darken(1/8)};
  }

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 2px ${props => props.theme.colors.blue};
  }

  &:active {
    box-shadow: inset 0 0 8px ${darken(1/4)};
  }

  &:disabled {
    opacity: 1/4
  }
`
```

## 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:

```jsx
return [
  <Style css={css} />,
  <Component {...props} />
]
```

### 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](LICENSE.md)

---
_Source: https://npm.io/package/nano-style · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._