# Nanocss
> We release patches for security vulnerabilities. The latest major version
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/SECURITY.md
# Path: SECURITY.md
# Security Policy
## Supported Versions
We release patches for security vulnerabilities. The latest major version
will support security patches.
## Reporting a Vulnerability
Please report (suspected) security vulnerabilities to
**[streamich@gmail.com](mailto:streamich@gmail.com)**. We will try to respond
within 48 hours. If the issue is confirmed, we will release a patch as soon
as possible depending on complexity.
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/Addons.md
# Path: docs/Addons.md
# Addons
`nano-css` comes only with a single [`put()`](./put.md) addon pre-installed. However, it has
plenty more to chose from. Below is a list of addons shipped with `nano-css`.
- [`put()`](./put.md) — injects CSS styles given a selector
- [`rule()`](./rule.md) — injects CSS styles and returns a generated selector
- [`drule()`](./drule.md) — like `rule()`, but allows to add on-the-fly overrides
- [`sheet()`](./sheet.md) — collection of `rule()`s, lazy injects CSS styles only when used
- [`dsheet()`](./dsheet.md) — like `sheet()`, but allows to add on-the-fly overrides
- [`jsx()`](./jsx.md) — creates styling blocks for virtual DOM libraries
- [`useStyles()`](./useStyles.md) — adds `styles` as a second argument for your component
- [`withStyles()`](./withStyles.md) — injects `styles` prop into your component
- [`decorator`](./decorator.md) — provides `@css` decorator for styling stateful React components
- [`component`](./component.md) — provides React `Component` class to inherit from
- [`style()`](./style.md) — allows you to create *styled components*
- [`styled()()`](./styled.md) — better syntax for *styled components*
- [`hyperstyle()`](./hyperstyle.md) — creates styled hyperscript `h` function
- [`stable`](./stable.md) — generates consistent class names
- [`atoms`](./atoms.md) — CSS shorthands for better DX
- [`nesting`](./nesting.md) — better nesting features
- [`keyframes()`](./keyframes.md) — adds `@keyframes` support
- [`hydrate()`](./hydrate.md) — adds support for re-hydration on client side
- [`prefixer`](./prefixer.md) — auto-prefixes your styles with correct vendor prefixes
- [`stylis`](./stylis.md) — write CSS as strings
- [`unitless`](./unitless.md) — automatically adds `px` to styles
- [`!important`](./important.md) — adds `!important` to all declarations
- [`:global`](./global.md) — allows emitting global styles
- [`animate/*`](./animations.md) — collection of animation styles
- [`reset/*`](./resets.md) — collection of CSS resets
- [`reset-font`](./reset-font.md) — global styles for better font
- [`googleFont()`](./googleFont.md) — loads custom fonts from *Google Fonts*
- [`limit`](./limit.md) — limits server-side style sheet size
- [`amp`](./amp.md) — displays warnings and cleans up styles for AMP apps
- [`virtual`](./virtual.md) — virtual CSS renderer, splits css rules in atomic declarations
- [`spread`](./spread.md) — returns an object with data attributes used as a selector
- [`array`](./array.md) — use arrays to specify multiple values
- [`snake`](./snake.md) — chain styling rules
- [`tachyons`](./tachyons.md) — use Tachyons for rule chaining
- [`rtl`](./rtl.md) — flips all styles RTL (right-to-left)
- [`extract`](./extract.md) — allows extraction of CSS into external `*.css` style sheet
- [`sourcemaps`](./sourcemaps.md) — generates source maps in dev mode
- [`.units`](./units.md) — CSS units as JavaScript functions
## Addon Installation
All addons are in the `nano-css/addon/` folder and are exported
as an `addon` named export. Addon is simply a function that receives `nano-css` renderer object
as a single argument.
When these docs mention that you need to install an addon, say `xxx`, you simply import it
from the addon folder and apply to the nano renderer object:
```js
import {addon as addonXXX} from 'nano-css/addon/xxx';
addonXXX(nano);
nano.xxx(/* ... */);
```
Here we install [`rule()`](./rule.md) and [`atoms`](./atoms.md) addons:
```js
import {create} from 'nano-css';
import {addon as addonRule} from 'nano-css/addon/rule';
import {addon as addonAtoms} from 'nano-css/addon/atoms';
const nano = create();
addonRule(nano);
addonAtoms(nano);
```
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/Installation.md
# Path: docs/Installation.md
# Installation
Install `nano-css`.
To use a stock version simply create a `nano` renderer object.
```jsx
import {create} from 'nano-css';
const nano = create();
nano.put('.test', {
color: 'red',
border: '1px solid red'
});
Hello world!
```
## Configuration
The `create()` function accepts an options object with the following keys:
- `pfx` — optional, string, prefix to add to all generated class and animation names, defaults to `_`.
- `h` — optional, hyperscript function of your virtual DOM library. Only necessary if you are using addons that require it.
- `sh` — optional, DOM style sheet element, useful when re-hydrating server rendered styles.
- `verbose` — optional, boolean, whether to be chatty in console in DEV mode.
```js
import {createElement} from 'react';
const nano = create({
pfx: 'my-company-',
h: createElement
});
```
## Recommended Setup
Recommended optimal usage in a large project is with the following addons (read more about [addons](./Addons.md)).
Create an empty `nano.js` file in your project and paste the below:
```js
import {createElement} from 'react';
import {create} from 'nano-css';
import {addon as addonCache} from 'nano-css/addon/cache'
import {addon as addonStable} from 'nano-css/addon/stable'
import {addon as addonNesting} from 'nano-css/addon/nesting'
import {addon as addonAtoms} from 'nano-css/addon/atoms'
import {addon as addonKeyframes} from 'nano-css/addon/keyframes'
import {addon as addonRule} from 'nano-css/addon/rule'
import {addon as addonSheet} from 'nano-css/addon/sheet'
import {addon as addonJsx} from 'nano-css/addon/jsx'
const nano = create({
// Add prefix to all generated class names.
pfx: 'my-company-',
// Set hyperscript function of your virtual DOM library, for jsx() addon.
h: createElement,
});
// Add addons you would like to use.
addonCache(nano);
addonStable(nano);
addonNesting(nano);
addonAtoms(nano);
addonKeyframes(nano);
addonRule(nano);
addonSheet(nano);
addonJsx(nano);
const {rule, sheet, jsx, keyframes} = nano;
// Export everything.
export {
nano,
rule,
sheet,
jsx,
keyframes,
};
```
Learn about [presets](./Presets.md) to do this setup for you.
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/Presets.md
# Path: docs/Presets.md
# Presets
`nano-css` comes with a range of addons that sometimes may be overwhelming to pick through and
cumbersome to install. To ease this we have created *Presets* — presets are simply functions
that create a `nano-css` instance and install addons automatically for you.
## Example
```js
import {preset} from 'nano-css/preset/sheet';
const {rule, sheet} = preset();
export {
rule,
sheet
};
```
## List
Below is a list of available presets.
- `sheet` — installs [`sheet()`](./sheet.md) addon, as well as `stable`, `nesting`, `atoms`, and `keyframes` addons
- `vdom` — similar to `sheet` preset, but also installs [`jsx()`](./jsx.md) addon, you need to provide `h` function in configuration
- `react` — similar to `vdom` preset, but specifies hyperscript function `h` automatically and also installs `snake`, `style`, `styled`, and `decorator` addons
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/SSR.md
# Path: docs/SSR.md
# Server-side Rendering
When used in a non-browser environment `nano-css` will not attempt to inject CSS into the DOM, but
will instead accumulate it as a raw CSS string in a `raw` property. Use that to generate your templates
on the server:
```js
html += ``;
```
## Re-hydrating
`nano-css` can re-hydrate server-side generated CSS. To do that, you need to install [`hydrate` addon](hydrate.md);
and provide style sheet you want to hydrate to the `nano-css` instance when creating it.
```js
const nano = create({
sh: typeof document === 'object' ? document.getElementById('nano-css') : null
});
html += ``;
```
## External Style Sheet Extraction
You can also extract styles into an external style sheet. Make sure you need to do it, because it might
be an anti-pattern. To do that use [`extract`](./extract.md) addon.
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/amp.md
# Path: docs/amp.md
# `amp` Addon
Sets [restrictions](https://www.ampproject.org/docs/design/responsive/style_pages) and displays AMP style sheet
warnings for AMP apps.
- limits style sheet size to 50Kb
- displays error messages in development, if `!important` is used
- removes `!important` modifiers
- displays error messages in development, if `behavior` or `-moz-binding` banned declarations are used
- removes `behavior` and `-moz-binding` banned declarations
- displays error messages in development, if `.-amp-*` or `i-admp-*` selectors are used
- removes CSS rules that use `.-amp-*` or `i-admp-*` selectors
## Example
Install and configure `amp` addon:
```js
import {addon as addonAmp} from 'nano-css/addon/amp';
addonAmp(nano);
```
or
```js
addonAmp(nano, {
limit: 50000,
removeImportant: true,
removeReserved: true,
removeBanned: true,
});
```
, where
- `limit` — maximum size of style sheet on server, defaults to `50000`
- `removeImportant` — whether to remove `!important` modfiers, defaults to `false`
- `removeReserved` — whether to remove rules with reserved selectors, defaults to `false`
- `removeBanned` — whether to remove banned declarations, defaults to `false`
## Installation
Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/animations.md
# Path: docs/animations.md
# Animations
`nano-css` has a number of CSS animation addons. Simply install any of the
below animation addons and you will have available class and animation with that same
name.
- `animate/fadeIn`
- `animate/fadeInDown`
- `animate/fadeInScale`
- `animate/fadeOut`
- `animate/fadeOutScale`
Read more about the [Addon Installation](./Addons.md#addon-installation).
## Example
```js
import {addon as addonAnimateFadeIn} from 'nano-css/addon/animate/fadeIn';
addonAnimateFadeIn(nano);
```
Now you can use the `fadeIn` class name to *"fade in"* your elements.
```html
Hello world!
```
Or use the `fadeIn` animation directly to apply custom tween settings.
```html
Hello world!
```
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/array.md
# Path: docs/array.md
# `array` Addon
This addon allows to specify multiple values for the same declaration property.
```js
nano.put('.foo', {
display: ['flex', '-webkit-flex']
});
```
Result:
```css
.foo {
display: flex;
display: -webkit-flex;
}
```
It also allows to specify multiple CSS-like objects as an array, which will be merged.
```js
nano.put('.bar', [
{
color: 'red'
},
{
border: '1px solid red'
}
]);
```
Result:
```css
.bar {
color: red;
border: 1px solid red;
}
```
## Installation
Simply install `array` addon. Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/atoms.md
# Path: docs/atoms.md
# `atoms` Addon
When composing CSS-like objects in `nano-css`, you can use either kebab-case
```js
const className = rule({
'border-top': '1px solid red'
});
```
or camel-case syntax
```js
const className = rule({
borderTop: '1px solid red'
});
```
`atoms` addon provides a list of *atoms* that can be used as shorthands for CSS rule declarations properties.
```js
const className = rule({
bdt: '1px solid red'
});
```
Those are good for __DX__ and they will decrease your overall bundle size after
sufficient use. You can find the full up-to-date atom list [here](../addon/atoms.js). Below
is the atom list at the moment of this writing:
```js
var atoms = {
d: 'display',
mar: 'margin',
mart: 'margin-top',
marr: 'margin-right',
marb: 'margin-bottom',
marl: 'margin-left',
pad: 'padding',
padt: 'padding-top',
padr: 'padding-right',
padb: 'padding-bottom',
padl: 'padding-left',
bd: 'border',
bdt: 'border-top',
bdr: 'border-right',
bdb: 'border-bottom',
bdl: 'border-left',
bdrad: 'border-radius',
col: 'color',
op: 'opacity',
bg: 'background',
bgc: 'background-color',
fz: 'font-size',
fs: 'font-style',
fw: 'font-weight',
ff: 'font-family',
lh: 'line-height',
bxz: 'box-sizing',
cur: 'cursor',
ov: 'overflow',
pos: 'position',
ls: 'list-style',
ta: 'text-align',
td: 'text-decoration',
fl: 'float',
w: 'width',
h: 'height',
trs: 'transition',
out: 'outline',
vis: 'visibility',
ww: 'word-wrap',
con: 'content',
z: 'z-index',
};
```
For even better DX see [`snake`](./snake.md) addon.
## Installation
Simply install `atoms` addon. Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/component.md
# Path: docs/component.md
# `component` Addon
`component` addon creates a new `Component`class, which you inherit from to create
stateful styled React components.
```jsx
const {Component} = nano;
class Button extends Component {
static css = {
display: 'inline-block',
borderRadius: '3px',
padding: '0.5rem 0',
margin: '0.5rem 1rem',
width: '11rem',
background: 'transparent',
color: 'white',
border: '2px solid white',
};
render () {
return ;
}
}
```
You can also have 4th generation dynamic styles that change with
props.
```js
class Button extends Component {
css () {
return {
background: this.props.primary ? 'blue' : 'grey'
};
}
render () {
// ...
}
}
```
## Installation
Simply install `component` addon and its dependencies:
- `cache`
- [`rule()`](./rule.md)
Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/cssom.md
# Path: docs/cssom.md
# `cssom` Addon
Adds a utility `createRule` function that creates `CSSRule` objects. The `.createRule`
function offers the following features:
1. It creates plain `CSSRule`s and ones that with media query.
2. It places `CSSRules`s with media query into a different style sheet, because placing
them in the same style sheet throws.
3. It adds to the rule object index property `rule.index`, which is that rule's
insertion index in the style sheet.
4. In case rule has media query, the returned media query rule will still have top
level `.style` and `.styleMap` properties, which can be used to set the styling.
```js
nano.createRule(selector, mediaQueryAtRulePrelude?);
```
## Usage
Create `CSSRule` object.
```js
const rule = nano.createRule('.my-component');
const rule = nano.createRule('.my-component', '@media only screen and (max-width: 600px)');
```
Use `rule` object to set CSS.
```js
rule.style.color = 'red';
rule.style.setProperty('color', 'green');
```
## Installation
Simply install `cssom` addon.
Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/decorator.md
# Path: docs/decorator.md
# `decorator` Addon
The `decorator` addon exposes `@css` decorator that you can use to style your stateful
React class components.
```jsx
const {css} = nano;
@css({
display: 'inline-block',
borderRadius: '3px',
padding: '0.5rem 0',
margin: '0.5rem 1rem',
width: '11rem',
background: 'transparent',
color: 'white',
border: '2px solid white',
})
class Button extends Component {
render () {
return ;
}
}
```
## Usage
You can use `@css` decorator in a number of ways. You can specify statics styles, as well as,
dynamic styles that depend on `props`.
### Simple Decorator
You can set the decorator as a simple class `@css` decorator and use static `css` property for
static styles.
```js
@css
class Button extends Component {
static css = {
color: 'red'
};
render () {
// ...
}
}
```
You can also specify a dynamic CSS template in the `css` method.
```js
@css
class Button extends Component {
css () {
return {
background: this.props.primary ? 'blue' : 'grey'
};
}
render () {
// ...
}
}
```
### Customizable Decorator
You can specify static styles directly in the class decorator.
```js
@css({
color: 'red'
})
class Button extends Component {
render () {
// ...
}
}
```
Then you can specify dynamic CSS template as a `render()` method decorator.
```js
class Button extends Component {
@css((props) => ({
background: props.primary ? 'blue' : 'grey'
}))
render () {
// ...
}
}
```
## Installation
Simply install `decorator` addon and its dependencies:
- `cache`
- [`rule()`](./rule.md)
Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/drule.md
# Path: docs/drule.md
# `drule()` Addon
`drule()` (or *Dynamic Rule*) interface is similar to [`rule()`](./rule.md) interface, but also allows you
to create CSS dynamically inside your render function, making it a [5th generation](https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation)
interface.
```jsx
const css = {
border: '1px solid #888',
color: '#888',
};
const classNames = nano.drule(css);
```
Static use case is similar to [`rule()`](./rule.md) interface:
```jsx
```
But `drule()` also allows you to add custom styling overrides on the fly.
```jsx
```
Just like with `rule()` interface you can specify a semantic name.
```js
const classNames = drule(css, 'MyButton');
```
## Example
Below is an example of a React button component that changes its color based on `primary` prop.
```jsx
const classNames = drule({
border: '1px solid #888',
color: '#fff',
});
const Button = ({children, primary}) =>
;
```
## Installation
To use, install `drule` addon, which depends on `rule` and `cache` addons.
```js
import {create} from 'nano-css';
import {addon as addonCache} from 'nano-css/addon/cache';
import {addon as addonRule} from 'nano-css/addon/rule';
import {addon as addonDrule} from 'nano-css/addon/drule';
const nano = create();
addonCache(nano);
addonRule(nano);
addonDrule(nano);
const {rule, drule} = nano;
export {
rule,
drule
}
```
Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/dsheet.md
# Path: docs/dsheet.md
# `dsheet()` Addon
`dsheet()` (or *Dynamic Sheet*) interface is similar to [`sheet()`](./sheet.md) interface, but allows you to add
CSS overrides inside render functions, making it a [5th generation](https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation)
interface.
```js
const cssMap = {
input: {
border: '1px solid grey',
},
button: {
border: '1px solid red',
color: 'red',
}
};
const styles = dsheet(cssMap);
```
Usage:
```jsx
```
Optionally, you can name your dynamic style sheets.
```js
const styles = sheet(cssMap, 'ContactForm');
```
## Installation
Install `dsheet` addon and its dependencies:
- `cache`
- [`rule()`](./rule.md)
- [`sheet()`](./sheet.md)
Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/emmet.md
# Path: docs/emmet.md
# `emmet` Addon
This addon is a super-set for [`atoms`](./atoms.md) addon, but uses [Emmet](https://emmet.io/)
specific abbreviations.
> :warning: Since this is a shorthand library, similar to `atoms`, do not use both these
> libraries at the same time, as few of the abbreviations might conflict.
### Usage
```js
const className = rule({
c: '#fafafa',
bgc: '#424242',
bd: '1px solid #424242',
});
```
Those are good for **DX** and they will decrease your overall bundle size after
sufficient use. You can find the full up-to-date emmet list [here](../addon/emmet.js) or refer
[Emmet Cheatsheet](https://docs.emmet.io/cheat-sheet/) (CSS Section) for all possible abbreviations.
> Currently `@media` queries, `@keyframes` and related abbreviations are not supported. If a specific Emmet
> shorthand is **required** and is not present in this addon, please raise an issue requesting for
> the support.
## Installation
Simply install `emmet` addon. Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/extract.md
# Path: docs/extract.md
# `extract` Addon
This addon allows you to extract CSS styles into an external style sheet at build time. This
addon is not all-in-one solution, but rather the lowest level that enables style extraction
at build time, here is what it does:
- injects styles from [`sheet()`](./sheet.md), which are normally injected lazily
- renders at least once [`jsx()`](./jsx.md) and [`style()`](./style.md) components with default props
See demo [here](https://github.com/streamich/nano-css-extract-demo).
## Installation
Simply install `extract` addon. Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/global.md
# Path: docs/global.md
# `:global` Addon
`global` addon allows to inject global CSS. It introduces a `:global` selector that can be
used in any CSS-like object and exposes `global()` function for convenience.
Use `:global` selector.
```js
const className = nano.put('.foo', {
color: 'red',
'.nested': {
fontWeight: 'bold'
},
':global': {
'.global_class': {
border: '1px solid red'
}
}
});
```
This results in:
```css
.foo {
color: red;
}
.foo .nested {
font-weight: bold;
}
.global_class {
border: 1px solid red;
}
```
Use `global()` function to emit global CSS.
```js
nano.global({
'.global_class': {
border: '1px solid red'
}
});
```
## Installation
Simply install `global` addon. Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/googleFont.md
# Path: docs/googleFont.md
# `googleFont()` Addon
Creates `googleFont()` method that loads fonts from *Google Fonts*. Signature:
```ts
googleFont(name: string, widths?: number | number[], subsets?: string | string[])
```
## Example
Below example loads `Roboto Slab` font at `400` and `700` widths, including `cyrillic` characters.
```js
nano.googleFont('Roboto Slab', [400, 700], 'cyrillic');
```
Now you can use this font.
```js
const className = nano.rule({
fontFamily: '"Roboto Slab", sans'
});
```
## Installation
Simply install `googleFont` addon. Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/hydrate.md
# Path: docs/hydrate.md
# `hydrate` Addon
Re-hydrates CSS styles generated on the server.
First, install the `hydrate` addon, then add `nano-css` id to your style sheet.
```js
html += ``;
```
And when creating `nano-css` instance provide that style sheet in configuration.
```js
const isClient = typeof document === 'object';
const nano = create({
sh: isClient ? document.getElementById('nano-css') : null
});
```
That's it! `nano-css` will not inject CSS rules are already present in the style sheet.
You can also manually hydrate any stylesheet or external stylesheet you might have created using [`extract`](./extract.md) addon.
Let's say you have and external style sheet:
```html
```
You can hydrate it like so:
```js
nano.hydrate(document.getElementById('extracted-css'));
```
*P.S. Currently, does not hydrate media queries or animation keyframes.*
## Installation
Simply install `hydrate` addon.
Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/hyperstyle.md
# Path: docs/hyperstyle.md
# `hyperstyle()` Addon
The `hyperstyle()` creates a new hyperscript function `h` that you use to create your
virtual DOM elements.
```jsx
const h = nano.hyperstyle({
foo: {
color: 'red'
}
});
const App = () =>
h('div', {styleName: 'foo'}, 'My app...');
```
Then in your elements you use `styleName` prop to pick one of the defined styles.
For TypeScript you can set in `tsconfig.json` to use `h` as hyperscript function.
```json
{
"compilerOptions": {
"jsxFactory": "h"
}
}
```
For Babel you can use `jsx` pragma to set `h` as hyperscript function.
```js
/** @jsx h */
```
This way you can use JSX in your code:
```jsx
/** @jsx h */
const h = nano.hyperstyle({
foo: {
color: 'red'
}
});
const App = () =>
My app..
;
```
## Installation
Simply install `hyperstyle` addon and its dependencies:
- `cache`
- [`rule()`](./rule.md)
- [`sheet()`](./sheet.md)
Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/important.md
# Path: docs/important.md
# `!important` Addon
Adds `!important` to every style declaration.
## Installation
Simply install `important` addon. Read more about the [Addon Installation](./Addons.md#addon-installation).
---
# nano-css Documentation
# Source: https://raw.githubusercontent.com/streamich/nano-css/master/docs/jsx.md
# Path: docs/jsx.md
# `jsx()` Addon
`jsx()` is a [5th generation](https://github.com/streamich/freestyler/blob/master/docs/en/generations.md#5th-generation)
interface for creating styling blocks — components similar to *"styled components"*,
but which are more powerful.
```jsx
const Button = jsx('button', {
display: 'inline-block',
borderRadius: '3px',
padding: '0.5rem 0',
margin: '0.5rem 1rem',
width: '11rem',
background: 'transparent',
color: 'white',
border: '2px solid white',
});
```
---
> __Nota Bene__
>
> To use this interface you need to provide the hyperscript function `h` of your virtual
> DOM library when creating a `nano-css` instance. In case of React,
> this is the `createElement` function:
>
> ```js
> import {create} from 'nano-css';
> import {createElement} from 'react';
>
> const nano = create({
> h: createElement
> });
> ```
---
Optionally, you can name your styling block:
```js
const Button = jsx('button', css, 'MyButton');
```
Styling blocks pass all their props to the underlying element:
```jsx
```
However, some props have special meaning and are not passed through:
- `css` — a CSS-like object of dynamic style overrides
- `$as` — allows to overwrite the underlying element type
- `$ref` — allows to pass a `ref` to the underlying element
Add custom styling:
```jsx
```
Overwrite underlying element type:
```jsx
// Click me!
```
## Component as a Type
You can pass components as an element type.
```js
const Button = jsx(MyComp, css);
```
where
```jsx
const MyComp = (props) => {
return
};
```
## Composition
The above feature of passing component as a type allows you to do composition.
```js
const BaseButton = jsx('button', {
color: 'red',
border: '1px solid red',
});
const SmallButton = jsx(BaseButton, {
fontSize: '11px',
});
```
However, composition of styling blocks is not something that is encouraged, instead you might
consider using dynamic styling `css` prop:
```jsx
const BaseButton = jsx('button', {
color: 'red',
border: '1px solid red',
});
const Button = (props) => {
const {small, ...rest} = props;
const css = {};
if (small) {
css.fontSize = '11px';
}
return ;
};
```
## Changing Element Type
Let's say you created a `