# nano-css

> Smallest 5th gen CSS-in-JS library

Latest version **5.6.2** (published 2024-07-20) · Unlicense license · 0 weekly downloads

## Install

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

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 5.6.2 |
| Published | 2024-07-20 |
| First published | 2018-03-14 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 187.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 445 |
| Maintainers | streamich |
| Keywords | css, style, styles, pico, nano, lite, react, js, in-js, css-in-js, styled, decorator, component, styled-components, jsxstyle, rule, stylesheet |

## Links

- npm: https://www.npmjs.com/package/nano-css
- Repository: https://github.com/streamich/nano-css
- Homepage: https://github.com/streamich/nano-css#readme
- Issues: https://github.com/streamich/nano-css/issues
- npm.io page: https://npm.io/package/nano-css

## Dependencies (8)

- [stylis](https://npm.io/package/stylis.md) ^4.3.0
- [csstype](https://npm.io/package/csstype.md) ^3.1.2
- [css-tree](https://npm.io/package/css-tree.md) ^1.1.2
- [rtl-css-js](https://npm.io/package/rtl-css-js.md) ^1.16.1
- [stacktrace-js](https://npm.io/package/stacktrace-js.md) ^2.0.2
- [inline-style-prefixer](https://npm.io/package/inline-style-prefixer.md) ^7.0.1
- [fastest-stable-stringify](https://npm.io/package/fastest-stable-stringify.md) ^2.0.2
- [@jridgewell/sourcemap-codec](https://npm.io/package/@jridgewell/sourcemap-codec.md) ^1.4.15

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 5.6.2 (latest) — 2024-07-20
- 5.6.1 — 2023-11-25
- 5.6.0 — 2023-11-20
- 5.5.0 — 2023-11-20
- 5.4.0 — 2023-11-20
- 5.3.5 — 2022-05-20
- 5.3.4 — 2021-07-28
- 5.3.3 — 2021-07-28
- 5.3.2 — 2021-07-28
- 5.3.1 — 2021-01-13
- 5.3.0 — 2020-02-17
- 5.2.1 — 2019-11-03
- 5.2.0 — 2019-06-03
- 5.1.0 — 2019-03-26
- 5.0.0 — 2019-03-22
- … 43 more at https://npm.io/package/nano-css/versions

## README

# nano-css

[![][npm-badge]][npm-url] [![][travis-badge]][travis-url]

__Tiny [5<sup>th</sup> generation](https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation) CSS-in-JS library__ that you can actually use in production.
__Motto of `nano-css` is simple__: *create the smallest possible CSS-in-JS library and provide all features of any other library through addons.*

- __Only [0.5 Kb](https://bundlephobia.com/result?p=nano-css@1.15.3)__ in base configuration, *e.g. [`styled-components`](https://github.com/styled-components/styled-components) is [15.1Kb](https://bundlephobia.com/result?p=styled-components@3.2.5)*
- __Library-agnostic__ &mdash; use it standalone, with React, Preact, Vue.js, or any other library
- __Isomorphic__ &mdash; render on server and browser, generates stable class names, and re-hydrates
- __Performant__ &mdash; [*simply the fastest library*](https://github.com/streamich/CSS-IN-JS-Benchmarks/blob/master/RESULT.md); does not create wrapper components, does not use inline styles or inline `<style>` elements, but caches all styles for re-use and injects CSS using `.insertRule()` for performance
- __`@media` queries__ and __animation `@keyframes`__ are supported
- __Auto-prefixes__ your styles
- __Extract CSS__ into external style sheet
- __Public domain__ &mdash; [Unlicense license](./LICENSE)

> For pre-configured simple-to-use package see [`nano-theme`](https://github.com/streamich/nano-theme), which builds on top of `nano-css`.


## Reference

- [Installation](./docs/Installation.md)
- [Addons](./docs/Addons.md)
  - [`put()`](./docs/put.md) &mdash; [*demo!*](https://codesandbox.io/s/nkovxrzyv4)
  - [`rule()`](./docs/rule.md) &mdash; [*demo!*](https://codesandbox.io/s/oxlj92m1m9)
  - [`drule()`](./docs/drule.md) &mdash; [*demo!*](https://codesandbox.io/s/9jq5zmm91p)
  - [`sheet()`](./docs/sheet.md) &mdash; [*demo!*](https://codesandbox.io/s/wyw093m7kw)
  - [`dsheet()`](./docs/dsheet.md) &mdash; [*demo!*](https://codesandbox.io/s/q7rx4981vq)
  - [`jsx()`](./docs/jsx.md) &mdash; [*demo!*](https://codesandbox.io/s/5y63x88504)
  - [`useStyles()`](./docs/useStyles.md) &mdash; [*demo!*](https://codesandbox.io/s/o5k9jjo306)
  - [`withStyles()`](./docs/withStyles.md) &mdash; [*demo!*](https://codesandbox.io/s/5k3jvkk31l)
  - [`decorator`](./docs/decorator.md) &mdash; [*demo № 1*](https://codesandbox.io/s/j442958125) and [*demo № 2*](https://codesandbox.io/s/3qjzv35941)
  - [`component`](./docs/component.md) &mdash; [*demo!*](https://codesandbox.io/s/yk8pk4v95j)
  - [`style()`](./docs/style.md) &mdash; [*demo!*](https://codesandbox.io/s/53qk3qkopn)
  - [`styled()()`](./docs/styled.md) &mdash; [*demo!*](https://codesandbox.io/s/w667y036p5)
  - [`hyperstyle()`](./docs/hyperstyle.md) &mdash; [*demo!*](https://codesandbox.io/s/wqny7z17x8)
  - [`stable`](./docs/stable.md)
  - [`atoms`](./docs/atoms.md) &mdash; [*demo!*](https://codesandbox.io/s/rlkxl6o9v4)
  - [`emmet`](./docs/emmet.md)
  - [`nesting`](./docs/nesting.md)
  - [`keyframes()`](./docs/keyframes.md)
  - [`hydrate()`](./docs/hydrate.md)
  - [`prefixer`](./docs/prefixer.md)
  - [`stylis`](./docs/stylis.md)
  - [`unitless`](./docs/unitless.md)
  - [`!important`](./docs/important.md)
  - [`:global`](./docs/global.md)
  - [`animate/*`](./docs/animations.md)
  - [`reset/*`](./docs/resets.md)
  - [`reset-font`](./docs/reset-font.md)
  - [`googleFont()`](./docs/googleFont.md)
  - [`limit`](./docs/limit.md)
  - [`amp`](./docs/amp.md)
  - [`virtual`](./docs/virtual.md)
  - [`spread`](./docs/spread.md)
  - [`array`](./docs/array.md)
  - [`snake`](./docs/snake.md) &mdash; [*demo!*](https://codesandbox.io/s/mo7n1857zj)
  - [`tachyons`](./docs/tachyons.md)
  - [`rtl`](./docs/rtl.md)
  - [`extract`](./docs/extract.md)
  - [`sourcemaps`](./docs/sourcemaps.md)
  - [`.units`](./docs/units.md)
  - [`cssom`](./docs/cssom.md)
  - [`vcssom`](./docs/vcssom.md)
- [Presets](./docs/Presets.md)
- [Server-side rendering](./docs/SSR.md)


[npm-url]: https://www.npmjs.com/package/nano-css
[npm-badge]: https://img.shields.io/npm/v/nano-css.svg
[travis-url]: https://travis-ci.org/streamich/nano-css
[travis-badge]: https://travis-ci.org/streamich/nano-css.svg?branch=master

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