fix: 修复关闭SSH终端标签页时会话状态未更新的问题

2026-04-18 02:35:38 +08:00
commit 6e2e2f9387
43467 changed files with 5489040 additions and 0 deletions
@@ -0,0 +1,27 @@
+extends: eslint:recommended
+env:
+  node: true
+  browser: true
+rules:
+  block-scoped-var: 2
+  callback-return: 2
+  dot-notation: 2
+  indent: 2
+  linebreak-style: [2, unix]
+  new-cap: 2
+  no-console: [2, allow: [warn, error]]
+  no-else-return: 2
+  no-eq-null: 2
+  no-fallthrough: 2
+  no-invalid-this: 2
+  no-return-assign: 2
+  no-shadow: 1
+  no-trailing-spaces: 2
+  no-use-before-define: [2, nofunc]
+  quotes: [2, single, avoid-escape]
+  semi: [2, always]
+  strict: [2, global]
+  valid-jsdoc: [2, requireReturn: false]
+  no-control-regex: 0
+  no-useless-escape: 2
+
@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: streamich
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["config:base"],
+  "lockFileMaintenance": {
+    "enabled": true,
+    "automerge": true
+  },
+  "rangeStrategy": "replace",
+  "postUpdateOptions": ["yarnDedupeHighest"],
+  "packageRules": [
+    {
+      "matchUpdateTypes": ["minor", "patch"],
+      "matchCurrentVersion": "!/^0/",
+      "automerge": true
+    }
+  ]
+}
@@ -0,0 +1,23 @@
+name: Node CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+      - run: yarn
+      - run: yarn test
@@ -0,0 +1,26 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master ]
+
+jobs:
+  gh-pages:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+      - run: yarn test --coverage
+      - name: Publish to gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./coverage/lcov-report
@@ -0,0 +1,26 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master ]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+      - run: yarn
+      - run: yarn test
+      - name: Semantic Release
+        uses: cycjimmy/semantic-release-action@v4
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -0,0 +1,393 @@
+# [5.5.0](https://github.com/streamich/nano-css/compare/v5.4.0...v5.5.0) (2023-11-20)
+
+
+### Bug Fixes
+
+* 🐛 add comman operators ([0ca247d](https://github.com/streamich/nano-css/commit/0ca247da04241af4a228f118919856a0f839d971))
+* 🐛 correct syntax errors ([d7c98b1](https://github.com/streamich/nano-css/commit/d7c98b10b86c50837afd8b742a25c4ee70b6a9ae))
+
+
+### Features
+
+* 🎸 add more animation-* atoms ([90a4405](https://github.com/streamich/nano-css/commit/90a44053c411a2803cb4fdfcf0c65e07103b42f7))
+* 🎸 add more atoms ([fb0a3c8](https://github.com/streamich/nano-css/commit/fb0a3c82f295fdd7a8cdb4bd0fea260a47905138))
+* 🎸 add TypeScript atom types ([8debe40](https://github.com/streamich/nano-css/commit/8debe40d1e56d80363cdb457f382a89c258f0cf4))
+* 🎸 finalize atom TypeScript types ([4b37ed5](https://github.com/streamich/nano-css/commit/4b37ed5915f560fa2232a3fa99d612a12c6ff346))
+* 🎸 finalize new atom list ([248e68e](https://github.com/streamich/nano-css/commit/248e68ed4568875d91725db864649febb2f189ca))
+
+# [5.4.0](https://github.com/streamich/nano-css/compare/v5.3.5...v5.4.0) (2023-11-20)
+
+
+### Features
+
+* update sourcemap library ([86aa0eb](https://github.com/streamich/nano-css/commit/86aa0eb0d26116d640b8aed192cc5f69f025b27d))
+
+## [5.3.5](https://github.com/streamich/nano-css/compare/v5.3.4...v5.3.5) (2022-05-20)
+
+
+### Bug Fixes
+
+* remove non-existing file reference ([7cd4806](https://github.com/streamich/nano-css/commit/7cd48060d16eb6f89bf7d29e10f2a8f6ae9f3e7d))
+
+## [5.3.4](https://github.com/streamich/nano-css/compare/v5.3.3...v5.3.4) (2021-07-28)
+
+
+### Bug Fixes
+
+* 🐛 remove trailing commas ([103c3e7](https://github.com/streamich/nano-css/commit/103c3e78664c6b1c19e3e14aa4e24e9dc38c9c96))
+
+## [5.3.3](https://github.com/streamich/nano-css/compare/v5.3.2...v5.3.3) (2021-07-28)
+
+
+### Bug Fixes
+
+* remove trailing comma ([985a66c](https://github.com/streamich/nano-css/commit/985a66c3723dce2616f1f08cf6533796c13e5f47))
+
+## [5.3.2](https://github.com/streamich/nano-css/compare/v5.3.1...v5.3.2) (2021-07-28)
+
+
+### Bug Fixes
+
+* remove hydration logging in development ([1bf7053](https://github.com/streamich/nano-css/commit/1bf70533d4641b27073378a6d33f564fc1e27878))
+
+## [5.3.1](https://github.com/streamich/nano-css/compare/v5.3.0...v5.3.1) (2021-01-13)
+
+
+### Bug Fixes
+
+* make every export to be listed manually since TSC 4 ([78e50fa](https://github.com/streamich/nano-css/commit/78e50fab882411613c53aa76b81578fc698fadf8))
+
+# [5.3.0](https://github.com/streamich/nano-css/compare/v5.2.0...v5.3.0) (2020-02-17)
+
+
+### Bug Fixes
+
+* **addon\atom:** mistake in types; ([3be2d1f](https://github.com/streamich/nano-css/commit/3be2d1ff04c8e3d1580280b52aa47a52cdfdb7e7))
+* **addon\emmet:** mistake in types; ([54583fe](https://github.com/streamich/nano-css/commit/54583fe04a22efc97fabfc7655abdcd8f2394119))
+
+
+### Features
+
+* 🎸 export all types ([23a1ade](https://github.com/streamich/nano-css/commit/23a1adeeb8f436b108644ee9fb1b2c83dc2265b4))
+
+# [5.2.0](https://github.com/streamich/nano-css/compare/v5.1.0...v5.2.0) (2019-06-03)
+
+
+### Features
+
+* add "::placeholder" support to prefixer ([caf78d8](https://github.com/streamich/nano-css/commit/caf78d8))
+
+# [5.1.0](https://github.com/streamich/nano-css/compare/v5.0.0...v5.1.0) (2019-03-26)
+
+
+### Bug Fixes
+
+* 🐛 don't crash CSSOM and VCSSOM addons on server side ([123f76c](https://github.com/streamich/nano-css/commit/123f76c))
+
+
+### Features
+
+* 🎸 add .del() to VRule, removeRule() now acc only 1 arg ([6d25e55](https://github.com/streamich/nano-css/commit/6d25e55))
+* 🎸 change VRule interface, add vcssom docs ([18cea49](https://github.com/streamich/nano-css/commit/18cea49))
+
+# [5.0.0](https://github.com/streamich/nano-css/compare/v4.0.0...v5.0.0) (2019-03-22)
+
+
+### Bug Fixes
+
+* 🐛 don't load VCSSOM in non-browser environments ([857b2d2](https://github.com/streamich/nano-css/commit/857b2d2))
+* 🐛 search for rule index before removing it ([27b48ca](https://github.com/streamich/nano-css/commit/27b48ca))
+
+
+### Features
+
+* 🎸 add CSSOM and VCSSOM TypeScript typings ([607253a](https://github.com/streamich/nano-css/commit/607253a))
+* 🎸 add TypeScript definitiosn for some missing addons ([6611aac](https://github.com/streamich/nano-css/commit/6611aac))
+* 🎸 allow JS-style snake-case declaration properties ([9b8197a](https://github.com/streamich/nano-css/commit/9b8197a))
+* 🎸 move TypeScript typings inline next to implementations ([224ee56](https://github.com/streamich/nano-css/commit/224ee56))
+
+
+### BREAKING CHANGES
+
+* 🧨 refactoring TypeScript types might break some TypeScript builds
+
+# [4.0.0](https://github.com/streamich/nano-css/compare/v3.5.0...v4.0.0) (2019-03-21)
+
+
+### Bug Fixes
+
+* 🐛`NODE_EVN` should be `NODE_ENV` ([8feead7](https://github.com/streamich/nano-css/commit/8feead7))
+* upgrade react-dom due to vulnerability ([8bdeeba](https://github.com/streamich/nano-css/commit/8bdeeba))
+* upgrade webpack-dev-server due to vulnerability ([602d9c3](https://github.com/streamich/nano-css/commit/602d9c3))
+
+
+### Features
+
+* 🎸 add vcssom addon ([63e27f2](https://github.com/streamich/nano-css/commit/63e27f2))
+* 🎸 create unified CSSOM createRule() for all use cases ([6976707](https://github.com/streamich/nano-css/commit/6976707))
+* 🎸 improve cssom addon ([6f1ead5](https://github.com/streamich/nano-css/commit/6f1ead5))
+* 🎸support `[@font-face](https://github.com/font-face)` ([a905b54](https://github.com/streamich/nano-css/commit/a905b54)), closes [#220](https://github.com/streamich/nano-css/issues/220)
+
+
+### BREAKING CHANGES
+
+* cssom addon API changed, pipe addon as a consequence now behaves
+differently, too
+* old putRule() CSSOM function is now removed, use createRule() instead
+
+# [3.5.0](https://github.com/streamich/nano-css/compare/v3.4.0...v3.5.0) (2018-12-26)
+
+
+### Features
+
+* add Emmet based abbreviations for css atoms ([#215](https://github.com/streamich/nano-css/issues/215)) ([ee1f487](https://github.com/streamich/nano-css/commit/ee1f487))
+
+# [3.4.0](https://github.com/streamich/nano-css/compare/v3.3.0...v3.4.0) (2018-09-18)
+
+
+### Features
+
+* better prefixing ([e5e83c4](https://github.com/streamich/nano-css/commit/e5e83c4)), closes [#206](https://github.com/streamich/nano-css/issues/206)
+
+# [3.3.0](https://github.com/streamich/nano-css/compare/v3.2.1...v3.3.0) (2018-09-18)
+
+
+### Bug Fixes
+
+* improve kebab case conversion ([1819a14](https://github.com/streamich/nano-css/commit/1819a14))
+
+
+### Features
+
+* better kebab case conversion ([380f65f](https://github.com/streamich/nano-css/commit/380f65f))
+
+## [3.2.1](https://github.com/streamich/nano-css/compare/v3.2.0...v3.2.1) (2018-08-06)
+
+
+### Bug Fixes
+
+* 🐛 don't insert empty !important declarations ([197430d](https://github.com/streamich/nano-css/commit/197430d))
+
+# [3.2.0](https://github.com/streamich/nano-css/compare/v3.1.0...v3.2.0) (2018-08-05)
+
+
+### Bug Fixes
+
+* 🐛 add !important only if it is not already there ([8f0bc4c](https://github.com/streamich/nano-css/commit/8f0bc4c))
+* 🐛 replace all & operators in nesting addon ([0e1eca8](https://github.com/streamich/nano-css/commit/0e1eca8))
+
+
+### Features
+
+* 🎸 add placeholders for decorator and comp addons types ([2c897e0](https://github.com/streamich/nano-css/commit/2c897e0))
+
+# [3.1.0](https://github.com/streamich/nano-css/compare/v3.0.1...v3.1.0) (2018-07-21)
+
+
+### Features
+
+* 🎸 add atoms addon typings ([472415c](https://github.com/streamich/nano-css/commit/472415c))
+* 🎸 add drule addon typings ([fe0345c](https://github.com/streamich/nano-css/commit/fe0345c))
+* 🎸 add keyframes() addon typings ([4615452](https://github.com/streamich/nano-css/commit/4615452))
+* 🎸 add sheet addon typings ([2b86cc2](https://github.com/streamich/nano-css/commit/2b86cc2))
+* add sheet preset typings ([94c11ac](https://github.com/streamich/nano-css/commit/94c11ac))
+
+## [3.0.1](https://github.com/streamich/nano-css/compare/v3.0.0...v3.0.1) (2018-07-16)
+
+
+### Bug Fixes
+
+* 🐛 enumerate map returned by sheet() ([58da52a](https://github.com/streamich/nano-css/commit/58da52a)), closes [#189](https://github.com/streamich/nano-css/issues/189)
+
+# [3.0.0](https://github.com/streamich/nano-css/compare/v2.2.0...v3.0.0) (2018-07-15)
+
+
+### Features
+
+* 🎸 add TypeScript type definitions ([696dd4d](https://github.com/streamich/nano-css/commit/696dd4d))
+* 🎸 improve TypeScript definitions ([21a3a49](https://github.com/streamich/nano-css/commit/21a3a49))
+* 🎸 pretty-print CSS in DEV mode ([446e9c1](https://github.com/streamich/nano-css/commit/446e9c1))
+* 🎸 protect .putRaw from unknown pseudo-selectors ([d122cf5](https://github.com/streamich/nano-css/commit/d122cf5))
+* 🎸 remove `safe` addon in favor of new changes ([9f0c2fc](https://github.com/streamich/nano-css/commit/9f0c2fc))
+
+
+### BREAKING CHANGES
+
+* safe addon is now removed and .putRaw will not throw
+
+# [2.2.0](https://github.com/streamich/nano-css/compare/v2.1.0...v2.2.0) (2018-07-14)
+
+
+### Features
+
+* 🎸 make `safe` addom less chatty ([c449a13](https://github.com/streamich/nano-css/commit/c449a13))
+
+
+### Performance Improvements
+
+* ⚡️ store all units in a string ([7142d86](https://github.com/streamich/nano-css/commit/7142d86))
+
+# [2.1.0](https://github.com/streamich/nano-css/compare/v2.0.2...v2.1.0) (2018-07-11)
+
+
+### Features
+
+* 🎸 add "tr" atom for "transform" property ([e4d59e5](https://github.com/streamich/nano-css/commit/e4d59e5))
+* 🎸 add sourcemaps addon to presets ([8fb46c0](https://github.com/streamich/nano-css/commit/8fb46c0))
+* 🎸 create "safe" addon ([d6f0ad5](https://github.com/streamich/nano-css/commit/d6f0ad5))
+* 🎸 create "units" addon ([0e1e25c](https://github.com/streamich/nano-css/commit/0e1e25c))
+* 🎸 improve hydrate addon ([511b293](https://github.com/streamich/nano-css/commit/511b293))
+* 🎸 improve source maps, make work with jsx and sheet ([8b24e44](https://github.com/streamich/nano-css/commit/8b24e44))
+* 🎸 make first version of sourcemap addon work ([038b2c1](https://github.com/streamich/nano-css/commit/038b2c1))
+* 🎸 warn user on clashing block names ([79a0a36](https://github.com/streamich/nano-css/commit/79a0a36))
+
+
+### Performance Improvements
+
+* ⚡️ create units object only once ([4c39f31](https://github.com/streamich/nano-css/commit/4c39f31))
+
+## [2.0.2](https://github.com/streamich/nano-css/compare/v2.0.1...v2.0.2) (2018-06-15)
+
+
+### Bug Fixes
+
+* release hydrate bug fix ([88b5a2c](https://github.com/streamich/nano-css/commit/88b5a2c))
+
+## [2.0.1](https://github.com/streamich/nano-css/compare/v2.0.0...v2.0.1) (2018-06-15)
+
+
+### Bug Fixes
+
+* remove complicated selectors in Normalize.css reset ([4f13854](https://github.com/streamich/nano-css/commit/4f13854))
+
+# [2.0.0](https://github.com/streamich/nano-css/compare/v1.0.0...v2.0.0) (2018-06-13)
+
+
+### Features
+
+* semantic-releaes v2 ([ccb5d6d](https://github.com/streamich/nano-css/commit/ccb5d6d))
+
+
+### BREAKING CHANGES
+
+* v2
+
+# 1.0.0 (2018-06-13)
+
+
+### Bug Fixes
+
+* add back Yahoo reset test ([45ff58f](https://github.com/streamich/nano-css/commit/45ff58f))
+* always render style() comps on extract addon ([2657001](https://github.com/streamich/nano-css/commit/2657001))
+* dont require json loader for webpack ([91d1874](https://github.com/streamich/nano-css/commit/91d1874))
+* fix atoms addon ([7bac059](https://github.com/streamich/nano-css/commit/7bac059))
+* improve fonts reset ([daab84b](https://github.com/streamich/nano-css/commit/daab84b))
+* insert rules at the end of stylesheet ([752de24](https://github.com/streamich/nano-css/commit/752de24))
+* make precedence of top level rules higher ([3ae7050](https://github.com/streamich/nano-css/commit/3ae7050))
+* support array-as-value after prefixing ([5197e66](https://github.com/streamich/nano-css/commit/5197e66))
+* typos ([33186cd](https://github.com/streamich/nano-css/commit/33186cd))
+
+
+### Features
+
+* 🎸 add Normalize.css reest ([fe8fee1](https://github.com/streamich/nano-css/commit/fe8fee1)), closes [#132](https://github.com/streamich/nano-css/issues/132)
+* add $ref and $as support for jsx() ([1207854](https://github.com/streamich/nano-css/commit/1207854))
+* add atom addon ([edc5d59](https://github.com/streamich/nano-css/commit/edc5d59))
+* add Atrule support ([20882c4](https://github.com/streamich/nano-css/commit/20882c4))
+* add basic amp addon ([5e5b633](https://github.com/streamich/nano-css/commit/5e5b633))
+* add basic cssom addon ([a08dbc9](https://github.com/streamich/nano-css/commit/a08dbc9))
+* add basic keyframes() implementation ([cd3dcc7](https://github.com/streamich/nano-css/commit/cd3dcc7))
+* add basic pipe addon ([034ab59](https://github.com/streamich/nano-css/commit/034ab59))
+* add basic rtl addon implementation ([c7b901d](https://github.com/streamich/nano-css/commit/c7b901d))
+* add basic spread implementation ([fa376da](https://github.com/streamich/nano-css/commit/fa376da))
+* add basic static class decorator ([51b09b3](https://github.com/streamich/nano-css/commit/51b09b3))
+* add CSS resets ([26f86b4](https://github.com/streamich/nano-css/commit/26f86b4))
+* add decorator addon ([381d4fd](https://github.com/streamich/nano-css/commit/381d4fd))
+* add dsheet() ([744149c](https://github.com/streamich/nano-css/commit/744149c))
+* add dsheet() interface ([1d509ed](https://github.com/streamich/nano-css/commit/1d509ed))
+* add extract addon ([8f9fed0](https://github.com/streamich/nano-css/commit/8f9fed0))
+* add fadeIn animation ([9de1af8](https://github.com/streamich/nano-css/commit/9de1af8))
+* add fadeIn animation story ([b17051d](https://github.com/streamich/nano-css/commit/b17051d))
+* add fadeInDown animation ([074b954](https://github.com/streamich/nano-css/commit/074b954))
+* add fadeInExpand animation ([cc3e75e](https://github.com/streamich/nano-css/commit/cc3e75e))
+* add garbage collection to pipe() ([f2a9087](https://github.com/streamich/nano-css/commit/f2a9087))
+* add hoistGlobalsAndWrapContext() ([364ba2b](https://github.com/streamich/nano-css/commit/364ba2b))
+* add hydration addon ([0a8feb4](https://github.com/streamich/nano-css/commit/0a8feb4))
+* add initial implementation ([32a7caf](https://github.com/streamich/nano-css/commit/32a7caf))
+* add inline-style-prefixer addon ([005dd68](https://github.com/streamich/nano-css/commit/005dd68))
+* add keyframes() ([77578ba](https://github.com/streamich/nano-css/commit/77578ba))
+* add limit addon ([4b2ab42](https://github.com/streamich/nano-css/commit/4b2ab42))
+* add minH and maxH atoms ([5772142](https://github.com/streamich/nano-css/commit/5772142))
+* add nesting addon ([ce8b5dc](https://github.com/streamich/nano-css/commit/ce8b5dc))
+* add prefixes to keyframes ([6e98435](https://github.com/streamich/nano-css/commit/6e98435))
+* add pseudo selectors :hover :focus ([4bacb7e](https://github.com/streamich/nano-css/commit/4bacb7e))
+* add react preset ([ae542c0](https://github.com/streamich/nano-css/commit/ae542c0))
+* add reset-font addon ([913320d](https://github.com/streamich/nano-css/commit/913320d))
+* add sheet preset ([1d67594](https://github.com/streamich/nano-css/commit/1d67594))
+* add sheet() addon ([f2d4bd2](https://github.com/streamich/nano-css/commit/f2d4bd2))
+* add snake any value .s and semantic accents ([ee296ed](https://github.com/streamich/nano-css/commit/ee296ed))
+* add spread addon ([388b391](https://github.com/streamich/nano-css/commit/388b391))
+* add stable hash story ([c0367ee](https://github.com/streamich/nano-css/commit/c0367ee))
+* add stable stringify plugin ([be13c1b](https://github.com/streamich/nano-css/commit/be13c1b))
+* add static decorator dynamic CSS ([5ef8a08](https://github.com/streamich/nano-css/commit/5ef8a08))
+* add stylis ([37f714c](https://github.com/streamich/nano-css/commit/37f714c))
+* add tachyons definitions ([bd1bfa7](https://github.com/streamich/nano-css/commit/bd1bfa7))
+* add tachyons hover rules ([0aabd1c](https://github.com/streamich/nano-css/commit/0aabd1c))
+* add toCss() ([b8a4958](https://github.com/streamich/nano-css/commit/b8a4958))
+* add unitless addon that add 'px' automatical ([ca0f9b0](https://github.com/streamich/nano-css/commit/ca0f9b0))
+* add useStyles interface ([2e78159](https://github.com/streamich/nano-css/commit/2e78159))
+* add vendor prefixes to keyframes addon ([5ddd5bb](https://github.com/streamich/nano-css/commit/5ddd5bb))
+* add virtual CSS addon ([3220b02](https://github.com/streamich/nano-css/commit/3220b02))
+* add warning generator for missing deps ([f81481d](https://github.com/streamich/nano-css/commit/f81481d))
+* add withStyles() interface ([4d04280](https://github.com/streamich/nano-css/commit/4d04280))
+* allow .s to accept an object ([aedbc41](https://github.com/streamich/nano-css/commit/aedbc41))
+* allow composition ([d47d212](https://github.com/streamich/nano-css/commit/d47d212))
+* basic snake addon implementation ([04965d2](https://github.com/streamich/nano-css/commit/04965d2))
+* change how hydration sheet is located ([73259ef](https://github.com/streamich/nano-css/commit/73259ef))
+* creat tachyons snake rules ([2829c33](https://github.com/streamich/nano-css/commit/2829c33))
+* create Component interface ([2de1804](https://github.com/streamich/nano-css/commit/2de1804))
+* create new snake instance dynamically ([d8c0951](https://github.com/streamich/nano-css/commit/d8c0951))
+* create react preset ([69b0c4e](https://github.com/streamich/nano-css/commit/69b0c4e))
+* create separate stylesheet for keyframes ([90a75a1](https://github.com/streamich/nano-css/commit/90a75a1))
+* create styled() addon ([a68d1d7](https://github.com/streamich/nano-css/commit/a68d1d7))
+* display inserted styles in devtools in DEV ([f047821](https://github.com/streamich/nano-css/commit/f047821))
+* expose .sheet property ([4b4a32d](https://github.com/streamich/nano-css/commit/4b4a32d))
+* expose selector for addons ([ad64849](https://github.com/streamich/nano-css/commit/ad64849))
+* expose stringify() function ([d4756d8](https://github.com/streamich/nano-css/commit/d4756d8))
+* first implementation of array addon ([77f0ad9](https://github.com/streamich/nano-css/commit/77f0ad9))
+* fix sheet() and add storeis ([923cced](https://github.com/streamich/nano-css/commit/923cced))
+* fix sheet() and add stories ([f135cc2](https://github.com/streamich/nano-css/commit/f135cc2))
+* implement basic ref() interface ([46de4fd](https://github.com/streamich/nano-css/commit/46de4fd))
+* implement drule() ([31ee8a2](https://github.com/streamich/nano-css/commit/31ee8a2))
+* implement first version of virtual addon ([d3225e2](https://github.com/streamich/nano-css/commit/d3225e2))
+* implement googleFont addon ([9083919](https://github.com/streamich/nano-css/commit/9083919))
+* implement hyperstyle() interface ([7fe96eb](https://github.com/streamich/nano-css/commit/7fe96eb))
+* implement jsx() ([7721f0b](https://github.com/streamich/nano-css/commit/7721f0b))
+* implement put() function ([07ab8e6](https://github.com/streamich/nano-css/commit/07ab8e6))
+* implement ref addon ([d8b6a1e](https://github.com/streamich/nano-css/commit/d8b6a1e))
+* implement styled() ([33d31b4](https://github.com/streamich/nano-css/commit/33d31b4))
+* implement validate addon ([03d039f](https://github.com/streamich/nano-css/commit/03d039f))
+* improve amp addon ([7314eae](https://github.com/streamich/nano-css/commit/7314eae))
+* improve atoms and snake addons ([8eff686](https://github.com/streamich/nano-css/commit/8eff686))
+* improve fade out animations ([564ac3a](https://github.com/streamich/nano-css/commit/564ac3a))
+* improve snake addon ([9ec9de6](https://github.com/streamich/nano-css/commit/9ec9de6))
+* improve snake nesting .s ([1e2409e](https://github.com/streamich/nano-css/commit/1e2409e))
+* improvements ([31d23ee](https://github.com/streamich/nano-css/commit/31d23ee))
+* initial commit ([422f05b](https://github.com/streamich/nano-css/commit/422f05b))
+* make rule() work ([3816612](https://github.com/streamich/nano-css/commit/3816612))
+* make validate addon compile ([a9f1adc](https://github.com/streamich/nano-css/commit/a9f1adc))
+* release v2 ([ed24a90](https://github.com/streamich/nano-css/commit/ed24a90))
+* remove pipe rules when node is unmounted ([d278cec](https://github.com/streamich/nano-css/commit/d278cec))
+* setup project files ([c9580d5](https://github.com/streamich/nano-css/commit/c9580d5))
+* various ([40039b7](https://github.com/streamich/nano-css/commit/40039b7))
+* work on hydration ([5f4dc5c](https://github.com/streamich/nano-css/commit/5f4dc5c))
+
+
+### Performance Improvements
+
+* improve styled() addon ([859a01f](https://github.com/streamich/nano-css/commit/859a01f))
+
+
+### BREAKING CHANGES
+
+* release v2
@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>
@@ -0,0 +1,72 @@
+# 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
@@ -0,0 +1,25 @@
+'use strict';
+
+var pkgName = 'nano-css';
+
+module.exports = function warnOnMissingDependencies (addon, renderer, deps) {
+    var missing = [];
+
+    for (var i = 0; i < deps.length; i++) {
+        var name = deps[i];
+
+        if (!renderer[name]) {
+            missing.push(name);
+        }
+    }
+
+    if (missing.length) {
+        var str = 'Addon "' + addon + '" is missing the following dependencies:';
+
+        for (var j = 0; j < missing.length; j++) {
+            str += '\n require("' + pkgName + '/addon/' + missing[j] + '").addon(nano);';
+        }
+
+        throw new Error(str);
+    }
+};
@@ -0,0 +1,5 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface AmpAddon {}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,156 @@
+'use strict';
+
+var addonLimit = require('./limit').addon;
+
+// Banned CSS declaration property names, for security reasons.
+var banned = [
+    'behavior',
+    '-moz-binding',
+];
+
+var warnOnImportant = function (renderer) {
+    var putRaw = renderer.putRaw;
+
+    renderer.putRaw = function (rawCssRule) {
+        if (rawCssRule.indexOf('!important') > -1) {
+            console.error(
+                '!important modifier is not allowed in AMP apps. ' +
+                'Detected !important modifier in below CSS rule. ' +
+                rawCssRule
+            );
+        }
+
+        return putRaw(rawCssRule);
+    };
+};
+
+var removeImportant = function (renderer) {
+    var putRaw = renderer.putRaw;
+
+    renderer.putRaw = function (rawCssRule) {
+        rawCssRule = rawCssRule.replace(/!important/g, '');
+
+        return putRaw(rawCssRule);
+    };
+};
+
+var warnOnReservedSelectors = function (renderer) {
+    var putRaw = renderer.putRaw;
+
+    renderer.putRaw = function (rawCssRule) {
+        var pos = rawCssRule.indexOf('{');
+
+        if (pos < 0)
+            return putRaw(rawCssRule);
+
+        var selectors = ' ' + rawCssRule.substr(0, pos);
+
+        if (selectors.match(/\s\.-amp-/g)) {
+            console.error(
+                'Detected class name that starts with "-amp-". ' +
+                'Class names starting with "-amp-" are reserved from AMP components. ' +
+                rawCssRule
+            );
+        }
+
+        if (selectors.match(/\si-amp-/g)) {
+            console.error(
+                'Detected CSS selector that matches "i-amp-" elements. ' +
+                'Slectors for "i-amp-" elements are reserved from AMP components. ' +
+                rawCssRule
+            );
+        }
+
+        return putRaw(rawCssRule);
+    };
+};
+
+var removeReservedSelectors = function (renderer) {
+    var putRaw = renderer.putRaw;
+
+    renderer.putRaw = function (rawCssRule) {
+        var pos = rawCssRule.indexOf('{');
+
+        if (pos < 0)
+            return putRaw(rawCssRule);
+
+        var selectors = ' ' + rawCssRule.substr(0, pos);
+
+        if (selectors.match(/\s\.-amp-/g) || selectors.match(/\si-amp-/g)) {
+            return;
+        }
+
+        return putRaw(rawCssRule);
+    };
+};
+
+var warnOnBanned = function (renderer) {
+    var decl = renderer.decl;
+
+    renderer.decl = function (prop, value) {
+        if (banned.indexOf(renderer.kebab(prop)) > -1) {
+
+            console.error(
+                'Detected banned CSS prop, "' + prop + '" is not allowed in AMP apps.'
+            );
+        }
+
+        return decl(prop, value);
+    };
+};
+
+var removeBanned = function (renderer) {
+    var decl = renderer.decl;
+
+    renderer.decl = function (prop, value) {
+        if (banned.indexOf(renderer.kebab(prop)) > -1) {
+
+            return '';
+        }
+
+        return decl(prop, value);
+    };
+};
+
+exports.addon = function (renderer, config) {
+    config = config || {};
+
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('limit', renderer, ['putRaw']);
+    }
+
+    if (renderer.client) return;
+
+    // Enforce max style sheet size.
+    addonLimit(renderer, config.limit || 50000);
+
+    // Warn on `!important` specifiers, which are not allowed.
+    if (process.env.NODE_ENV !== 'production') {
+        warnOnImportant(renderer);
+    }
+
+    // Remove all !important modifiers.
+    if (config.removeImportant) {
+        removeImportant(renderer);
+    }
+
+    // Warn on reserved selectors.
+    if (process.env.NODE_ENV !== 'production') {
+        warnOnReservedSelectors(renderer);
+    }
+
+    // Remove reserved selectors ".-amp-" and "i-amp-".
+    if (config.removeReserved) {
+        removeReservedSelectors(renderer);
+    }
+
+    // Warn on banned CSS properties.
+    if (process.env.NODE_ENV !== 'production') {
+        warnOnBanned(renderer);
+    }
+
+    // Remove banned CSS properties.
+    if (config.removeBanned) {
+        removeBanned(renderer);
+    }
+};
@@ -0,0 +1,22 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
+    }
+
+    renderer.put('', {
+        '@keyframes fadeIn': {
+            from: {
+                opacity: 0,
+            },
+            to: {
+                opacity: 1,
+            }
+        },
+
+        '.fadeIn': {
+            animation: 'fadeIn .4s linear',
+        }
+    });
+};
@@ -0,0 +1,25 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
+    }
+
+    renderer.put('', {
+        '@keyframes fadeInDown': {
+            from: {
+                opacity: 0,
+                transform: 'translate3d(0, -10%, 0)'
+            },
+
+            to: {
+                opacity: 1,
+                transform: 'translate3d(0, 0, 0)',
+            }
+        },
+
+        '.fadeInDown': {
+            animation: 'fadeInDown .3s',
+        }
+    });
+};
@@ -0,0 +1,25 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
+    }
+
+    renderer.put('', {
+        '@keyframes fadeInScale': {
+            from: {
+                opacity: 0,
+                transform: 'scale(.95)'
+            },
+
+            to: {
+                opacity: 1,
+                transform: 'scale(1)',
+            }
+        },
+
+        '.fadeInScale': {
+            animation: 'fadeInScale .3s',
+        }
+    });
+};
@@ -0,0 +1,23 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
+    }
+
+    renderer.put('', {
+        '@keyframes fadeOut': {
+            from: {
+                opacity: 1,
+            },
+            to: {
+                opacity: 0,
+            }
+        },
+
+        '.fadeOut': {
+            animation: 'fadeOut .3s linear',
+            'animation-fill-mode': 'forwards',
+        }
+    });
+};
@@ -0,0 +1,21 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('animate', renderer, ['keyframes']);
+    }
+
+    renderer.put('', {
+        '@keyframes fadeOutScale': {
+            to: {
+                opacity: 0,
+                transform: 'scale(.95)',
+            }
+        },
+
+        '.fadeOutScale': {
+            animation: 'fadeOutScale .3s linear',
+            'animation-fill-mode': 'forwards',
+        }
+    });
+};
@@ -0,0 +1,5 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface ArrayAddon {}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,33 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('rule', renderer, ['put', 'decl']);
+    }
+
+    var decl = renderer.decl;
+
+    renderer.decl = function (prop, value) {
+        var result = decl(prop, value);
+
+        if (value instanceof Array) {
+            var pos = result.indexOf(':');
+
+            prop = result.substr(0, pos + 1);
+
+            result = prop + value.join(';' + prop) + ';';
+        }
+
+        return result;
+    };
+
+    var put = renderer.put;
+
+    renderer.put = function (selector, decls, atrule) {
+        if (decls instanceof Array) {
+            decls = renderer.assign.apply(null, decls);
+        }
+
+        return put(selector, decls, atrule);
+    };
+};
@@ -0,0 +1,674 @@
+import * as CSS from 'csstype';
+import {NanoRenderer} from '../types/nano';
+
+type TLength = string | number;
+
+export interface Atoms {
+    // Positioning
+
+    /**
+     * Short for `position` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pos?: CSS.Property.Position;
+
+    /**
+     * Short for `top` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    t?: CSS.Property.Top<TLength>;
+
+    /**
+     * Short for `right` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    r?: CSS.Property.Right<TLength>;
+
+    /**
+     * Short for `bottom` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    b?: CSS.Property.Bottom<TLength>;
+
+    /**
+     * Short for `left` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    l?: CSS.Property.Left<TLength>;
+
+    /**
+     * Short for `z-index` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    z?: CSS.Property.ZIndex;
+
+    // Layout (box model)
+
+    /**
+     * Short for `display` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    d?: CSS.Property.Display;
+
+    /**
+     * Short for `visibility` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    vis?: CSS.Property.Visibility;
+
+    /**
+     * Short for `width` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    w?: CSS.Property.Width<TLength>;
+
+    /**
+     * Short for `min-width` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    minW?: CSS.Property.MinWidth<TLength>;
+
+    /**
+     * Short for `max-width` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    maxW?: CSS.Property.MaxWidth<TLength>;
+
+    /**
+     * Short for `height` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    h?: CSS.Property.Height<TLength>;
+
+    /**
+     * Short for `min-height` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    minH?: CSS.Property.MinHeight<TLength>;
+
+    /**
+     * Short for `max-height` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    maxH?: CSS.Property.MaxHeight<TLength>;
+
+    /**
+     * Short for `overflow` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ov?: CSS.Property.Overflow;
+
+    /**
+     * Short for `overflow-x` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ovx?: CSS.Property.OverflowX;
+
+    /**
+     * Short for `overflow-y` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ovy?: CSS.Property.OverflowX;
+
+    /**
+     * Short for `box-sizing` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bxz?: CSS.Property.BoxSizing;
+
+    /**
+     * Short for `clip` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    cl?: CSS.Property.Clip;
+
+    /**
+     * Short for `clip-path` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    clp?: CSS.Property.ClipPath;
+
+    /**
+     * Short for `table-layout` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    clr?: CSS.Property.Clear;
+
+    /**
+     * Short for `table-layout` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    tbl?: CSS.Property.TableLayout;
+
+    // Flexbox
+
+    /**
+     * Short for `flex` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fl?: CSS.Property.Flex<TLength>;
+
+    /**
+     * Short for `flex-direction` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fld?: CSS.Property.FlexDirection;
+
+    /**
+     * Short for `flex-grow` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    flg?: CSS.Property.FlexGrow;
+
+    /**
+     * Short for `flex-shrink` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fls?: CSS.Property.FlexShrink;
+
+    /**
+     * Short for `flex-basis` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    flb?: CSS.Property.FlexBasis<TLength>;
+
+    /**
+     * Short for `flex-wrap` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    flw?: CSS.Property.FlexWrap;
+
+    /**
+     * Short for `justify-content` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    jc?: CSS.Property.JustifyContent;
+
+    /**
+     * Short for `align-items` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ai?: CSS.Property.AlignItems;
+
+    /**
+     * Short for `align-content` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ac?: CSS.Property.AlignContent;
+
+    /**
+     * Short for `align-self` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    as?: CSS.Property.AlignSelf;
+
+    // Margins
+
+    /**
+     * Short for `margin` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    mr?: CSS.Property.Margin<TLength>;
+
+    /**
+     * Short for `margin-top` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    mrt?: CSS.Property.MarginTop<TLength>;
+
+    /**
+     * Short for `margin-right` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    mrr?: CSS.Property.MarginRight<TLength>;
+
+    /**
+     * Short for `margin-bottom` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    mrb?: CSS.Property.MarginBottom<TLength>;
+
+    /**
+     * Short for `margin-left` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    mrl?: CSS.Property.MarginLeft<TLength>;
+
+    /**
+     * Same as `mr`.
+     * @deprecated Use `mr` instead.
+     */
+    mar?: CSS.Property.Margin<TLength>;
+
+    /**
+     * Same as `mrt`.
+     * @deprecated Use `mrt` instead.
+     */
+    mart?: CSS.Property.MarginTop<TLength>;
+
+    /**
+     * Same as `mrr`.
+     * @deprecated Use `mrr` instead.
+     */
+    marr?: CSS.Property.MarginRight<TLength>;
+
+    /**
+     * Same as `mrb`.
+     * @deprecated Use `mrb` instead.
+     */
+    marb?: CSS.Property.MarginBottom<TLength>;
+
+    /**
+     * Same as `mrl`.
+     * @deprecated Use `mrl` instead.
+     */
+    marl?: CSS.Property.MarginLeft<TLength>;
+
+    // Paddings
+
+    /**
+     * Short for `padding` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pd?: CSS.Property.Padding<TLength>;
+
+    /**
+     * Short for `padding-top` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pdt?: CSS.Property.PaddingTop<TLength>;
+
+    /**
+     * Short for `padding-right` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pdr?: CSS.Property.PaddingRight<TLength>;
+
+    /**
+     * Short for `padding-bottom` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pdb?: CSS.Property.PaddingBottom<TLength>;
+
+    /**
+     * Short for `padding-left` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pdl?: CSS.Property.PaddingLeft<TLength>;
+
+    /**
+     * Same as `pd`.
+     * @deprecated Use `pd` instead.
+     */
+    pad?: CSS.Property.Padding<TLength>;
+
+    /**
+     * Same as `pdt`.
+     * @deprecated Use `pdt` instead.
+     */
+    padt?: CSS.Property.PaddingTop<TLength>;
+
+    /**
+     * Same as `pdr`.
+     * @deprecated Use `pdr` instead.
+     */
+    padr?: CSS.Property.PaddingRight<TLength>;
+
+    /**
+     * Same as `pdb`.
+     * @deprecated Use `pdb` instead.
+     */
+    padb?: CSS.Property.PaddingBottom<TLength>;
+
+    /**
+     * Same as `pdl`.
+     * @deprecated Use `pdl` instead.
+     */
+    padl?: CSS.Property.PaddingLeft<TLength>;
+
+    // Borders
+
+    /**
+     * Short for `border` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bd?: CSS.Property.BorderBottom<TLength>;
+
+    /**
+     * Short for `border-top` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdt?: CSS.Property.BorderTop<TLength>;
+
+    /**
+     * Short for `border-right` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdr?: CSS.Property.BorderRight<TLength>;
+
+    /**
+     * Short for `border-bottom` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdb?: CSS.Property.BorderBottom<TLength>;
+
+    /**
+     * Short for `border-left` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdl?: CSS.Property.BorderLeft<TLength>;
+
+    /**
+     * Short for `border-radius` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdrad?: CSS.Property.BorderRadius<TLength>;
+
+    /**
+     * Short for `border-color` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdc?: CSS.Property.BorderColor;
+
+    /**
+     * Short for `border-style` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bds?: CSS.Property.BorderStyle;
+
+    /**
+     * Short for `outline` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    out?: CSS.Property.Outline<TLength>;
+
+    /**
+     * Short for `box-shadow` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bxsh?: CSS.Property.BoxShadow;
+
+    // Colors
+
+    /**
+     * Short for `color` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    col?: CSS.Property.Color;
+
+    /**
+     * Short for `opacity` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    op?: number | string;
+
+    /**
+     * Short for `background` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bg?: CSS.Property.Background<TLength>;
+
+    /**
+     * Short for `background-color` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgc?: CSS.Property.BackgroundColor;
+
+    /**
+     * Short for `background-image` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgi?: CSS.Property.BackgroundImage;
+
+    /**
+     * Short for `background-repeat` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgr?: CSS.Property.BackgroundRepeat;
+
+    /**
+     * Short for `background-attachment` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bga?: CSS.Property.BackgroundAttachment;
+
+    /**
+     * Short for `background-position` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgp?: CSS.Property.BackgroundPosition<TLength>;
+
+    /**
+     * Short for `background-size` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgs?: CSS.Property.BackgroundSize<TLength>;
+
+    /**
+     * Short for `background-origin` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgo?: CSS.Property.BackgroundOrigin;
+
+    /**
+     * Short for `background-clip` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgcl?: CSS.Property.BackgroundClip;
+
+    /**
+     * Short for `backdrop-filter` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdfl?: CSS.Property.BackdropFilter;
+
+    /**
+     * Short for `backface-visibility` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bfvis?: CSS.Property.BackfaceVisibility;
+
+    // Text
+
+    /**
+     * Short for `font` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    f?: CSS.Property.Font;
+
+    /**
+     * Short for `font-size` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fz?: CSS.Property.FontSize<TLength>;
+
+    /**
+     * Short for `font-style` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fs?: CSS.Property.FontStyle;
+
+    /**
+     * Short for `font-weight` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fw?: CSS.Property.FontWeight;
+
+    /**
+     * Short for `font-family` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ff?: CSS.Property.FontFamily;
+
+    /**
+     * Short for `text-align` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ta?: CSS.Property.TextAlign;
+
+    /**
+     * Short for `text-decoration` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    td?: CSS.Property.TextDecoration<TLength>;
+
+    /**
+     * Short for `text-transform` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    tt?: CSS.Property.TextTransform;
+
+    /**
+     * Short for `text-shadow` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ts?: CSS.Property.TextShadow;
+
+    /**
+     * Short for `text-overflow` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    tov?: CSS.Property.TextOverflow;
+
+    /**
+     * Short for `word-wrap` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ww?: CSS.Property.WordWrap;
+
+    /**
+     * Short for `letter-spacing` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    lts?: CSS.Property.LetterSpacing<TLength>;
+
+    /**
+     * Short for `white-space` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ws?: CSS.Property.WhiteSpace;
+
+    /**
+     * Short for `line-height` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    lh?: CSS.Property.LineHeight<TLength>;
+
+    /**
+     * Short for `vertical-align` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    va?: CSS.Property.VerticalAlign<TLength>;
+
+    // Pointer
+
+    /**
+     * Short for `cursor` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    cur?: CSS.Property.Cursor;
+
+    /**
+     * Short for `pointer-events` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pe?: CSS.Property.PointerEvents;
+
+    /**
+     * Short for `user-select` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    us?: CSS.Property.UserSelect;
+
+    // Animations
+
+    /**
+     * Short for `animation` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    an?: CSS.Property.Animation;
+
+    /**
+     * Short for `animation-name` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ann?: CSS.Property.AnimationName;
+
+    /**
+     * Short for `animation-duration` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    and?: CSS.Property.AnimationDuration;
+
+    /**
+     * Short for `animation-fill-mode` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    anf?: CSS.Property.AnimationFillMode;
+
+    /**
+     * Short for `animation-iteration-count` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    anit?: CSS.Property.AnimationIterationCount;
+
+    /**
+     * Short for `animation-play-state` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    anp?: CSS.Property.AnimationPlayState;
+
+    /**
+     * Short for `animation-timing-function` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ant?: CSS.Property.AnimationTimingFunction;
+
+    /**
+     * Short for `transition` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    trs?: CSS.Property.Transition;
+
+    /**
+     * Short for `transform` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    tr?: CSS.Property.Transform;
+
+    // SVG
+
+    /**
+     * Short for `stroke` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    st?: CSS.Property.Stroke;
+
+    /**
+     * Short for `stroke-width` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    stw?: CSS.Property.StrokeWidth<TLength>;
+
+    /**
+     * Short for `stroke-linecap` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    stl?: CSS.Property.StrokeLinecap;
+
+    // Other
+
+    /**
+     * Short for `list-style` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ls?: CSS.Property.ListStyle;
+
+    /**
+     * Short for `content` property.
+     * Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    con?: CSS.Property.Content;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,207 @@
+'use strict';
+
+var pos =    'position',
+    t =      'top',
+    r =      'right',
+    b =      'bottom',
+    l =      'left',
+    w =      'width',
+    h =      'height',
+    ov =     'overflow',
+    col =    'color',
+    con =    'content',
+    ovx =    ov + '-x',
+    ovy =    ov + '-y',
+    fl =     'flex',
+    fld =    fl + '-direction',
+    flg =    fl + '-grow',
+    fls =    fl + '-shrink',
+    flb =    fl + '-basis',
+    flw =    fl + '-wrap',
+    align =  'align',
+    ai =     align + '-items',
+    ac =     align + '-' + con,
+    as =     align + '-self',
+    mr  =    'margin',
+    mrt =    mr + '-' + t,
+    mrr =    mr + '-' + r,
+    mrb =    mr + '-' + b,
+    mrl =    mr + '-' + l,
+    pd  =    'padding',
+    pdt =    pd + '-' + t,
+    pdr =    pd + '-' + r,
+    pdb =    pd + '-' + b,
+    pdl =    pd + '-' + l,
+    bd =     'border',
+    bdt =    bd + '-' + t,
+    bdr =    bd + '-' + r,
+    bdb =    bd + '-' + b,
+    bdl =    bd + '-' + l,
+    bdrad =  bd + '-radius',
+    bg =     'background',
+    bgc =    bg + '-' + col,
+    bgi =    bg + '-image',
+    bgr =    bg + '-repeat',
+    bga =    bg + '-attachment',
+    bgp =    bg + '-position',
+    bgs =    bg + '-size',
+    bgo =    bg + '-origin',
+    bgcl =   bg + '-clip',
+    style =  'style',
+    f =      'font',
+    fz =     f + '-size',
+    fs =     f + '-' + style,
+    fw =     f + '-weight',
+    ff =     f + '-family',
+    text =   'text',
+    ta =     text + '-align',
+    td =     text + '-decoration',
+    tt =     text + '-transform',
+    ts =     text + '-shadow',
+    tov =    text + '-overflow',
+    st =     'stroke',
+    stw =    st + '-width',
+    stl =    st + '-linecap',
+    an =     'animation',
+    ann =    an + '-name'
+    ;
+
+var atoms = exports.atoms = {
+    // Positioning
+    pos,
+    t,
+    r,
+    b,
+    l,
+    z:      'z-index',
+
+    // Layout (box model)
+    d:      'display',
+    vis:    'visibility',
+    w,
+    h,
+    minW:   'min-' + w,
+    maxW:   'max-' + w,
+    minH:   'min-' + h,
+    maxH:   'max-' + h,
+    ov,
+    ovx,
+    ovy,
+    bxz:    'box-sizing',
+    cl:     'clip',
+    clp:    'clip-path',
+    clr:    'clear',
+    tbl:    'table-layout',
+
+    // Flexbox
+    fl,
+    fld,
+    flg,
+    fls,
+    flb,
+    flw,
+    jc:     'justify-' + con,
+    ai,
+    ac,
+    as,
+
+    // Margins
+    mr,
+    mrt,
+    mrr,
+    mrb,
+    mrl,
+    mar:    mr,
+    mart:   mrt,
+    marr:   mrr,
+    marb:   mrb,
+    marl:   mrl,
+
+    // Paddings
+    pd,
+    pdt,
+    pdr,
+    pdb,
+    pdl,
+    pad:    pd,
+    padt:   pdt,
+    padr:   pdr,
+    padb:   pdb,
+    padl:   pdl,
+
+    // Borders
+    bd,
+    bdt,
+    bdr,
+    bdb,
+    bdl,
+    bdrad,
+    bdc:    bd + '-' + col,
+    bds:    bd + '-' + style,
+    out:    'outline',
+    bxsh:   'box-shadow',
+
+    // Colors
+    col,
+    op:     'opacity',
+    bg,
+    bgc,
+    bgi,
+    bgr,
+    bga,
+    bgp,
+    bgs,
+    bgo,
+    bgcl,
+    bdfl:   'backdrop-filter',
+    bfvis:  'backface-visibility',
+
+    // Text
+    f,
+    fz,
+    fs,
+    fw,
+    ff,
+    ta,
+    td,
+    tt,
+    ts,
+    tov,
+    ww:     'word-wrap',
+    lts:    'letter-spacing',
+    ws:     'white-space',
+    lh:     'line-' + h,
+    va:     'vertical-' + align,
+
+    // Pointer
+    cur:    'cursor',
+    pe:     'pointer-events',
+    us:     'user-select',
+
+    // Animations
+    an,
+    ann,
+    and:    an + '-duration',
+    anf:    an + '-fill-mode',
+    anit:   an + '-iteration-count',
+    anp:    an + '-play-state',
+    ant:    an + '-timing-function',
+    trs:    'transition',
+    tr:     'transform',
+
+    // SVG
+    st,
+    stw,
+    stl,
+
+    // Other
+    ls:     'list-' + style,
+    con,
+};
+
+exports.addon = function (renderer) {
+    var originalDecl = renderer.decl;
+    renderer.decl = function (key, value) {
+        return originalDecl(atoms[key] || key, value);
+    };
+};
@@ -0,0 +1,8 @@
+import {NanoRenderer} from '../types/nano';
+import {CssLikeObject} from '../types/common';
+
+export interface CacheAddon {
+    cache(css: CssLikeObject): string;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,17 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    var cache = {};
+
+    renderer.cache = function (css) {
+        if (!css) return '';
+
+        var key = renderer.hash(css);
+
+        if (!cache[key]) {
+            cache[key] = renderer.rule(css, key);
+        }
+
+        return cache[key];
+    };
+};
@@ -0,0 +1,7 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface ComponentAddon {
+    Component;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var Component = React.Component;
+var transformComponentStatic = require('./util/transformComponentStatic');
+var transformComponentDynamic = require('./util/transformComponentDynamic');
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('component', renderer, ['rule', 'cache']);
+    }
+
+    function CssComponent (props, context) {
+        Component.call(this, props, context);
+
+        var Comp = this.constructor;
+
+        if (Comp.css) transformComponentStatic(renderer, Comp.prototype, Comp.css);
+        if (this.css) transformComponentDynamic(renderer, Comp, this.css.bind(this));
+    }
+
+    CssComponent.prototype = Object.create(Component.prototype);
+    CssComponent.prototype.constructor = CssComponent;
+
+    renderer.Component = CssComponent;
+};
@@ -0,0 +1,17 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface CSSOMRule extends CSSRule {
+    index: number;
+    style: CSSStyleDeclaration;
+    styleMap: any;
+}
+
+export interface CSSOMAddon {
+    /**
+     * @param selector CSS rule selector string.
+     * @param prelude Media query at-rule prelude string.
+     */
+    createRule(selector: string, prelude?: string): CSSOMRule;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,36 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    // CSSOM support only browser environment.
+    if (!renderer.client) return;
+
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('cssom', renderer, ['sh']);
+    }
+
+    // Style sheet for media queries.
+    document.head.appendChild(renderer.msh = document.createElement('style'));
+
+    renderer.createRule = function (selector, prelude) {
+        var rawCss = selector + '{}';
+        if (prelude) rawCss = prelude + '{' + rawCss + '}';
+        var sheet = prelude ? renderer.msh.sheet : renderer.sh.sheet;
+        var index = sheet.insertRule(rawCss, sheet.cssRules.length);
+        var rule = (sheet.cssRules || sheet.rules)[index];
+
+        // Keep track of `index` where rule was inserted in the sheet. This is
+        // needed for rule deletion.
+        rule.index = index;
+
+        if (prelude) {
+            // If rule has media query (it has prelude), move style (CSSStyleDeclaration)
+            // object to the "top" to normalize it with a rule without the media
+            // query, so that both rules have `.style` property available.
+            var selectorRule = (rule.cssRules || rule.rules)[0];
+            rule.style = selectorRule.style;
+            rule.styleMap = selectorRule.styleMap;
+        }
+
+        return rule;
+    };
+};
@@ -0,0 +1,7 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface DecoratorAddon {
+    css;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,43 @@
+'use strict';
+
+var transformComponentStatic = require('./util/transformComponentStatic');
+var transformComponentDynamic = require('./util/transformComponentDynamic');
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('css', renderer, ['rule', 'cache']);
+    }
+
+    renderer.css = function (a, b) {
+        var isComponent = a && a.prototype && a.prototype.render;
+
+        // Static class decorator.
+        if (isComponent) {
+            if (a.css) transformComponentStatic(renderer, a.prototype, a.css);
+
+            var componentWillMount_ = a.prototype.componentWillMount;
+
+            a.prototype.componentWillMount = function () {
+                if (this.css) transformComponentDynamic(renderer, a, this.css.bind(this));
+                if (componentWillMount_) componentWillMount_.apply(this);
+            };
+
+            return a;
+        }
+
+        return function (instanceOrComp, key, descriptor) {
+            if (typeof key === 'string') {
+                // .render() method decorator
+                var Comp = instanceOrComp.constructor;
+
+                transformComponentDynamic(renderer, Comp, a);
+                descriptor.value = Comp.prototype.render;
+
+                return descriptor;
+            }
+
+            // Class decorator
+            transformComponentStatic(renderer, instanceOrComp.prototype, a, b);
+        };
+    };
+};
@@ -0,0 +1,8 @@
+import {CssLikeObject} from '../types/common';
+import {NanoRenderer} from '../types/nano';
+
+export interface DruleAddon {
+    drule: (css: CssLikeObject, block?: string) => (css?: CssLikeObject) => string;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,27 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('drule', renderer, ['rule', 'cache']);
+    }
+
+    renderer.drule = function (styles, block) {
+        var className = renderer.rule(styles, block);
+
+        var closure = function (dynamicStyles) {
+            if (!dynamicStyles) {
+                return className;
+            }
+
+            var dynamicClassName = renderer.cache(dynamicStyles);
+
+            return className + dynamicClassName;
+        };
+
+        closure.toString = function () {
+            return className;
+        };
+
+        return closure;
+    };
+};
@@ -0,0 +1,8 @@
+import {NanoRenderer} from '../types/nano';
+import {CssLikeObject} from '../types/common';
+
+export interface DsheetAddon {
+    dsheet(map: object, block?: string): object;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,36 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('dsheet', renderer, ['sheet', 'cache']);
+    }
+
+    renderer.dsheet = function (map, block) {
+        var styles = renderer.sheet(map, block);
+        var closures = {};
+
+        var createClosure = function (elementModifier) {
+            var closure = function (dynamicStyles) {
+                if (!dynamicStyles) {
+                    return styles[elementModifier];
+                }
+
+                var dynamicClassName = renderer.cache(dynamicStyles);
+
+                return styles[elementModifier] + dynamicClassName;
+            };
+
+            closure.toString = function () {
+                return styles[elementModifier];
+            };
+
+            return closure;
+        };
+
+        for (var elementModifier in map) {
+            closures[elementModifier] = createClosure(elementModifier);
+        }
+
+        return closures;
+    };
+};
@@ -0,0 +1,614 @@
+import * as CSS from 'csstype';
+import {NanoRenderer} from '../types/nano';
+
+type TLength = string | number;
+
+export interface EmmetAddon {
+    // Visual Formatting; //
+    /**
+     * Short for `position` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pos?: CSS.Property.Position;
+    /**
+     * Short for `top` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    t?: CSS.Property.Top<TLength>;
+    /**
+     * Short for `right` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    r?: CSS.Property.Right<TLength>;
+    /**
+     * Short for `bottom` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    b?: CSS.Property.Bottom<TLength>;
+    /**
+     * Short for `left` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    l?: CSS.Property.Left<TLength>;
+    /**
+     * Short for `z-index` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    z?: CSS.Property.ZIndex;
+    /**
+     * Short for `float` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fl?: CSS.Property.Float;
+    /**
+     * Short for `clear` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    cl?: CSS.Property.Clear;
+    /**
+     * Short for `display` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    d?: CSS.Property.Display;
+    /**
+     * Short for `visibility` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    v?: CSS.Property.Visibility;
+    /**
+     * Short for `overflow` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ov?: CSS.Property.Overflow;
+    /**
+     * Short for `overflow-x` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ovx?: CSS.Property.OverflowX;
+    /**
+     * Short for `overflow-y` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ovy?: CSS.Property.OverflowY;
+    /**
+     * Short for `overflow-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ovs?: CSS.Property.MsOverflowStyle;
+    /**
+     * Short for `zoom` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    zm?: CSS.Property.Zoom;
+    /**
+     * Short for `clip` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    cp?: CSS.Property.Clip;
+    /**
+     * Short for `resize` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    rsz?: CSS.Property.Resize;
+    /**
+     * Short for `cursor` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    cur?: CSS.Property.Cursor;
+    // Margin & Padding; //
+    /**
+     * Short for `margin` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    m?: CSS.Property.Margin<TLength>;
+    /**
+     * Short for `margin-top` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    mt?: CSS.Property.MarginTop<TLength>;
+    /**
+     * Short for `margin-right` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    mr?: CSS.Property.MarginRight<TLength>;
+    /**
+     * Short for `margin-bottom` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    mb?: CSS.Property.MarginBottom<TLength>;
+    /**
+     * Short for `margin-left` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ml?: CSS.Property.MarginLeft<TLength>;
+    /**
+     * Short for `padding` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    p?: CSS.Property.Padding<TLength>;
+    /**
+     * Short for `paddin-top` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pt?: CSS.Property.PaddingTop<TLength>;
+    /**
+     * Short for `padding-right` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pr?: CSS.Property.PaddingRight<TLength>;
+    /**
+     * Short for `padding-bottom` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pb?: CSS.Property.PaddingBottom<TLength>;
+    /**
+     * Short for `padding-left` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    pl?: CSS.Property.PaddingLeft<TLength>;
+    // Box Sizing; //
+    /**
+     * Short for `box-sizing` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bxz?: CSS.Property.BoxSizing;
+    /**
+     * Short for `box-shadow` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bxsh?: CSS.Property.BoxShadow;
+    /**
+     * Short for `width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    w?: CSS.Property.Width<TLength>;
+    /**
+     * Short for `height` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    h?: CSS.Property.Height<TLength>;
+    /**
+     * Short for `max-width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    maw?: CSS.Property.MaxWidth<TLength>;
+    /**
+     * Short for `max-height` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    mah?: CSS.Property.MaxHeight<TLength>;
+    /**
+     * Short for `min-width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    miw?: CSS.Property.MinWidth<TLength>;
+    /**
+     * Short for `min-height` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    mih?: CSS.Property.MinHeight<TLength>;
+    // Font; //
+    /**
+     * Short for `font` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    f?: CSS.Property.Font;
+    /**
+     * Short for `font-weight` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fw?: CSS.Property.FontWeight;
+    /**
+     * Short for `font-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fs?: CSS.Property.FontStyle;
+    /**
+     * Short for `font-variant` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fv?: CSS.Property.FontVariant;
+    /**
+     * Short for `font-size` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fz?: CSS.Property.FontSize<TLength>;
+    /**
+     * Short for `font-family` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ff?: CSS.Property.FontFamily;
+    /**
+     * Short for `font-stretch` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fst?: CSS.Property.FontStretch;
+
+    // Text; //
+    /**
+     * Short for `vertical-align` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    va?: CSS.Property.VerticalAlign<TLength>;
+    /**
+     * Short for `text-align` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ta?: CSS.Property.TextAlign;
+    /**
+     * Short for `text-decoration` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    td?: CSS.Property.TextDecoration<TLength>;
+    /**
+     * Short for `text-emphasis` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    te?: CSS.Property.TextEmphasis;
+    /**
+     * Short for `text-indent` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ti?: CSS.Property.TextIndent<TLength>;
+    /**
+     * Short for `text-justify` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    tj?: CSS.Property.TextJustify;
+    /**
+     * Short for `text-transform` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    tt?: CSS.Property.TextTransform;
+    /**
+     * Short for `text-shadow` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    tsh?: CSS.Property.TextShadow;
+    /**
+     * Short for `line-height` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    lh?: CSS.Property.LineHeight<TLength>;
+    /**
+     * Short for `letter-spacing` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    lts?: CSS.Property.LetterSpacing<TLength>;
+    /**
+     * Short for `white-space` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    whs?: CSS.Property.WhiteSpace;
+    /**
+     * Short for `word-break` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    wob?: CSS.Property.WordBreak;
+    /**
+     * Short for `word-spacing` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    wos?: CSS.Property.WordSpacing<TLength>;
+    /**
+     * Short for `word-wrap` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    wow?: CSS.Property.WordWrap;
+    // Background; //
+    /**
+     * Short for `background` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bg?: CSS.Property.Background<TLength>;
+    /**
+     * Short for `background-color` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgc?: CSS.Property.BackgroundColor;
+    /**
+     * Short for `background-image` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgi?: CSS.Property.BackgroundImage;
+    /**
+     * Short for `background-repeat` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgr?: CSS.Property.BackgroundRepeat;
+    /**
+     * Short for `background-attachment` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bga?: CSS.Property.BackgroundAttachment;
+    /**
+     * Short for `background-position` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgp?: CSS.Property.BackgroundPosition<TLength>;
+    /**
+     * Short for `background-position-x` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgpx?: CSS.Property.BackgroundPositionX<TLength>;
+    /**
+     * Short for `background-position-y` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgpy?: CSS.Property.BackgroundPositionY<TLength>;
+    /**
+     * Short for `background-clip` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgcp?: CSS.Property.BackgroundClip;
+    /**
+     * Short for `background-origin` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgo?: CSS.Property.BackgroundOrigin;
+    /**
+     * Short for `background-size` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bgsz?: CSS.Property.BackgroundSize<TLength>;
+    // Color; //
+    /**
+     * Short for `color` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    c?: CSS.Property.Color;
+    /**
+     * Short for `opacity` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    op?: CSS.Globals | number;
+    // Generated Content; //
+    /**
+     * Short for `content` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ct?: CSS.Property.Content;
+    /**
+     * Short for `quotes` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    q?: CSS.Property.Quotes;
+    /**
+     * Short for `counter-increment` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    coi?: CSS.Property.CounterIncrement;
+    /**
+     * Short for `counter-reset` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    cor?: CSS.Property.CounterReset;
+    // Outline; //
+    /**
+     * Short for `outline` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ol?: CSS.Property.Outline<TLength>;
+    /**
+     * Short for `outline-offset` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    olo?: CSS.Property.OutlineOffset<TLength>;
+    /**
+     * Short for `outline-width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    olw?: CSS.Property.OutlineWidth<TLength>;
+    /**
+     * Short for `outline-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ols?: CSS.Property.OutlineStyle;
+    /**
+     * Short for `outline-color` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    olc?: CSS.Property.OutlineColor;
+    // Tables; //
+    /**
+     * Short for `table-layout` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    tbl?: CSS.Property.TableLayout;
+    /**
+     * Short for `caption-side` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    cps?: CSS.Property.CaptionSide;
+    /**
+     * Short for `empty-cells` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ec?: CSS.Property.EmptyCells;
+    // Border;
+    /**
+     * Short for `border` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bd?: CSS.Property.Border<TLength>;
+    /**
+     * Short for `position` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdcl?: CSS.Property.BorderCollapse;
+    /**
+     * Short for `position` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdc?: CSS.Property.BorderColor;
+    /**
+     * Short for `position` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdi?: CSS.Property.BorderImage;
+    /**
+     * Short for `border-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bds?: CSS.Property.BorderStyle;
+    /**
+     * Short for `border-width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdw?: CSS.Property.BorderWidth<TLength>;
+    /**
+     * Short for `border-top` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdt?: CSS.Property.BorderTop<TLength>;
+    /**
+     * Short for `border-top-width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdtw?: CSS.Property.BorderTopWidth<TLength>;
+    /**
+     * Short for `border-top-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdts?: CSS.Property.BorderTopStyle;
+    /**
+     * Short for `border-top-color` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdtc?: CSS.Property.BorderTopColor;
+    /**
+     * Short for `border-right` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdr?: CSS.Property.BorderRight<TLength>;
+    /**
+     * Short for `border-right-width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdrw?: CSS.Property.BorderRightWidth<TLength>;
+    /**
+     * Short for `border-right-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdrst?: CSS.Property.BorderRightStyle;
+    /**
+     * Short for `border-right-color` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdrc?: CSS.Property.BorderRightColor;
+    /**
+     * Short for `border-bottom` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdb?: CSS.Property.BorderBottom<TLength>;
+    /**
+     * Short for `border-bottom-width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdbw?: CSS.Property.BorderBottomWidth<TLength>;
+    /**
+     * Short for `border-bottom-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdbs?: CSS.Property.BorderBottomStyle;
+    /**
+     * Short for `border-bottom-color` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdbc?: CSS.Property.BorderBottomColor;
+    /**
+     * Short for `border-left` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdl?: CSS.Property.BorderLeft<TLength>;
+    /**
+     * Short for `border-left-width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdlw?: CSS.Property.BorderLeftWidth<TLength>;
+    /**
+     * Short for `border-left-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdls?: CSS.Property.BorderLeftStyle;
+    /**
+     * Short for `border-left-color` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdlc?: CSS.Property.BorderLeftColor;
+    /**
+     * Short for `border-radius` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdrs?: CSS.Property.BorderRadius<TLength>;
+    /**
+     * Short for `border-top-left-radius` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdtlrs?: CSS.Property.BorderTopLeftRadius<TLength>;
+    /**
+     * Short for `border-top-right-radius` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdtrrs?: CSS.Property.BorderTopRightRadius<TLength>;
+    /**
+     * Short for `border-bottom-right-radius` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdbrrs?: CSS.Property.BorderBottomRightRadius<TLength>;
+    /**
+     * Short for `border-bottom-left-radius` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bdblrs?: CSS.Property.BorderBottomLeftRadius<TLength>;
+    // Lists; //
+    /**
+     * Short for `list-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    lis?: CSS.Property.ListStyle;
+    /**
+     * Short for `list-style-position` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    lisp?: CSS.Property.ListStylePosition;
+    /**
+     * Short for `list-style-type` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    list?: CSS.Property.ListStyleType;
+    /**
+     * Short for `list-style-image` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    lisi?: CSS.Property.ListStyleImage;
+    // Flexbox Parent/Child Properties; //
+    /**
+     * Short for `align-content` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ac?: CSS.Property.AlignContent;
+    /**
+     * Short for `align-items` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ai?: CSS.Property.AlignItems;
+    /**
+     * Short for `align-self` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    as?: CSS.Property.AlignSelf;
+    /**
+     * Short for `justify-content` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    jc?: CSS.Property.JustifyContent;
+    /**
+     * Short for `flex` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fx?: CSS.Property.Flex<TLength>;
+    /**
+     * Short for `flex-basis` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fxb?: CSS.Property.FlexBasis<TLength>;
+    /**
+     * Short for `flex-direction` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fxd?: CSS.Property.FlexDirection;
+    /**
+     * Short for `flex-flow` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fxf?: CSS.Property.FlexFlow;
+    /**
+     * Short for `flex-grow` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fxg?: CSS.Globals | number;
+    /**
+     * Short for `position` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fxs?: CSS.Globals | number;
+    /**
+     * Short for `flex-wrap` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    fxw?: CSS.Property.FlexWrap;
+    /**
+     * Short for `order` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ord?: CSS.Globals | number;
+    // CSS Grid Layout; //
+    /**
+     * Short for `columns` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    colm?: CSS.Property.Columns<TLength>;
+    /**
+     * Short for `column-count` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    colmc?: CSS.Property.ColumnCount;
+    /**
+     * Short for `column-fill` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    colmf?: CSS.Property.ColumnFill;
+    /**
+     * Short for `column-gap` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    colmg?: CSS.Property.ColumnGap<TLength>;
+    /**
+     * Short for `column-rule` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    colmr?: CSS.Property.ColumnRule<TLength>;
+    /**
+     * Short for `column-rule-color` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    colmrc?: CSS.Property.ColumnRuleColor;
+    /**
+     * Short for `column-rule-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    colmrs?: CSS.Property.ColumnRuleStyle;
+    /**
+     * Short for `column-rule-width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    colmrw?: CSS.Property.ColumnRuleWidth<TLength>;
+    /**
+     * Short for `column-span` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    colms?: CSS.Property.ColumnSpan;
+    /**
+     * Short for `column-width` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    colmw?: CSS.Property.ColumnWidth<TLength>;
+    // CSS Transitions; //
+    /**
+     * Short for `transform` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    trf?: CSS.Property.Transform;
+    /**
+     * Short for `transform-origin` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    trfo?: CSS.Property.TransformOrigin<TLength>;
+    /**
+     * Short for `transform-style` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    trfs?: CSS.Property.TransformStyle;
+    /**
+     * Short for `transition` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    trs?: CSS.Property.Transition;
+    /**
+     * Short for `transition-delay` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    trsde?: CSS.Globals | number;
+    /**
+     * Short for `transition-duration` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    trsdu?: CSS.Globals | number;
+    /**
+     * Short for `transition-property` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    trsp?: CSS.Property.TransitionProperty;
+    /**
+     * Short for `transition-timing-function` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    trstf?: CSS.Property.TransitionTimingFunction;
+    // Others; //
+    /**
+     * Short for `backface-visibility` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    bfv?: CSS.Property.BackfaceVisibility;
+    /**
+     * Short for `text-overflow` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    tov?: CSS.Property.TextOverflow;
+    /**
+     * Short for `orientation` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    ori?: CSS.AtRule.Orientation;
+    /**
+     * Short for `user-select` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
+     */
+    us?: CSS.Property.UserSelect;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,177 @@
+'use strict';
+
+var emmet = (exports.emmet = {
+    // Visual Formatting;
+    pos: 'position',
+    t: 'top',
+    r: 'right',
+    b: 'bottom',
+    l: 'left',
+    z: 'z-index',
+    fl: 'float',
+    cl: 'clear',
+    d: 'display',
+    v: 'visibility',
+    ov: 'overflow',
+    ovx: 'overflow-x',
+    ovy: 'overflow-y',
+    ovs: 'overflow-style',
+    zm: 'zoom',
+    cp: 'clip',
+    rsz: 'resize',
+    cur: 'cursor',
+    // Margin & Padding;
+    m: 'margin',
+    mt: 'margin-top',
+    mr: 'margin-right',
+    mb: 'margin-bottom',
+    ml: 'margin-left',
+    p: 'padding',
+    pt: 'padding-top',
+    pr: 'padding-right',
+    pb: 'padding-bottom',
+    pl: 'padding-left',
+    // Box Sizing;
+    bxz: 'box-sizing',
+    bxsh: 'box-shadow',
+    w: 'width',
+    h: 'height',
+    maw: 'max-width',
+    mah: 'max-height',
+    miw: 'min-width',
+    mih: 'min-height',
+    // Font;
+    f: 'font',
+    fw: 'font-weight',
+    fs: 'font-style',
+    fv: 'font-variant',
+    fz: 'font-size',
+    ff: 'font-family',
+    fsm: 'font-smooth',
+    fst: 'font-stretch',
+    // Text;
+    va: 'vertical-align',
+    ta: 'text-align',
+    td: 'text-decoration',
+    te: 'text-emphasis',
+    ti: 'text-indent',
+    tj: 'text-justify',
+    tt: 'text-transform',
+    tsh: 'text-shadow',
+    lh: 'line-height',
+    lts: 'letter-spacing',
+    whs: 'white-space',
+    wob: 'word-break',
+    wos: 'word-spacing',
+    wow: 'word-wrap',
+    // Background;
+    bg: 'background',
+    bgc: 'background-color',
+    bgi: 'background-image',
+    bgr: 'background-repeat',
+    bga: 'background-attachment',
+    bgp: 'background-position',
+    bgpx: 'background-position-x',
+    bgpy: 'background-position-y',
+    bgcp: 'background-clip',
+    bgo: 'background-origin',
+    bgsz: 'background-size',
+    // Color;
+    c: 'color',
+    op: 'opacity',
+    // Generated Content;
+    ct: 'content',
+    q: 'quotes',
+    coi: 'counter-increment',
+    cor: 'counter-reset',
+    // Outline;
+    ol: 'outline',
+    olo: 'outline-offset',
+    olw: 'outline-width',
+    ols: 'outline-style',
+    olc: 'outline-color',
+    // Tables;
+    tbl: 'table-layout',
+    cps: 'caption-side',
+    ec: 'empty-cells',
+    // Border;
+    bd: 'border',
+    bdcl: 'border-collapse',
+    bdc: 'border-color',
+    bdi: 'border-image',
+    bds: 'border-style',
+    bdw: 'border-width',
+    bdt: 'border-top',
+    bdtw: 'border-top-width',
+    bdts: 'border-top-style',
+    bdtc: 'border-top-color',
+    bdr: 'border-right',
+    bdrw: 'border-right-width',
+    bdrst: 'border-right-style',
+    bdrc: 'border-right-color',
+    bdb: 'border-bottom',
+    bdbw: 'border-bottom-width',
+    bdbs: 'border-bottom-style',
+    bdbc: 'border-bottom-color',
+    bdl: 'border-left',
+    bdlw: 'border-left-width',
+    bdls: 'border-left-style',
+    bdlc: 'border-left-color',
+    bdrs: 'border-radius',
+    bdtlrs: 'border-top-left-radius',
+    bdtrrs: 'border-top-right-radius',
+    bdbrrs: 'border-bottom-right-radius',
+    bdblrs: 'border-bottom-left-radius',
+    // Lists;
+    lis: 'list-style',
+    lisp: 'list-style-position',
+    list: 'list-style-type',
+    lisi: 'list-style-image',
+    // Flexbox Parent/Child Properties;
+    ac: 'align-content',
+    ai: 'align-items',
+    as: 'align-self',
+    jc: 'justify-content',
+    fx: 'flex',
+    fxb: 'flex-basis',
+    fxd: 'flex-direction',
+    fxf: 'flex-flow',
+    fxg: 'flex-grow',
+    fxs: 'flex-shrink',
+    fxw: 'flex-wrap',
+    ord: 'order',
+    // CSS Grid Layout;
+    colm: 'columns',
+    colmc: 'column-count',
+    colmf: 'column-fill',
+    colmg: 'column-gap',
+    colmr: 'column-rule',
+    colmrc: 'column-rule-color',
+    colmrs: 'column-rule-style',
+    colmrw: 'column-rule-width',
+    colms: 'column-span',
+    colmw: 'column-width',
+    // CSS Transitions;
+    trf: 'transform',
+    trfo: 'transform-origin',
+    trfs: 'transform-style',
+    trs: 'transition',
+    trsde: 'transition-delay',
+    trsdu: 'transition-duration',
+    trsp: 'transition-property',
+    trstf: 'transition-timing-function',
+    // Others;
+    bfv: 'backface-visibility',
+    tov: 'text-overflow',
+    mar: 'max-resolution',
+    mir: 'min-resolution',
+    ori: 'orientation',
+    us: 'user-select',
+});
+
+exports.addon = function(renderer) {
+    var originalDecl = renderer.decl;
+    renderer.decl = function(key, value) {
+        return originalDecl(emmet[key] || key, value);
+    };
+};
@@ -0,0 +1,5 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface ExtractAddon {}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,59 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (renderer.client) {
+        console.error(
+            'You are running nano-css "extract" addon in browser. ' +
+            'You should use it ONLY on server and ONLY at build time.'
+        );
+
+        return;
+    }
+
+    var sheet = renderer.sheet;
+
+    // eslint-disable-next-line no-unused-vars
+    var dummy;
+
+    // Evaluate all lazy-evaluated sheet() styles.
+    if (sheet) {
+        renderer.sheet = function (map) {
+            var styles = sheet.apply(this, arguments);
+
+            for (var name in map) dummy = styles[name];
+
+            return styles;
+        };
+    }
+
+    var jsx = renderer.jsx;
+
+    // Render jsx component once to extract its static CSS.
+    if (jsx) {
+        renderer.jsx = function () {
+            var jsxComponent = jsx.apply(this, arguments);
+
+            process.nextTick(function () {
+                jsxComponent(jsxComponent.defaultProps || {});
+            });
+
+            return jsxComponent;
+        };
+    }
+
+    var style = renderer.style;
+
+    // Render styled component once with default props
+    // to extract its static CSS and "default" dynamic CSS.
+    if (style) {
+        renderer.style = function () {
+            var styledComponent = style.apply(this, arguments);
+
+            process.nextTick(function () {
+                styledComponent(styledComponent.defaultProps || {});
+            });
+
+            return styledComponent;
+        };
+    }
+};
@@ -0,0 +1,8 @@
+import {NanoRenderer} from '../types/nano';
+import {CssLikeObject} from '../types/common';
+
+export interface GlobalAddon {
+    global(css: CssLikeObject);
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,19 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('global', renderer, ['put']);
+    }
+
+    var selector = renderer.selector;
+
+    renderer.selector = function (parent, current) {
+        if (parent.indexOf(':global') > -1) parent = '';
+
+        return selector(parent, current);
+    };
+
+    renderer.global = function (css) {
+        return renderer.put('', css);
+    };
+};
@@ -0,0 +1,8 @@
+import {NanoRenderer} from '../types/nano';
+import {CssLikeObject} from '../types/common';
+
+export interface GoogleFontAddon {
+    googleFont(font: string, weights: number | string | (number | string)[], subsets: string | string[]);
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,43 @@
+'use strict';
+
+function createUrl (font, weights, subsets) {
+    var params = '?family=' + encodeURIComponent(font);
+
+    if (weights) {
+        if (!(weights instanceof Array))
+            weights = [weights];
+
+        params += ':' + weights.join(',');
+    }
+
+    if (subsets) {
+        if (!(subsets instanceof Array))
+            subsets = [subsets];
+
+        params += '&subset=' + subsets.join(',');
+    }
+
+    return 'https://fonts.googleapis.com/css' + params;
+}
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('hydrate', renderer, ['put']);
+    }
+
+    if (renderer.client) {
+        renderer.googleFont = function (font, weights, subsets) {
+            var el = document.createElement('link');
+
+            el.href = createUrl(font, weights, subsets);
+            el.rel = 'stylesheet';
+            el.type = 'text/css';
+
+            document.head.appendChild(el);
+        };
+    } else {
+        renderer.googleFont = function (font, weights, subsets) {
+            renderer.putRaw("@import url('" + createUrl(font, weights, subsets) + "');");
+        };
+    }
+};
@@ -0,0 +1,7 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface HydrateAddon {
+    hydrate(sh: HTMLStyleElement);
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,28 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('hydrate', renderer, ['put']);
+    }
+
+    var hydrated = {};
+
+    renderer.hydrate = function (sh) {
+        var cssRules = sh.cssRules || sh.sheet.cssRules;
+
+        for (var i = 0; i < cssRules.length; i++)
+            hydrated[cssRules[i].selectorText] = 1;
+    };
+
+    if (renderer.client) {
+        if (renderer.sh) renderer.hydrate(renderer.sh);
+
+        var put = renderer.put;
+
+        renderer.put = function (selector, css) {
+            if (selector in hydrated) return;
+
+            put(selector, css);
+        };
+    }
+};
@@ -0,0 +1,27 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('hyperstyle', renderer, ['sheet']);
+    }
+
+    renderer.hyperstyle = function (map, block) {
+        var styles = renderer.sheet(map, block);
+
+        return function (type, props) {
+            if (props) {
+                var styleName = props.styleName;
+
+                if (styleName) {
+                    var className = styles[styleName];
+
+                    if (className) {
+                        props.className = (props.className || '') + className;
+                    }
+                }
+            }
+
+            return renderer.h.apply(null, arguments);
+        };
+    };
+};
@@ -0,0 +1,38 @@
+'use strict';
+
+function hasImportant (rawDecl) {
+    var parts = rawDecl.split(' ');
+
+    for (var i = 0; i < parts.length; i++) {
+        var part = parts[i].trim();
+
+        if (part === '!important') return true;
+    }
+
+    return false;
+}
+
+exports.addon = function (renderer) {
+    var decl = renderer.decl;
+
+    renderer.decl = function (prop, value) {
+        var rawDecl = decl(prop, value);
+        var decls = rawDecl.split(';');
+        var css = '';
+
+        for (var i = 0; i < decls.length; i++) {
+            rawDecl = decls[i].trim();
+
+            if (!rawDecl) continue;
+
+            // Don't add "!important" if it is already added.
+            if (!hasImportant(rawDecl)) {
+                css += rawDecl + ' !important;';
+            } else {
+                css += rawDecl + ';';
+            }
+        }
+
+        return css;
+    };
+};
@@ -0,0 +1,60 @@
+'use strict';
+
+var addonCache = require('./cache').addon;
+
+exports.addon = function (renderer) {
+    if (!renderer.cache) {
+        addonCache(renderer);
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('jsx', renderer, ['rule', 'cache']);
+    }
+
+    renderer.jsx = function (fn, styles, block) {
+        var className;
+        var isElement = typeof fn === 'string';
+
+        // In dev mode emit CSS immediately so correct sourcemaps can be generated.
+        if (process.env.NODE_ENV !== 'production') {
+            className = renderer.rule(styles, block);
+        }
+
+        var Component = function (props) {
+            if (!className) {
+                className = renderer.rule(styles, block);
+            }
+
+            var copy = props;
+            var $as = copy.$as;
+            var $ref = copy.$ref;
+
+            if (process.env.NODE_ENV !== 'production') {
+                copy = renderer.assign({}, props);
+            }
+
+            var dynamicClassName = renderer.cache(props.css);
+            delete copy.css;
+            delete copy.$as;
+
+            if (isElement || $as) {
+                delete copy.$ref;
+                copy.ref = $ref;
+            }
+
+            copy.className = (props.className || '') + className + dynamicClassName;
+
+            return (isElement || $as)
+                ? renderer.h($as || fn, copy)
+                : fn(copy);
+        };
+
+        if (process.env.NODE_ENV !== 'production') {
+            if (block) {
+                Component.displayName = 'jsx(' + block + ')';
+            }
+        }
+
+        return Component;
+    };
+};
@@ -0,0 +1,34 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface KeyframesAddon {
+    /**
+     * @param frames Map of keyframes.
+     * @param block Optional semantic name.
+     *
+     * Returns a generated animation name.
+     *
+     * ```js
+     * const animationName = nano.keyframes({
+     *     from: {
+     *         left: '0%',
+     *     },
+     *     to: {
+     *         left: '100%',
+     *     },
+     * });
+     * ```
+     *
+     * You need to install [`keyframes()` addon]()https://github.com/streamich/nano-css/blob/master/docs/keyframes.md) to use this method.
+     *
+     * ```js
+     * import {create} from 'nano-css';
+     * import {addon as addonKeyframes} from 'nano-css/addon/keyframes';
+     *
+     * const nano = create();
+     * addonKeyframes(nano);
+     * ```
+     */
+    keyframes: (frames: object, block?: string) => string;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,61 @@
+'use strict';
+
+exports.addon = function (renderer, config) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('keyframes', renderer, ['putRaw', 'put']);
+    }
+
+    config = renderer.assign({
+        prefixes: ['-webkit-', '-moz-', '-o-', ''],
+    }, config || {});
+
+    var prefixes = config.prefixes;
+
+    if (renderer.client) {
+        // Craete @keyframe Stylesheet `ksh`.
+        document.head.appendChild(renderer.ksh = document.createElement('style'));
+    }
+
+    var putAt = renderer.putAt;
+
+    renderer.putAt = function (__, keyframes, prelude) {
+        // @keyframes
+        if (prelude[1] === 'k') {
+            var str = '';
+
+            for (var keyframe in keyframes) {
+                var decls = keyframes[keyframe];
+                var strDecls = '';
+
+                for (var prop in decls)
+                    strDecls += renderer.decl(prop, decls[prop]);
+
+                str += keyframe + '{' + strDecls + '}';
+            }
+
+            for (var i = 0; i < prefixes.length; i++) {
+                var prefix = prefixes[i];
+                var rawKeyframes = prelude.replace('@keyframes', '@' + prefix + 'keyframes') + '{' + str + '}';
+
+                if (renderer.client) {
+                    renderer.ksh.appendChild(document.createTextNode(rawKeyframes));
+                } else {
+                    renderer.putRaw(rawKeyframes);
+                }
+            }
+
+            return;
+        }
+
+        putAt(__, keyframes, prelude);
+    };
+
+    renderer.keyframes = function (keyframes, block) {
+        if (!block) block = renderer.hash(keyframes);
+        block = renderer.pfx + block;
+
+        renderer.putAt('', keyframes, '@keyframes ' + block);
+
+        return block;
+    };
+};
@@ -0,0 +1,26 @@
+'use strict';
+
+exports.addon = function (renderer, limit) {
+    limit = limit || 50000;
+
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('limit', renderer, ['putRaw']);
+    }
+
+    if (!renderer.client) {
+        var putRaw = renderer.putRaw;
+
+        renderer.putRaw = function (rawCssRule) {
+            if (renderer.raw.length + rawCssRule.length > limit) {
+                /* eslint-disable */
+                console.info('CSS was not injected, because total CSS would go over ' + limit + ' byte limit.');
+                console.log(rawCssRule);
+                /* eslint-enable */
+
+                return;
+            }
+
+            putRaw(rawCssRule);
+        };
+    }
+};
@@ -0,0 +1,37 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    renderer.selector = function (parentSelectors, selector) {
+        var parents = parentSelectors.split(',');
+        var result = [];
+        var selectors = selector.split(',');
+        var len1 = parents.length;
+        var len2 = selectors.length;
+        var i, j, sel, pos, parent, replacedSelector;
+
+        for (i = 0; i < len2; i++) {
+            sel = selectors[i];
+            pos = sel.indexOf('&');
+
+            if (pos > -1) {
+                for (j = 0; j < len1; j++) {
+                    parent = parents[j];
+                    replacedSelector = sel.replace(/&/g, parent);
+                    result.push(replacedSelector);
+                }
+            } else {
+                for (j = 0; j < len1; j++) {
+                    parent = parents[j];
+
+                    if (parent) {
+                        result.push(parent + ' ' + sel);
+                    } else {
+                        result.push(sel);
+                    }
+                }
+            }
+        }
+
+        return result.join(',');
+    };
+};
@@ -0,0 +1,57 @@
+'use strict';
+
+var addonCssom = require('./cssom').addon;
+
+exports.addon = function (renderer) {
+    if (!renderer.putRule) {
+        addonCssom(renderer);
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('pipe', renderer, ['createRule']);
+    }
+
+    var counter = 0;
+
+    renderer.pipe = function () {
+        var rules = {};
+        var className = renderer.pfx + 'pipe-' + (counter++).toString(36);
+        var attr = 'data-' + className;
+        var scope1 = '.' + className;
+        var scope2 = '[' + attr + ']';
+
+        var obj = {
+            attr: attr,
+            className: className,
+            css: function (css) {
+                for (var selectorTemplate in css) {
+                    var declarations = css[selectorTemplate];
+                    var rule = rules[selectorTemplate];
+
+                    if (!rule) {
+                        var selector = selectorTemplate.replace('&', scope1) + ',' + selectorTemplate.replace('&', scope2);
+
+                        rules[selectorTemplate] = rule = renderer.putRule(selector);
+                    }
+
+                    for (var prop in declarations)
+                        rule.style.setProperty(prop, declarations[prop]);
+                }
+
+                // GC
+                for (var selectorTemplate2 in rules) {
+                    if (!(selectorTemplate2 in css)) {
+                        rules[selectorTemplate2].remove();
+                        delete rules[selectorTemplate2];
+                    }
+                }
+            },
+            remove: function () {
+                for (var selectorTemplate in rules)
+                    renderer.sh.deleteRule(rule.index);
+            }
+        };
+
+        return obj;
+    };
+};
@@ -0,0 +1,79 @@
+'use strict';
+
+var prefix = require('inline-style-prefixer').prefix;
+
+var CAMEL_REGEX = /-[a-z\u00E0-\u00F6\u00F8-\u00FE]/g;
+
+var matchCallback = function (match) {
+    return match.slice(1).toUpperCase();
+};
+
+exports.addon = function (renderer) {
+    var decl = renderer.decl;
+    var origPut = renderer.put;
+
+    renderer.camel = function (prop) {
+        return prop.replace(CAMEL_REGEX, matchCallback);
+    };
+
+    renderer.prefix = function (prop, value) {
+        var obj = {};
+        obj[renderer.camel(prop)] = value;
+        obj = prefix(obj);
+
+        var result = {};
+
+        for (var propPrefixed in obj) {
+            value = obj[propPrefixed];
+            if (propPrefixed.slice(0, 2) === 'ms') {
+                propPrefixed = 'M' + propPrefixed.slice(1);
+            }
+            propPrefixed = renderer.kebab(propPrefixed);
+
+            if (value instanceof Array) {
+                result[propPrefixed] = value.join(';' + propPrefixed + ':');
+            } else {
+                result[propPrefixed] = value;
+            }
+        }
+
+        return result;
+    };
+
+    renderer.decl = function (prop, value) {
+        var result = renderer.prefix(prop, value);
+
+        var returned = '';
+        Object.keys(result).forEach(function (key) {
+            var str = decl(key, value);
+            returned += str;
+        });
+
+        return returned;
+    };
+
+    function newPut(selector, decls, atrule) {
+        var indexed = selector.indexOf('::placeholder');
+        if (indexed > -1) {
+            var split = selector.split(',');
+            if (split.length > 1) {
+                split.forEach(function(sp) {
+                    newPut(sp.trim(), decls, atrule);
+                });
+                return;
+            }
+            var bareSelect = selector.substring(0, indexed);
+            [
+                '::-webkit-input-placeholder',
+                '::-moz-placeholder',
+                ':-ms-input-placeholder',
+                ':-moz-placeholder'
+            ].forEach(function(ph) {
+                origPut(bareSelect + ph, decls, atrule);
+            });
+        }
+        origPut(selector, decls, atrule);
+    }
+
+    renderer.put = newPut;
+};
@@ -0,0 +1,87 @@
+'use strict';
+
+var addonPipe = require('./pipe').addon;
+
+// eslint-disable-next-line no-undef
+var sNano = typeof Symbol === 'object' ? Symbol('nano-css') : '@@nano-css';
+
+exports.addon = function (renderer) {
+    if (!renderer.pipe) {
+        addonPipe(renderer);
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('ref', renderer, ['pipe']);
+    }
+
+    renderer.createRef = function () {
+        var pipe = renderer.pipe();
+        var el = null;
+        var ref = function (element) {
+            if (el) el = element;
+            else {
+                el = null;
+                pipe.remove();
+            }
+        };
+        var obj = {ref: ref};
+
+        obj[pipe.attr] = '';
+
+        return function (css) {
+            pipe.css(css);
+            return obj;
+        };
+    };
+
+    renderer.ref = function (css, originalRef) {
+        if (process.env.NODE_ENV !== 'production') {
+            if (originalRef && typeof originalRef !== 'function') {
+                console.error(
+                    'nano-css "ref" function expects argument to be a ref function, "' + (typeof originalRef) + '" provided.'
+                );
+            }
+        }
+
+        var obj = {
+            ref: function (el) {
+                if (originalRef) originalRef(el);
+                if (!el) return;
+
+                var pipe = el[sNano];
+
+                if (!pipe) {
+                    el[sNano] = pipe = renderer.pipe();
+                    el.setAttribute(pipe.attr, '');
+
+                    // Add unmount logic
+
+                    var observer = new MutationObserver(function (mutations) {
+                        for (var i = 0; i < mutations.length; i++) {
+                            var mutation = mutations[i];
+
+                            if (mutation.removedNodes.length) {
+                                var nodes = mutation.removedNodes;
+
+                                for (var j = 0; j < nodes.length; j++) {
+                                    if (nodes[j] === el) {
+                                        pipe.remove();
+                                        delete el[sNano];
+                                        observer.disconnect();
+                                        return;
+                                    }
+                                }
+                            }
+                        }
+                    });
+
+                    observer.observe(el.parentNode, {childList: true});
+                }
+
+                pipe.css(css);
+            }
+        };
+
+        return obj;
+    };
+};
@@ -0,0 +1,24 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('reset-font', renderer, ['rule']);
+    }
+
+    renderer.put('', {
+        'html, body': {
+            fontFamily: '"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",sans-serif',
+            fontWeight: 400,
+            fontSize: '16px',
+
+            '-moz-text-size-adjust': '100%',
+            '-ms-text-size-adjust': '100%',
+            '-webkit-text-size-adjust': '100%',
+            'text-size-adjust': '100%',
+
+            // Makes fonts more smooth/prettier.
+            '-webkit-font-smoothing': 'antialiased',
+            '-moz-osx-font-smoothing': 'grayscale',
+        },
+    });
+};
@@ -0,0 +1,48 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        'html,body,div,span,applet,object,iframe,table,caption,tbody,tfoot,thead,tr,th,td,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,dl,dt,dd,ol,ul,li,fieldset,form,label,legend': {
+            'vertical-align': 'baseline',
+            ff: 'inherit',
+            fw: 'inherit',
+            fs: 'inherit',
+            fz: '100%',
+            out: 0,
+            pad: 0,
+            mar: 0,
+            bd: 0,
+        },
+        ':focus': {
+            out: 0,
+        },
+        body: {
+            bg: 'white',
+            lh: 1,
+            col: 'black',
+        },
+        'ol, ul': {
+            'list-style': 'none',
+        },
+        table: {
+            'border-collapse': 'separate',
+            'border-spacing': 0,
+        },
+        'caption, th, td': {
+            fw: 'normal',
+            ta: 'left',
+        },
+        'blockquote:before, blockquote:after, q:before, q:after': {
+            content: '""',
+        },
+        'blockquote, q': {
+            quotes: '"" ""',
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,44 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        'body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td': {
+            pad: 0,
+            mar: 0,
+        },
+        'fieldset, img': {
+            bd: 0,
+        },
+        table: {
+            'border-collapse': 'collapse',
+            'border-spacing': 0,
+        },
+        'ol, ul': {
+            'list-style': 'none',
+        },
+        'address, caption, cite, code, dfn, em, strong, th, var': {
+            fw: 'normal',
+            fs: 'normal',
+        },
+        'caption, th': {
+            ta: 'left',
+        },
+        'h1, h2, h3, h4, h5, h6': {
+            fw: 'normal',
+            fs: '100%',
+        },
+        'q:before, q:after': {
+            con: "''",
+        },
+        'abbr, acronym': {
+            bd: 0,
+        },
+    };
+
+    renderer.put('', css);
+};
+
@@ -0,0 +1,16 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        '*': {
+            pad: 0,
+            mar: 0,
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,17 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        '*': {
+            pad: 0,
+            mar: 0,
+            bd: 0,
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,18 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        '*': {
+            pad: 0,
+            mar: 0,
+            bd: 0,
+            out: 0,
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,83 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    // Adopted from https://raw.githubusercontent.com/necolas/normalize.css/master/normalize.css
+    var css = {
+        html: {
+            lineHeight: 1.15,
+            '-webkit-text-size-adjust': '100%',
+        },
+        body: {
+            margin: 0,
+        },
+        h1: {
+            fontSize: '2em',
+            margin: '0.67em 0',
+        },
+        hr: {
+            boxSizing: 'content-box',
+            height: 0,
+            overflow: 'visible',
+        },
+        pre: {
+            fontFamily: 'monospace, monospace',
+            fontSize: '1em',
+        },
+        'b,strong': {
+            fontWeight: 'bolder',
+        },
+        'code,kbd,samp': {
+            fontFamily: 'monospace, monospace',
+            fontSize: '1em',
+        },
+        'small': {
+            fontSize: '80%',
+        },
+        'sub,sup': {
+            fontSize: '75%',
+            lineHeight: 0,
+            position: 'relative',
+            verticalAlign: 'baseline',
+        },
+        sub: {
+            bottom: '-0.25em',
+        },
+        sup: {
+            top: '-0.5em',
+        },
+        'button,input,optgroup,select,textarea': {
+            fontFamily: 'inherit',
+            fontSize: '100%',
+            lineHeight: 1.15,
+            margin: 0,
+        },
+        'button,input': {
+            overflow: 'visible',
+        },
+        'button,select': {
+            textTransform: 'none',
+        },
+        fieldset: {
+            padding: '0.35em 0.75em 0.625em',
+        },
+        legend: {
+            boxSizing: 'border-box',
+            display: 'table',
+            maxWidth: '100%',
+            padding: 0,
+            whiteSpace: 'normal',
+        },
+        progress: {
+            verticalAlign: 'baseline',
+        },
+        summary: {
+            display: 'list-item',
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,25 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        'html, body': {
+            pad: 0,
+            mar: 0,
+        },
+        html: {
+            fz: '1em',
+        },
+        body: {
+            fz: '100%',
+        },
+        'a img, :link img, :visited img': {
+            bd: 0,
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,42 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        'body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,table,th,td,embed,object': {
+            pad: 0,
+            mar: 0,
+        },
+        table: {
+            'border-collapse': 'collapse',
+            'border-spacing': 0,
+        },
+        'fieldset,img,abbr': {
+            bd: 0,
+        },
+        'address,caption,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,strong,th,var': {
+            fw: 'normal',
+            fs: 'normal',
+        },
+        ul: {
+            'list-style': 'none',
+        },
+        'caption,th': {
+            ta: 'left',
+        },
+        'h1,h2,h3,h4,h5,h6': {
+            fz: '1.0em',
+        },
+        'q:before,q:after': {
+            con: '""',
+        },
+        'a,ins': {
+            td: 'none',
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,34 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        '*': {
+            'vertical-align': 'baseline',
+            ff: 'inherit',
+            fs: 'inherit',
+            fz: '100%',
+            bd: 'none',
+            pad: 0,
+            mar: 0,
+        },
+        body: {
+            pad: '5px',
+        },
+        'h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl': {
+            mar: '20px 0',
+        },
+        'li, dd, blockquote': {
+            marl: '40px',
+        },
+        table: {
+            'border-collapse': 'collapse',
+            'border-spacing': 0,
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,31 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        ':link,:visited': {
+            td: 'none',
+        },
+        'ul,ol': {
+            'list-style': 'none',
+        },
+        'h1,h2,h3,h4,h5,h6,pre,code,p': {
+            fz: '1em',
+        },
+        'ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input': {
+            pad: 0,
+            mar: 0,
+        },
+        'a img,:link img,:visited img': {
+            bd: 'none',
+        },
+        address: {
+            fs: 'normal',
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,75 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        '*': {
+            td: 'none',
+            fz: '1em',
+            out: 'none',
+            pad: 0,
+            mar: 0,
+        },
+        'code,kbd,samp,pre,tt,var,textarea,input,select,isindex,listing,xmp,plaintext': {
+            'white-space': 'normal',
+            fz: '1em',
+            font: 'inherit',
+        },
+        'dfn,i,cite,var,address,em': {
+            fs: 'normal',
+        },
+        'th,b,strong,h1,h2,h3,h4,h5,h6': {
+            fw: 'normal',
+        },
+        'a,img,a img,iframe,form,fieldset,abbr,acronym,object,applet,table': {
+            bd: 'none',
+        },
+        table: {
+            'border-collapse': 'collapse',
+            'border-spacing': 0,
+        },
+        'caption,th,td,center': {
+            'vertical-align': 'top',
+            ta: 'left',
+        },
+        body: {
+            bg: 'white',
+            lh: 1,
+            col: 'black',
+        },
+        q: {
+            quotes: '"" ""',
+        },
+        'ul,ol,dir,menu': {
+            'list-style': 'none',
+        },
+        'sub,sup': {
+            'vertical-align': 'baseline',
+        },
+        a: {
+            col: 'inherit',
+        },
+        hr: {
+            d: 'none',
+        },
+        font: {
+            col: 'inherit !important',
+            font: 'inherit !important',
+        },
+        marquee: {
+            ov: 'inherit !important',
+            '-moz-binding': 'none',
+        },
+        blink: {
+            td: 'none',
+        },
+        nobr: {
+            'white-space': 'normal',
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,23 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        '*': {
+            'vertical-align': 'baseline',
+            fw: 'inherit',
+            ff: 'inherit',
+            fs: 'inherit',
+            fz: '100%',
+            bd: '0 none',
+            out: 0,
+            pad: 0,
+            mar: 0,
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,43 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('../__dev__/warnOnMissingDependencies')('reset', renderer, ['put']);
+    }
+
+    var css = {
+        'body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td': {
+            pad: 0,
+            mar: 0,
+        },
+        table: {
+            'border-collapse': 'collapse',
+            'border-spacing': 0,
+        },
+        'fieldset,img': {
+            bd: 0,
+        },
+        'address,caption,cite,code,dfn,em,strong,th,var': {
+            fw: 'normal',
+            fs: 'normal',
+        },
+        'ol,ul': {
+            'list-style': 'none',
+        },
+        'caption,th': {
+            ta: 'left',
+        },
+        'h1,h2,h3,h4,h5,h6': {
+            fw: 'normal',
+            fz: '100%',
+        },
+        'q:before,q:after': {
+            con: '""',
+        },
+        'abbr,acronym': {
+            bd: 0,
+        },
+    };
+
+    renderer.put('', css);
+};
@@ -0,0 +1,15 @@
+'use strict';
+
+var rtl = require('rtl-css-js').default;
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('rtl', renderer, ['put']);
+    }
+
+    var put = renderer.put;
+
+    renderer.put = function (selector, css) {
+        return put(selector, rtl(css));
+    };
+};
@@ -0,0 +1,26 @@
+import {CssLikeObject} from '../types/common';
+import {NanoRenderer} from '../types/nano';
+
+export interface RuleAddon {
+    /**
+     * You need to install `rule` addon to add this method.
+     *
+     * ```js
+     * import {create} from 'nano-css';
+     * import {addon as addonRule} from 'nano-css/addon/rule';
+     *
+     * const nano = create();
+     * addonRule(nano);
+     *
+     * const className = nano.rule({
+     *   color: 'red',
+     * });
+     * ```
+     *
+     * @param css [CSS-like object](https://github.com/streamich/nano-css/blob/master/docs/put.md#css-like-object).
+     * @param block Optional semantic name of this rule, must be unique.
+     */
+    rule: (css: CssLikeObject, block?: string) => string;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,39 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('rule', renderer, ['put']);
+    }
+
+    var blocks;
+
+    if (process.env.NODE_ENV !== 'production') {
+        blocks = {};
+    }
+
+    renderer.rule = function (css, block) {
+        // Warn user if CSS selectors clash.
+        if (process.env.NODE_ENV !== 'production') {
+            if (block) {
+                if (typeof block !== 'string') {
+                    throw new TypeError(
+                        'nano-css block name must be a string. ' +
+                        'For example, use nano.rule({color: "red", "RedText").'
+                    );
+                }
+
+                if (blocks[block]) {
+                    console.error('Block name "' + block + '" used more than once.');
+                }
+
+                blocks[block] = 1;
+            }
+        }
+
+        block = block || renderer.hash(css);
+        block = renderer.pfx + block;
+        renderer.put('.' + block, css);
+
+        return ' ' + block;
+    };
+};
@@ -0,0 +1,22 @@
+import {CssLikeObject} from '../types/common';
+import {NanoRenderer} from '../types/nano';
+
+export interface SheetAddon {
+    /**
+     * Creates a collection of CSS rules.
+     *
+     * ```js
+     * const classes = sheet({
+     *     wrapper: {
+     *         border: '1px solid red',
+     *     },
+     *     button: {
+     *         color: 'red',
+     *     },
+     * });
+     * ```
+     */
+    sheet: (cssMap: {[s: string]: CssLikeObject}, block?: string) => {[s: string]: string};
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,45 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('sheet', renderer, ['rule']);
+    }
+
+    renderer.sheet = function (map, block) {
+        var result = {};
+
+        if (!block) {
+            block = renderer.hash(map);
+        }
+
+        var onElementModifier = function (elementModifier) {
+            var styles = map[elementModifier];
+
+            if ((process.env.NODE_ENV !== 'production') && renderer.sourcemaps) {
+                // In dev mode emit CSS immediately to generate sourcemaps.
+                result[elementModifier] = renderer.rule(styles, block + '-' + elementModifier);
+            } else {
+                Object.defineProperty(result, elementModifier, {
+                    configurable: true,
+                    enumerable: true,
+                    get: function () {
+                        var classNames = renderer.rule(styles, block + '-' + elementModifier);
+
+                        Object.defineProperty(result, elementModifier, {
+                            value: classNames,
+                            enumerable: true
+                        });
+
+                        return classNames;
+                    },
+                });
+            }
+        };
+
+        for (var elementModifier in map) {
+            onElementModifier(elementModifier);
+        }
+
+        return result;
+    };
+};
@@ -0,0 +1,141 @@
+/* eslint-disable no-invalid-this */
+'use strict';
+
+var atoms = require('./atoms').atoms;
+
+exports.addon = function (renderer, rules) {
+    rules = rules || {};
+
+    var defaultRules = renderer.assign({}, atoms, {
+        s: function (prop, value) {
+            if (prop instanceof Object) {
+                for (var name in prop) {
+                    defaultRules.s.call(this, name, prop[name]);
+                }
+            } else {
+                this[prop] = (value instanceof Object) ? (value.obj || value) : value;
+            }
+        },
+
+        hover: function (value) {
+            defaultRules.s.call(this, ':hover', value);
+        },
+
+        focus: function (value) {
+            defaultRules.s.call(this, ':focus', value);
+        },
+
+        bgWhite: function () {
+            this.backgroundColor = '#fff';
+        },
+
+        bgBlack: function () {
+            this.backgroundColor = '#000';
+        },
+
+        rel: function () {
+            this.position = 'relative';
+        },
+
+        abs: function () {
+            this.position = 'absolute';
+        },
+
+        pointer: function () {
+            this.cursor = 'pointer';
+        },
+
+        inlineBlock: function () {
+            this.display = 'inline-block';
+        },
+
+        bold: function () {
+            this.fontWeight = 'bold';
+        },
+
+        b: function () {
+            this.fontWeight = 'bold';
+        },
+
+        italic: function () {
+            this.fontStyle = 'italic';
+        },
+
+        i: function () {
+            this.fontStyle = 'italic';
+        },
+
+        underline: function () {
+            this.textDecoration = 'underline';
+        },
+
+        u: function () {
+            this.textDecoration = 'underline';
+        },
+    });
+
+    rules = renderer.assign(defaultRules, rules);
+
+    var snake = {};
+
+    var start = function () {
+        var instance = Object.create(snake);
+
+        instance.obj = {};
+        instance.toString = function () {
+            if (process.env.NODE_ENV !== 'production') {
+                require('./__dev__/warnOnMissingDependencies')('snake', renderer, ['cache']);
+            }
+
+            return renderer.cache(instance.obj);
+        };
+        instance.valueOf = instance.toString;
+
+        return instance;
+    };
+
+    var checkStart = function (name, fn) {
+        return function () {
+            if (!this.obj) {
+                var instance = start();
+
+                if (typeof instance[name] === 'function') {
+                    return instance[name].apply(instance, arguments);
+                }
+
+                return instance[name];
+            }
+
+            return fn.apply(this, arguments);
+        };
+    };
+
+    var onRule = function (name) {
+        var rule = rules[name];
+
+        if (typeof rule === 'function') {
+            if (!rule.length) {
+                Object.defineProperty(snake, name, {
+                    get: checkStart(name, function () {
+                        rule.call(this.obj);
+                        return this;
+                    })
+                });
+            } else {
+                snake[name] = checkStart(name, function () {
+                    rule.apply(this.obj, arguments);
+                    return this;
+                });
+            }
+        } else {
+            snake[name] = checkStart(name, function (value) {
+                this.obj['' + rule] = value;
+                return this;
+            });
+        }
+    };
+
+    for (var name in rules) onRule(name);
+
+    renderer.s = snake;
+};
@@ -0,0 +1,96 @@
+'use strict';
+
+var StackTrace = require('stacktrace-js');
+var SourcemapCodec = require('@jridgewell/sourcemap-codec');
+
+function findStackframe (frames) {
+    for (var i = 4; i < frames.length; i++) {
+        if (!frames[i].fileName.match(/addon\/[^.]+\.js/)) {
+            return frames[i];
+        }
+    }
+}
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV === 'production') {
+        // eslint-disable-next-line no-console
+        console.log(
+            'nano-css sourcemaps addon should be installed only in development mode. ' +
+            'Use (process.env.NODE !== "production") to check if you are in development mode.'
+        );
+
+        return;
+    }
+
+    var queue = [];
+    var timeout = null;
+    var sourceCache = {};
+
+    function flush () {
+        timeout = null;
+
+        var sources = [];
+        var segments = [];
+        var rules = [];
+
+        for (var i = 0; i < queue.length; i++) {
+            var item = queue[i];
+
+            rules.push(item.rule);
+            segments.push([[0, sources.length, item.lineNumber - 1, 0]]);
+            sources.push(item.fileName);
+        }
+
+        queue = [];
+
+        var mappings = SourcemapCodec.encode(segments);
+        var map = {
+            version: 3,
+            sources: sources,
+            mappings: mappings,
+            sourcesContent: sources.map(function (source) {
+                return sourceCache[source];
+            }),
+        };
+
+        var json = JSON.stringify(map);
+        var base64 = window.btoa(json);
+        var css = rules.join('\n') + '\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64 + ' */';
+        var style = document.createElement('style');
+
+        style.setAttribute('data-nano-css-sourcemaps', '');
+        style.appendChild(document.createTextNode(css));
+        document.head.appendChild(style);
+    }
+
+    function enqueue (rawCss) {
+        StackTrace.get({sourceCache: sourceCache})
+            .then(function (stackframes) {
+                var frame = findStackframe(stackframes);
+
+                if (!frame) {
+                    return;
+                }
+
+                queue.push({
+                    rule: rawCss,
+                    fileName: frame.fileName,
+                    lineNumber: frame.lineNumber,
+                });
+
+                if (!timeout) {
+                    timeout = setTimeout(flush, 100);
+                }
+            // eslint-disable-next-line no-console
+            }, console.log);
+    }
+
+    var putRaw = renderer.putRaw;
+
+    renderer.putRaw = function (rawCSS) {
+        enqueue(rawCSS);
+        putRaw.apply(null, arguments);
+    };
+
+    renderer.sourcemaps = true;
+};
@@ -0,0 +1,23 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('spread', renderer, ['put']);
+    }
+
+    renderer.spread = function (css, block) {
+        block = block || renderer.hash(css);
+        block = renderer.pfx + block;
+        renderer.put('.' + block + ',[data-' + block + ']', css);
+
+        var spread = {
+            toString: function () {
+                return ' ' + block;
+            }
+        };
+
+        spread['data-' + block] = '';
+
+        return spread;
+    };
+};
@@ -0,0 +1,7 @@
+'use strict';
+
+var stringify = require('fastest-stable-stringify');
+
+exports.addon = function (renderer) {
+    renderer.stringify = stringify;
+};
@@ -0,0 +1,33 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('style', renderer, ['jsx']);
+    }
+
+    renderer.style = function (fn, styles, dynamicTemplate, block) {
+        var jsxComponent = renderer.jsx(fn, styles, block);
+
+        var Component = function(props) {
+            var copy = props;
+
+            if (process.env.NODE_ENV !== 'production') {
+                copy = Object.assign({}, props);
+            }
+
+            if (dynamicTemplate) {
+                copy.css = dynamicTemplate(props);
+            }
+
+            return jsxComponent(copy);
+        };
+
+        if (process.env.NODE_ENV !== 'production') {
+            if (block || (typeof fn === 'function')) {
+                Component.displayName = 'style(' + (block || fn.displayName || fn.name) + ')';
+            }
+        }
+
+        return Component;
+    };
+};
@@ -0,0 +1,161 @@
+'use strict';
+
+var tags = [
+    'a',
+    'abbr',
+    'address',
+    'area',
+    'article',
+    'aside',
+    'audio',
+    'b',
+    'base',
+    'bdi',
+    'bdo',
+    'big',
+    'blockquote',
+    'body',
+    'br',
+    'button',
+    'canvas',
+    'caption',
+    'cite',
+    'code',
+    'col',
+    'colgroup',
+    'data',
+    'datalist',
+    'dd',
+    'del',
+    'details',
+    'dfn',
+    'dialog',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'embed',
+    'fieldset',
+    'figcaption',
+    'figure',
+    'footer',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'head',
+    'header',
+    'hgroup',
+    'hr',
+    'html',
+    'i',
+    'iframe',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'keygen',
+    'label',
+    'legend',
+    'li',
+    'link',
+    'main',
+    'map',
+    'mark',
+    'marquee',
+    'menu',
+    'menuitem',
+    'meta',
+    'meter',
+    'nav',
+    'noscript',
+    'object',
+    'ol',
+    'optgroup',
+    'option',
+    'output',
+    'p',
+    'param',
+    'picture',
+    'pre',
+    'progress',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'script',
+    'section',
+    'select',
+    'small',
+    'source',
+    'span',
+    'strong',
+    'style',
+    'sub',
+    'summary',
+    'sup',
+    'table',
+    'tbody',
+    'td',
+    'textarea',
+    'tfoot',
+    'th',
+    'thead',
+    'time',
+    'title',
+    'tr',
+    'track',
+    'u',
+    'ul',
+    'var',
+    'video',
+    'wbr',
+
+    // SVG
+    'circle',
+    'clipPath',
+    'defs',
+    'ellipse',
+    'foreignObject',
+    'g',
+    'image',
+    'line',
+    'linearGradient',
+    'mask',
+    'path',
+    'pattern',
+    'polygon',
+    'polyline',
+    'radialGradient',
+    'rect',
+    'stop',
+    'svg',
+    'text',
+    'tspan',
+];
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('styled', renderer, ['style']);
+    }
+
+    var styled = function (tag) {
+        return function (styles, dynamicTemplate, block) {
+            return renderer.style(tag, styles, dynamicTemplate, block);
+        };
+    };
+
+    var tag;
+
+    for (var i = 0; i < tags.length; i++) {
+        tag = tags[i];
+        styled[tag] = styled(tag);
+    }
+
+    renderer.styled = styled;
+};
@@ -0,0 +1,28 @@
+'use strict';
+
+var Stylis = require('stylis');
+var onRulePlugin = require('./stylis/plugin-onRule');
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('stylis', renderer, ['put']);
+    }
+
+    renderer.stylis = new Stylis();
+
+    var plugin = onRulePlugin(function (rawCssRule) {
+        renderer.putRaw(rawCssRule);
+    });
+
+    renderer.stylis.use(plugin);
+
+    var put = renderer.put;
+
+    renderer.put = function (selector, css) {
+        if (typeof css !== 'string') {
+            return put(selector, css);
+        }
+
+        renderer.stylis(selector, css);
+    };
+};
@@ -0,0 +1,43 @@
+'use strict';
+
+module.exports = function (insertRule) {
+    var delimiter = '/*|*/';
+    var needle = delimiter + '}';
+
+    function toSheet (block) {
+        if (block)
+            try {
+                insertRule(block + '}');
+            } catch (e) {
+                // eslint-disable-next-line
+            };
+    }
+
+    return function ruleSheet (context, content, selectors, parents, line, column, length, ns, depth, at) {
+        switch (context) {
+        // property
+        case 1:
+            // @import
+            if (depth === 0 && content.charCodeAt(0) === 64)
+                return insertRule(content+';'), '';
+            break;
+        // selector
+        case 2:
+            if (ns === 0)
+                return content + delimiter;
+            break;
+        // at-rule
+        case 3:
+            switch (ns) {
+            // @font-face, @page
+            case 102:
+            case 112:
+                return insertRule(selectors[0]+content), '';
+            default:
+                return content + (at === 0 ? delimiter : '');
+            }
+        case -2:
+            content.split(needle).forEach(toSheet);
+        }
+    };
+};
@@ -0,0 +1,215 @@
+/* eslint-disable no-invalid-this */
+'use strict';
+
+// SEE TACHYONS REFERENCE: https://tachyons.io/#style
+
+var addonSnake = require('./snake').addon;
+
+var colors = {
+    black: 'rgba(0,0,0,1)',
+    black90: 'rgba(0,0,0,.9)',
+    black80: 'rgba(0,0,0,.8)',
+    black70: 'rgba(0,0,0,.7)',
+    black60: 'rgba(0,0,0,.6)',
+    black50: 'rgba(0,0,0,.5)',
+    black40: 'rgba(0,0,0,.4)',
+    black30: 'rgba(0,0,0,.3)',
+    black20: 'rgba(0,0,0,.2)',
+    black10: 'rgba(0,0,0,.1)',
+    black05: 'rgba(0,0,0,.05)',
+    black025: 'rgba(0,0,0,.025)',
+    black0125: 'rgba(0,0,0,.0125)',
+    nearBlack: '#111',
+    darkGray: '#333',
+    midGray: '#555',
+    gray: '#777',
+    white: 'rgba(255,255,255,1)',
+    white90: 'rgba(255,255,255,.9)',
+    white80: 'rgba(255,255,255,.8)',
+    white70: 'rgba(255,255,255,.7)',
+    white60: 'rgba(255,255,255,.6)',
+    white50: 'rgba(255,255,255,.5)',
+    white40: 'rgba(255,255,255,.4)',
+    white30: 'rgba(255,255,255,.3)',
+    white20: 'rgba(255,255,255,.2)',
+    white10: 'rgba(255,255,255,.1)',
+    white05: 'rgba(255,255,255,.05)',
+    white025: 'rgba(255,255,255,.025)',
+    white0125: 'rgba(255,255,255,.0125)',
+    silver: '#999',
+    lightSilver: '#aaa',
+    lightGray: '#eee',
+    nearWhite: '#f4f4f4',
+    darkRed: '#e7040f',
+    red: '#ff4136',
+    lightRed: '#ff725c',
+    orange: '#ff6300',
+    gold: '#ffb700',
+    yellow: '#ffde37',
+    lightYellow: '#fbf1a9',
+    purple: '#5e2ca5',
+    lightPurple: '#a463f2',
+    darkPink: '#d5008f',
+    hotPink: '#ff41b4',
+    pink: '#ff80cc',
+    lightPink: '#ffa3d7',
+    darkGreen: '#137752',
+    green: '#19a974',
+    lightGreen: '#9eebcf',
+    navy: '#001b44',
+    darkBlue: '#00449e',
+    blue: '#357edd',
+    lightBlue: '#96ccff',
+    lightestBlue: '#cdecff',
+    washedBlue: '#f6fffe',
+    washedGreen: '#e8fdf5',
+    washedYellow: '#fffceb',
+    washedRed: '#ffdfdf',
+};
+
+var tachyons = [
+    // Font sizes
+    ['f1', 'fontSize', '3rem'],
+    ['f2', 'fontSize', '2.25rem'],
+    ['f3', 'fontSize', '1.5rem'],
+    ['f4', 'fontSize', '1.25rem'],
+    ['f5', 'fontSize', '1rem'],
+    ['f6', 'fontSize', '.875rem'],
+
+    // Text decorations
+    ['strike', 'textDecoration', 'line-through'],
+    ['ttc', 'textTransform', 'capitalize'],
+    ['ttu', 'textTransform', 'uppercase'],
+
+    // Fonts
+    ['sans-serif', 'fontFamily', "-apple-system,BlinkMacSystemFont,'avenir next', avenir,helvetica,'helvetica neue',ubuntu,roboto,noto,'segoe ui',arial,sans-serif"],
+    ['sansSerif', 'fontFamily', "-apple-system,BlinkMacSystemFont,'avenir next', avenir,helvetica,'helvetica neue',ubuntu,roboto,noto,'segoe ui',arial,sans-serif"],
+    ['serif', 'fontFamily', 'georgia,times,serif'],
+    ['code', 'fontFamily', 'Consolas,monaco,monospace'],
+    ['courier', 'fontFamily', "'Courier Next', courier, monospace"],
+    ['helvetica', 'fontFamily', "'helvetica neue', helvetica, sans-serif"],
+    ['avenir', 'fontFamily', "'avenir next', avenir, sans-serif"],
+    ['athelas', 'fontFamily', 'athelas, georgia, serif'],
+    ['georgia', 'fontFamily', 'georgia, serif'],
+    ['times', 'fontFamily', 'times, seriff'],
+    ['bodoni', 'fontFamily', '"Calisto MT", serif'],
+    ['calisto', 'fontFamily', '"Bodoni MT", serif'],
+    ['garamond', 'fontFamily', 'garamond, serif'],
+    ['baskerville', 'fontFamily', 'baskerville, serif'],
+
+    // Measures
+    ['measure-wide', 'maxWidth', '34em'],
+    ['measureWide', 'maxWidth', '34em'],
+    ['measure', 'maxWidth', '30em'],
+    ['measure-narrow', 'maxWidth', '20em'],
+    ['measureNarrow', 'maxWidth', '20em'],
+
+    // Grid
+    ['fl', 'float', 'left'],
+    ['w100', 'width', '100%'],
+    ['w90', 'width', '90%'],
+    ['w80', 'width', '80%'],
+    ['w75', 'width', '75%'],
+    ['w70', 'width', '70%'],
+    ['w60', 'width', '60%'],
+    ['w50', 'width', '50%'],
+    ['w40', 'width', '40%'],
+    ['w30', 'width', '30%'],
+    ['w25', 'width', '25%'],
+    ['w20', 'width', '20%'],
+    ['w10', 'width', '10%'],
+    ['wThird', 'width', '33.33333%'],
+    ['wTwoThirds', 'width', '36.66667%'],
+
+    // Borders
+    ['ba', 'border-style', 'solid', 'border-width', '1px'],
+    ['bt', 'border-top-style', 'solid', 'border-top-width', '1px'],
+    ['br', 'border-right-style', 'solid', 'border-right-width', '1px'],
+    ['bb', 'border-bottom-style', 'solid', 'border-bottom-width', '1px'],
+    ['bl', 'border-left-style', 'solid', 'border-left-width', '1px'],
+    ['bn', 'border-style', 'none', 'border-width', 0],
+
+    // Border styles
+    ['bDotted', 'border-style', 'dotted'],
+    ['bDashed', 'border-style', 'dashed'],
+    ['bSolid', 'border-style', 'solid'],
+    ['bNone', 'border-style', 'none'],
+
+    // Border width
+    ['bw0', 'borderWidth', 0],
+    ['bw1', 'borderWidth', '.125rem'],
+    ['bw2', 'borderWidth', '.25rem'],
+    ['bw3', 'borderWidth', '.5rem'],
+    ['bw4', 'borderWidth', '1rem'],
+    ['bw5', 'borderWidth', '2rem'],
+
+    // Border radii
+    ['br0', 'borderRadius', 0],
+    ['br1', 'borderRadius', '.125rem'],
+    ['br2', 'borderRadius', '.25rem'],
+    ['br3', 'borderRadius', '.5rem'],
+    ['br4', 'borderRadius', '1rem'],
+    ['br100', 'borderRadius', '100%'],
+    ['brPill', 'borderRadius', '9999px'],
+    ['brBottom', 'borderTopLeftRadius', 0, 'borderTopRightRadius', 0],
+    ['brTop', 'borderBottomLeftRadius', 0, 'borderBottomRightRadius', 0],
+    ['brRight', 'borderTopLeftRadius', 0, 'borderBottomLeftRadius', 0],
+    ['brLeft', 'borderTopRightRadius', 0, 'borderBottomRightRadius', 0],
+];
+
+// Colors
+for (var name in colors) {
+    var capitalized = name[0].toUpperCase() + name.substr(1);
+    var color = colors[name];
+
+    // Colors
+    tachyons.push([name, 'color', color]);
+
+    // Background colors
+    tachyons.push(['bg' + capitalized, 'backgroundColor', color]);
+
+    // Border colors
+    tachyons.push(['b' + capitalized, 'borderColor', color]);
+}
+
+exports.addon = function (renderer, ruleOverrides) {
+    var rules = {};
+
+    function onTachyon (tachyon) {
+        rules[tachyon[0]] = function () {
+            for (var i = 1; i < tachyon.length; i += 2) {
+                this[tachyon[i]] = tachyon[i + 1];
+            }
+        };
+    }
+
+    for (var i = 0; i < tachyons.length; i++)
+        onTachyon(tachyons[i]);
+
+    // Add hover rules
+    rules.grow = function () {
+        this['-moz-osx-font-smoothing'] = 'grayscale';
+        this.backfaceVisibility = 'hidden';
+        this.transform = 'translateZ(0)';
+        this.transition = 'transform 0.25s ease-out';
+        this[':hover'] = {
+            transform: 'scale(1.05)',
+        };
+        this[':focus'] = {
+            transform: 'scale(1.05)',
+        };
+    };
+
+    rules.dim = function () {
+        this.opacity = 1;
+        this.transition = 'opacity .15s ease-in';
+        this[':hover'] = {
+            opacity: '.5',
+        };
+        this[':focus'] = {
+            opacity: '.5',
+        };
+    };
+
+    addonSnake(renderer, renderer.assign(rules, ruleOverrides || {}));
+};
@@ -0,0 +1,78 @@
+'use strict';
+
+var UNITLESS_NUMBER_PROPS = [
+    'animation-iteration-count',
+    'border-image-outset',
+    'border-image-slice',
+    'border-image-width',
+    'box-flex',
+    'box-flex-group',
+    'box-ordinal-group',
+    'column-count',
+    'columns',
+    'flex',
+    'flex-grow',
+    'flex-positive',
+    'flex-shrink',
+    'flex-negative',
+    'flex-order',
+    'grid-row',
+    'grid-row-end',
+    'grid-row-span',
+    'grid-row-start',
+    'grid-column',
+    'grid-column-end',
+    'grid-column-span',
+    'grid-column-start',
+    'font-weight',
+    'line-clamp',
+    'line-height',
+    'opacity',
+    'order',
+    'orphans',
+    'tabSize',
+    'widows',
+    'z-index',
+    'zoom',
+
+    // SVG-related properties
+    'fill-opacity',
+    'flood-opacity',
+    'stop-opacity',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'stroke-miterlimit',
+    'stroke-opacity',
+    'stroke-width',
+];
+
+var unitlessCssProperties = {};
+
+for (var i = 0; i < UNITLESS_NUMBER_PROPS.length; i++) {
+    var prop = UNITLESS_NUMBER_PROPS[i];
+
+    unitlessCssProperties[prop] = 1;
+    unitlessCssProperties['-webkit-' + prop] = 1;
+    unitlessCssProperties['-ms-' + prop] = 1;
+    unitlessCssProperties['-moz-' + prop] = 1;
+    unitlessCssProperties['-o-' + prop] = 1;
+}
+
+exports.addon = function (renderer) {
+    var decl = renderer.decl;
+
+    renderer.decl = function (prop, value) {
+        var str = decl(prop, value);
+
+        if (typeof value === 'number') {
+            var pos = str.indexOf(':');
+            var propKebab = str.substr(0, pos);
+
+            if (!unitlessCssProperties[propKebab]) {
+                return decl(prop, value + 'px');
+            }
+        }
+
+        return str;
+    };
+};
@@ -0,0 +1,89 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface Units {
+    /**
+     * Adds `px` postfix.
+     */
+    px: (val: number) => string;
+
+    /**
+     * Adds `cm` postfix.
+     */
+    cm: (val: number) => string;
+
+    /**
+     * Adds `pt` postfix.
+     */
+    pt: (val: number) => string;
+
+    /**
+     * Adds `pc` postfix.
+     */
+    pc: (val: number) => string;
+
+    /**
+     * Adds `em` postfix.
+     */
+    em: (val: number) => string;
+
+    /**
+     * Adds `ex` postfix.
+     */
+    ex: (val: number) => string;
+
+    /**
+     * Adds `ch` postfix.
+     */
+    ch: (val: number) => string;
+
+    /**
+     * Adds `rem` postfix.
+     */
+    rem: (val: number) => string;
+
+    /**
+     * Adds `vw` postfix.
+     */
+    vw: (val: number) => string;
+
+    /**
+     * Adds `vh` postfix.
+     */
+    vh: (val: number) => string;
+
+    /**
+     * Adds `deg` postfix.
+     */
+    deg: (val: number) => string;
+
+    /**
+     * Adds `vmin` postfix.
+     */
+    vmin: (val: number) => string;
+
+    /**
+     * Adds `vmax` postfix.
+     */
+    vmax: (val: number) => string;
+
+    /**
+     * Adds `in` postfix.
+     */
+    inch: (val: number) => string;
+
+    /**
+     * Adds `in` postfix.
+     */
+    in: (val: number) => string;
+
+    /**
+     * Adds `%` postfix.
+     */
+    pct: (val: number) => string;
+}
+
+export interface UnitsAddon extends Units {
+    units: Units;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,27 @@
+'use strict';
+
+var units = {};
+var unitList = 'px,cm,mm,in,pt,pc,em,ex,ch,rem,vw,vh,deg,vmin,vmax'.split(',');
+
+function f (unit, val) {
+    return val + unit;
+}
+
+for (var i = 0; i < unitList.length; i++) {
+    var unit = unitList[i];
+
+    units[unit] = f.bind(null, unit);
+}
+
+units.inch = function (val) {
+    return val + 'in';
+};
+
+units.pct = function (val) {
+    return val + '%';
+};
+
+exports.addon = function (renderer) {
+    renderer.assign(renderer, units);
+    renderer.units = units;
+};
@@ -0,0 +1,24 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('useStyles', renderer, ['sheet']);
+    }
+
+    renderer.useStyles = function (map, fn, block) {
+        block = block || fn.displayName || fn.name;
+
+        var styles = renderer.sheet(map, block);
+        var Component = function (props) {
+            return fn(props, styles);
+        };
+
+        if (process.env.NODE_ENV !== 'production') {
+            if (block) {
+                Component.displayName = 'useStyles(' + block + ')';
+            }
+        }
+
+        return Component;
+    };
+};
@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = function (renderer, element, props) {
+    var newProps = renderer.assign({}, element.props, props);
+
+    if (element.ref) {
+        newProps.ref = element.ref;
+    }
+
+    return renderer.h(element.type, newProps);
+};
@@ -0,0 +1,50 @@
+'use strict';
+
+module.exports = function (renderer, Comp, dynamicTemplate) {
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof dynamicTemplate !== 'function') {
+            var what;
+
+            try {
+                what = JSON.stringify(dynamicTemplate);
+            } catch (error) {
+                what = String(dynamicTemplate);
+            }
+
+            throw new TypeError('Dynamic CSS template must always be a function, ' + 'received: ' + what);
+        }
+    }
+
+    var prototype = Comp.prototype;
+    var render_ = prototype.render;
+
+    prototype.render = function () {
+        var element = render_.apply(this, arguments);
+        var props = element.props;
+        var dynamicClassName = '';
+
+        if (dynamicTemplate) {
+            var dynamicStyles = dynamicTemplate(this.props);
+
+            if (dynamicStyles) {
+                dynamicClassName = renderer.cache(dynamicStyles);
+            }
+        }
+
+        if (!dynamicClassName) {
+            return element;
+        }
+
+        var className = (props.className || '') + dynamicClassName;
+
+        if (process.env.NODE_ENV !== 'production') {
+            return require('react').cloneElement(element, Object.assign({}, props, {
+                className: className
+            }), props.children);
+        }
+
+        props.className = className;
+
+        return element;
+    };
+};
@@ -0,0 +1,26 @@
+'use strict';
+
+module.exports = function (renderer, prototype, styles, block) {
+    var render_ = prototype.render;
+    var className = '';
+
+    prototype.render = function () {
+        var element = render_.call(this);
+
+        if (element) {
+            if (!className) {
+                className = renderer.rule(styles, block);
+            }
+
+            if (process.env.NODE_ENV === 'production') {
+                element.props.className = (element.props.className || '') + className;
+            } else {
+                element = require('react').cloneElement(element, {
+                    className: (element.props.className || '') + className,
+                });
+            }
+        }
+
+        return element;
+    };
+};
@@ -0,0 +1,82 @@
+'use strict';
+
+var csstree = require('css-tree');
+var syntax = csstree.lexer;
+
+function validate(css, filename) {
+    var errors = [];
+    var ast = csstree.parse(css, {
+        filename: filename,
+        positions: true,
+        onParseError: function(error) {
+            errors.push(error);
+        }
+    });
+
+    csstree.walk(ast, {
+        visit: 'Declaration',
+        enter: function(node) {
+            var match = syntax.matchDeclaration(node);
+            var error = match.error;
+
+            if (error) {
+                var message = error.rawMessage || error.message || error;
+
+                // ignore errors except those which make sense
+                if (error.name !== 'SyntaxMatchError' &&
+                    error.name !== 'SyntaxReferenceError') {
+                    return;
+                }
+
+                if (message === 'Mismatch') {
+                    message = 'Invalid value for `' + node.property + '`';
+                } else if (message === 'Uncomplete match') {
+                    message = 'The rest part of value can\'t be matched to `' + node.property + '` syntax';
+                }
+
+                errors.push({
+                    name: error.name,
+                    node: node,
+                    loc: error.loc || node.loc,
+                    line: error.line || node.loc && node.loc.start && node.loc.start.line,
+                    column: error.column || node.loc && node.loc.start && node.loc.start.column,
+                    property: node.property,
+                    message: message,
+                    error: error
+                });
+            }
+        }
+    });
+
+    return errors;
+}
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('validate', renderer, ['putRaw']);
+    }
+
+    if (process.env.NODE_ENV === 'production') {
+        console.warn(
+            'You are using nano-css "validate" in production. ' +
+            'This addon is meant to be used only in development.'
+        );
+    }
+
+    var putRaw = renderer.putRaw;
+
+    renderer.putRaw = function (rawCssRule) {
+        var errors = validate(rawCssRule);
+
+        if (errors && errors.length) {
+            errors.forEach(function (error) {
+                console.error('nano-css error, ' + error.name + ': ' + error.message);
+                // eslint-disable-next-line
+                console.log(error);
+                console.error(rawCssRule);
+            });
+        }
+
+        return putRaw.apply(renderer, arguments);
+    };
+};
@@ -0,0 +1,72 @@
+import {CSSOMAddon} from './cssom';
+import {Css} from './vcssom/cssToTree';
+import {NanoRenderer} from '../types/nano';
+import {CSSOMRule} from './cssom';
+import {CssProps} from '../types/common';
+
+export interface VRule {
+    /**
+     * CSS declarations, like `{color: 'red'}`
+     */
+    decl: CssProps;
+    rule: CSSOMRule;
+
+    /**
+     * Re-render css rule according to new CSS declarations.
+     * @param decl CSS declarations, like `{color: 'red'}`
+     */
+    diff(decl: CssProps);
+
+    /**
+     * Removes this `VRule` from CSSOM. After calling this method, you
+     * cannot call `diff` anymore as this rule will be removed from style sheet.
+     */
+    del();
+}
+
+export interface VSheet {
+    /**
+     * Re-renders style sheet according to specified CSS-like object. The `css`
+     * object is a 3-level tree structure:
+     *
+     * ```
+     * {
+     *   media-query-prelude: {
+     *     selector: {
+     *       declarations
+     *     }
+     *   }
+     * }
+     * ```
+     *
+     * Example:
+     *
+     * ```js
+     * sheet.diff({
+     *   '': {
+     *     '.my-class': {
+     *       color: 'red',
+     *     },
+     *     '.my-class:hover': {
+     *       color: 'blue',
+     *     },
+     *   },
+     *   '@media only screen and (max-width: 600px)': {
+     *     '.my-class': {
+     *       color: 'green',
+     *     },
+     *   },
+     * });
+     * ```
+     *
+     * @param css CSS-like object with media queries as top level.
+     */
+    diff(css: Css);
+}
+
+export interface VCSSOMAddon {
+    VRule: new (selector: string, mediaQuery?: string) => VRule;
+    VSheet: new () => VSheet;
+}
+
+export function addon(nano: NanoRenderer);
@@ -0,0 +1,97 @@
+'use strict';
+
+var removeRule = require('./vcssom/removeRule').removeRule;
+
+exports.addon = function (renderer) {
+    // VCSSOM support only browser environment.
+    if (!renderer.client) return;
+
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('cssom', renderer, ['createRule']); // cssom
+    }
+
+    var kebab = renderer.kebab;
+
+    function VRule (selector, prelude) {
+        this.rule = renderer.createRule(selector, prelude);
+        this.decl = {};
+    }
+    VRule.prototype.diff = function (newDecl) {
+        var oldDecl = this.decl;
+        var style = this.rule.style;
+        var property;
+        for (property in oldDecl)
+            if (newDecl[property] === undefined)
+                style.removeProperty(property);
+        for (property in newDecl)
+            if (newDecl[property] !== oldDecl[property])
+                style.setProperty(kebab(property), newDecl[property]);
+        this.decl = newDecl;
+    };
+    VRule.prototype.del = function () {
+        removeRule(this.rule);
+    };
+
+    function VSheet () {
+        /**
+         * {
+         *   '<at-rule-prelude>': {
+         *     '<selector>': {
+         *       color: 'red
+         *     }
+         *   }
+         * }
+         */
+        this.tree = {};
+    }
+    VSheet.prototype.diff = function (newTree) {
+        var oldTree = this.tree;
+
+        // Remove media queries not present in new tree.
+        for (var prelude in oldTree) {
+            if (newTree[prelude] === undefined) {
+                var rules = oldTree[prelude];
+                for (var selector in rules)
+                    rules[selector].del();
+            }
+        }
+
+        for (var prelude in newTree) {
+            if (oldTree[prelude] === undefined) {
+                // Whole media query is new.
+                for (var selector in newTree[prelude]) {
+                    var rule = new VRule(selector, prelude);
+                    rule.diff(newTree[prelude][selector]);
+                    newTree[prelude][selector] = rule;
+                }
+            } else {
+                // Old tree already has rules with this media query.
+                var oldRules = oldTree[prelude];
+                var newRules = newTree[prelude];
+
+                // Remove rules not present in new tree.
+                for (var selector in oldRules)
+                    if (!newRules[selector])
+                        oldRules[selector].del();
+
+                // Apply new rules.
+                for (var selector in newRules) {
+                    var rule = oldRules[selector];
+                    if (rule) {
+                        rule.diff(newRules[selector]);
+                        newRules[selector] = rule;
+                    } else {
+                        rule = new VRule(selector, prelude);
+                        rule.diff(newRules[selector]);
+                        newRules[selector] = rule;
+                    }
+                }
+            }
+        }
+
+        this.tree = newTree;
+    };
+
+    renderer.VRule = VRule;
+    renderer.VSheet = VSheet;
+};
@@ -0,0 +1,15 @@
+import {CssLikeObject} from '../../types/common';
+
+export interface Css {
+    [key: string]: CssLikeObject[keyof CssLikeObject] | Css;
+}
+
+export interface Tree {
+    [atRulePrelude: string]: {
+        [selector: string]: {
+            [property: string]: CssLikeObject;
+        };
+    };
+}
+
+export function cssToTree(tree: {}, css: Css, selector: string, prelude: string): Tree;
@@ -0,0 +1,42 @@
+function cssToTree (tree, css, selector, prelude) {
+    var declarations = {};
+    var hasDeclarations = false;
+    var key, value;
+
+    for (key in css) {
+        value = css[key];
+        if (typeof value !== 'object') {
+            hasDeclarations = true;
+            declarations[key] = value;
+        }
+    }
+
+    if (hasDeclarations) {
+        if (!tree[prelude]) tree[prelude] = {};
+        tree[prelude][selector] = declarations;
+    }
+
+    for (key in css) {
+        value = css[key];
+        if (typeof value === 'object') {
+            if (key[0] === '@') {
+                cssToTree(tree, value, selector, key);
+            } else {
+                var hasCurrentSymbol = key.indexOf('&') > -1;
+                var selectorParts = selector.split(',');
+                if (hasCurrentSymbol) {
+                    for (var i = 0; i < selectorParts.length; i++) {
+                        selectorParts[i] = key.replace(/&/g, selectorParts[i]);
+                    }
+                } else {
+                    for (var i = 0; i < selectorParts.length; i++) {
+                        selectorParts[i] = selectorParts[i] + ' ' + key;
+                    }
+                }
+                cssToTree(tree, value, selectorParts.join(','), prelude);
+            }
+        }
+    }
+};
+
+exports.cssToTree = cssToTree;
@@ -0,0 +1,3 @@
+import {CSSOMRule} from '../cssom';
+
+export function removeRule(sh: CSSStyleSheet, rule: CSSOMRule);
@@ -0,0 +1,15 @@
+function removeRule (rule) {
+    var maxIndex = rule.index;
+    var sh = rule.parentStyleSheet;
+    var rules = sh.cssRules || sh.rules;
+    maxIndex = Math.max(maxIndex, rules.length - 1);
+    while (maxIndex >= 0) {
+        if (rules[maxIndex] === rule) {
+            sh.deleteRule(maxIndex);
+            break;
+        }
+        maxIndex--;
+    }
+}
+
+exports.removeRule = removeRule;
@@ -0,0 +1,107 @@
+'use strict';
+
+var createMemoizer = function (pfx) {
+    var offset = 10;
+    var msb = 35;
+    var power = 1;
+
+    var self = {
+        cache: {},
+        length: 0,
+
+        next: function () {
+            var vcount = self.length + offset;
+
+            if (vcount === msb) {
+                offset += (msb + 1) * 9;
+                msb = Math.pow(36, ++power) - 1;
+            }
+            self.length++;
+
+            return vcount;
+        },
+
+        get: function () {
+            var curr = self.cache;
+            var lastIndex = arguments.length - 1;
+            var lastStep = arguments[lastIndex];
+
+            for (var i = 0; i < lastIndex; i++) {
+                var step = arguments[i] || '_';
+
+                if (!curr[step]) curr[step] = {};
+                curr = curr[step];
+            }
+
+            if (!curr[lastStep]) curr[lastStep] = pfx + self.next().toString(36);
+
+            return curr[lastStep];
+        }
+    };
+
+    return self;
+};
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('virtual', renderer, ['rule', 'putRaw']);
+    }
+
+    renderer.memo = createMemoizer(renderer.pfx);
+
+    renderer.atomic = function (selectorTemplate, rawDecl, atrule) {
+        var memo = renderer.memo;
+        var memoLength = memo.length;
+        var className = memo.get(atrule, selectorTemplate, rawDecl);
+
+        if (memoLength < memo.length) {
+            var selector = selectorTemplate.replace(/&/g, '.' + className);
+            var str = selector + '{' + rawDecl + '}';
+
+            if (atrule) {
+                str = atrule + '{' + str + '}';
+            }
+
+            renderer.putRaw(str);
+        }
+
+        return className;
+    };
+
+    renderer.virtual = function (selectorTemplate, decls, atrule) {
+        selectorTemplate = selectorTemplate || '&';
+
+        var classNames = '';
+
+        for (var prop in decls) {
+            var value = decls[prop];
+
+            if (prop.indexOf('keyframes') > -1) {
+                renderer.putAt('', value, prop);
+                continue;
+            }
+
+            if ((value instanceof Object) && !(value instanceof Array)) {
+                if (prop[0] === '@') {
+                    classNames += renderer.virtual(selectorTemplate, value, prop);
+                } else {
+                    classNames += renderer.virtual(renderer.selector(selectorTemplate, prop), value, atrule);
+                }
+            } else {
+                var rawDecl = renderer.decl(prop, value);
+                var rawDecls = rawDecl.split(';');
+
+                for (var i = 0; i < rawDecls.length; i++) {
+                    var d = rawDecls[i];
+                    if (d) classNames += ' ' + renderer.atomic(selectorTemplate, d, atrule);
+                }
+            }
+        }
+
+        return classNames;
+    };
+
+    renderer.rule = function (decls) {
+        return renderer.virtual('&', decls);
+    };
+};
@@ -0,0 +1,32 @@
+'use strict';
+
+exports.addon = function (renderer) {
+    if (process.env.NODE_ENV !== 'production') {
+        require('./__dev__/warnOnMissingDependencies')('withStyles', renderer, ['sheet']);
+    }
+
+    renderer.withStyles = function (map, fn, block) {
+        block = block || fn.displayName || fn.name;
+
+        var styles = renderer.sheet(map, block);
+        var Component = function (props) {
+            if (process.env.NODE_ENV !== 'production') {
+                return fn(Object.assign({}, props, {
+                    styles: styles
+                }));
+            }
+
+            props.styles = styles;
+
+            return fn(props);
+        };
+
+        if (process.env.NODE_ENV !== 'production') {
+            if (block) {
+                Component.displayName = 'withStyles(' + block + ')';
+            }
+        }
+
+        return Component;
+    };
+};
@@ -0,0 +1,4 @@
+import {CreateNano} from './types/nano';
+export * from './types/nano';
+export * from './types/common';
+export const create: CreateNano;
@@ -0,0 +1,138 @@
+'use strict';
+
+var KEBAB_REGEX = /[A-Z]/g;
+
+var hash = function (str) {
+    var h = 5381, i = str.length;
+
+    while (i) h = (h * 33) ^ str.charCodeAt(--i);
+
+    return '_' + (h >>> 0).toString(36);
+};
+
+exports.create = function (config) {
+    config = config || {};
+    var assign = config.assign || Object.assign;
+    var client = typeof window === 'object';
+
+    // Check if we are really in browser environment.
+    if (process.env.NODE_ENV !== 'production') {
+        if (client) {
+            if ((typeof document !== 'object') || !document.getElementsByTagName('HTML')) {
+                console.error(
+                    'nano-css detected browser environment because of "window" global, but ' +
+                    '"document" global seems to be defective.'
+                );
+            }
+        }
+    }
+
+    var renderer = assign({
+        raw: '',
+        pfx: '_',
+        client: client,
+        assign: assign,
+        stringify: JSON.stringify,
+        kebab: function (prop) {
+            return prop.replace(KEBAB_REGEX, '-$&').toLowerCase();
+        },
+        decl: function (key, value) {
+            key = renderer.kebab(key);
+            return key + ':' + value + ';';
+        },
+        hash: function (obj) {
+            return hash(renderer.stringify(obj));
+        },
+        selector: function (parent, selector) {
+            return parent + (selector[0] === ':' ? ''  : ' ') + selector;
+        },
+        putRaw: function (rawCssRule) {
+            renderer.raw += rawCssRule;
+        }
+    }, config);
+
+    if (renderer.client) {
+        if (!renderer.sh)
+            document.head.appendChild(renderer.sh = document.createElement('style'));
+
+        if (process.env.NODE_ENV !== 'production') {
+            renderer.sh.setAttribute('data-nano-css-dev', '');
+
+            // Test style sheet used in DEV mode to test if .insetRule() would throw.
+            renderer.shTest = document.createElement('style');
+            renderer.shTest.setAttribute('data-nano-css-dev-tests', '');
+            document.head.appendChild(renderer.shTest);
+        }
+
+        renderer.putRaw = function (rawCssRule) {
+            // .insertRule() is faster than .appendChild(), that's why we use it in PROD.
+            // But CSS injected using .insertRule() is not displayed in Chrome Devtools,
+            // that's why we use .appendChild in DEV.
+            if (process.env.NODE_ENV === 'production') {
+                var sheet = renderer.sh.sheet;
+
+                // Unknown pseudo-selectors will throw, this try/catch swallows all errors.
+                try {
+                    sheet.insertRule(rawCssRule, sheet.cssRules.length);
+                // eslint-disable-next-line no-empty
+                } catch (error) {}
+            } else {
+                // Test if .insertRule() works in dev mode. Unknown pseudo-selectors will throw when
+                // .insertRule() is used, but .appendChild() will not throw.
+                try {
+                    renderer.shTest.sheet.insertRule(rawCssRule, renderer.shTest.sheet.cssRules.length);
+                } catch (error) {
+                    if (config.verbose) {
+                        console.error(error);
+                    }
+                }
+
+                // Insert pretty-printed CSS for dev mode.
+                renderer.sh.appendChild(document.createTextNode(rawCssRule));
+            }
+        };
+    }
+
+    renderer.put = function (selector, decls, atrule) {
+        var str = '';
+        var prop, value;
+        var postponed = [];
+
+        for (prop in decls) {
+            value = decls[prop];
+
+            if ((value instanceof Object) && !(value instanceof Array)) {
+                postponed.push(prop);
+            } else {
+                if ((process.env.NODE_ENV !== 'production') && !renderer.sourcemaps) {
+                    str += '    ' + renderer.decl(prop, value, selector, atrule) + '\n';
+                } else {
+                    str += renderer.decl(prop, value, selector, atrule);
+                }
+            }
+        }
+
+        if (str) {
+            if ((process.env.NODE_ENV !== 'production') && !renderer.sourcemaps) {
+                str = '\n' + selector + ' {\n' + str + '}\n';
+            } else {
+                str = selector + '{' + str + '}';
+            }
+            renderer.putRaw(atrule ? atrule + '{' + str + '}' : str);
+        }
+
+        for (var i = 0; i < postponed.length; i++) {
+            prop = postponed[i];
+
+            if (prop[0] === '@' && prop !== '@font-face') {
+                renderer.putAt(selector, decls[prop], prop);
+            } else {
+                renderer.put(renderer.selector(selector, prop), decls[prop], atrule);
+            }
+        }
+    };
+
+    renderer.putAt = renderer.put;
+
+    return renderer;
+};
@@ -0,0 +1,127 @@
+{
+  "name": "nano-css",
+  "version": "5.6.2",
+  "description": "Smallest 5th gen CSS-in-JS library",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "typings": "index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/streamich/nano-css.git"
+  },
+  "license": "Unlicense",
+  "scripts": {
+    "lint": "eslint ./index.js",
+    "lint:fix": "yarn lint --fix",
+    "start": "yarn storybook",
+    "clean": "rimraf dist && yarn test:visual:clean",
+    "test": "yarn lint && jest",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch",
+    "test:visual": "npm run storybook",
+    "test:visual:build": "build-storybook",
+    "test:visual:clean": "rimraf storybook-static",
+    "demo": "webpack-dev-server --config demo/webpack.config.js",
+    "prettier": "prettier --write '**/*.ts'",
+    "precommit": "lint-staged",
+    "prepush": "yarn test",
+    "storybook": "start-storybook -p 6010"
+  },
+  "lint-staged": {
+    "**/*.ts": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "dependencies": {
+    "@jridgewell/sourcemap-codec": "^1.4.15",
+    "css-tree": "^1.1.2",
+    "csstype": "^3.1.2",
+    "fastest-stable-stringify": "^2.0.2",
+    "inline-style-prefixer": "^7.0.1",
+    "rtl-css-js": "^1.16.1",
+    "stacktrace-js": "^2.0.2",
+    "stylis": "^4.3.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "6.5.16",
+    "@storybook/addon-links": "6.5.16",
+    "@storybook/react": "6.5.16",
+    "@types/jest": "26.0.24",
+    "@types/node": "14.18.63",
+    "@types/prop-types": "15.7.12",
+    "@types/react": "17.0.80",
+    "eslint": "7.32.0",
+    "git-cz": "4.9.0",
+    "husky": "4.3.8",
+    "iconista": "2.16.1",
+    "jest": "26.6.3",
+    "lerna": "3.22.1",
+    "libreact": "2.13.3",
+    "lint-staged": "10.5.4",
+    "prettier": "2.8.8",
+    "prop-types": "15.8.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-test-renderer": "17.0.2",
+    "rimraf": "3.0.2",
+    "source-map-support": "0.5.19",
+    "ts-loader": "8.4.0",
+    "tslib": "2.6.3",
+    "typescript": "4.9.5",
+    "webpack": "5.92.1",
+    "webpack-bundle-analyzer": "4.10.2",
+    "webpack-dev-server": "3.11.3",
+    "yarn": "1.22.22"
+  },
+  "config": {
+    "commitizen": {
+      "path": "git-cz"
+    }
+  },
+  "jest": {
+    "transformIgnorePatterns": [],
+    "testRegex": ".*/__tests__/.*\\.(test|spec)\\.(jsx?)$",
+    "setupFiles": [
+      "./addon/__tests__/setup.js"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "jsx",
+      "json"
+    ]
+  },
+  "prettier": {
+    "printWidth": 120,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "bracketSpacing": false,
+    "jsxBracketSameLine": false
+  },
+  "keywords": [
+    "css",
+    "style",
+    "styles",
+    "pico",
+    "nano",
+    "lite",
+    "react",
+    "js",
+    "in-js",
+    "css-in-js",
+    "styled",
+    "decorator",
+    "component",
+    "styled-components",
+    "jsxstyle",
+    "rule",
+    "stylesheet"
+  ]
+}
--- a/Show More
+++ b/Show More