Nano CSS

https://github.com/streamich/nano-css
Admin
Nano CSS is a tiny 5th generation CSS-in-JS library that provides a minimal base configuration (0.5...
Tokens:48,295
Snippets:778
Trust Score:8.5
License:Unlicense
Update:6 months ago
Show doc for...
Tokens:
Raw
### Recommended Project Setup with nano-css

Source: https://context7.com/streamich/nano-css/llms.txt

A full setup example for production projects, installing all commonly needed addons and exporting a configured nano instance. Ensure addons are installed in dependency order.

```javascript
// nano.js - Create and export configured nano instance
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';
import {addon as addonPrefixer} from 'nano-css/addon/prefixer';
import {addon as addonHydrate} from 'nano-css/addon/hydrate';

const isClient = typeof document === 'object';

const nano = create({
    pfx: 'app-',
    h: createElement,
    sh: isClient ? document.getElementById('nano-css') : null
});

// Install addons in dependency order
addonCache(nano);
addonStable(nano);
addonNesting(nano);
addonAtoms(nano);
addonKeyframes(nano);
addonRule(nano);
addonSheet(nano);
addonJsx(nano);
addonPrefixer(nano);
addonHydrate(nano);

export const {rule, sheet, jsx, keyframes, put} = nano;
export {nano};

// Usage in components
import {rule, sheet, jsx} from './nano';

const Button = jsx('button', {
    d: 'inline-block',
    pad: '12px 24px',
    bgc: '#007bff',
    col: 'white',
    bd: 'none',
    bdrad: '4px',
    cur: 'pointer',
    trs: 'all 0.2s',
    '&:hover': {
        bgc: '#0056b3'
    }
});

const styles = sheet({
    container: {
        maxWidth: '1200px',
        mar: '0 auto',
        pad: '0 20px'
    }
});
```

--------------------------------

### nano-css Quick Start with Rule Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/index.mdx

Demonstrates how to initialize nano-css and apply the rule addon to create styles with pseudo-class support. Ensure nano-css and the rule addon are installed.

```javascript
import { create } from 'nano-css';
import { addon as addonRule } from 'nano-css/addon/rule';

const nano = create();
addonRule(nano);

const className = nano.rule({
  color: 'tomato',
  ':hover': {
    color: 'blue',
  },
});
```

--------------------------------

### Install nano-css with Addons

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/core/drule.mdx

Shows the necessary imports and setup for using nano-css with the cache, rule, and drule addons.

```javascript
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);
```

--------------------------------

### Installation

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/advanced/google-font.mdx

Instructions on how to install and enable the googleFont addon for nano-css.

```APIDOC
## Installation

### Description
Import and apply the googleFont addon to your nano-css instance.

### Method
```js
import { addon as addonGoogleFont } from 'nano-css/addon/googleFont';
addonGoogleFont(nano);
```
```

--------------------------------

### Installation of global() Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/global.mdx

Import and initialize the global addon for nano-css to enable the `global()` function. This is a necessary setup step before using global styles.

```javascript
import { addon as addonGlobal } from 'nano-css/addon/global';
addonGlobal(nano);
```

--------------------------------

### Install Snake Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/snake.mdx

Import and initialize the snake addon for nano-css. This setup step is required before using snake's method chaining features.

```javascript
import { addon as addonSnake } from 'nano-css/addon/snake';
addonSnake(nano);
```

--------------------------------

### Install and Use nano-css Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/index.mdx

Demonstrates the installation pattern for nano-css addons. Import the addon function and then use it to extend the nano-css renderer.

```javascript
import { addon as addonRule } from 'nano-css/addon/rule';

addonRule(nano);
nano.rule({ color: 'red' });
```

--------------------------------

### nano-css Addons Installation

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/style.mdx

Shows the necessary addons to install and import for using the style() function.

```APIDOC
## Installation

### Description
Requires `cache`, `rule`, and `jsx` addons to be imported and applied to nano-css.

### Method
Import and Addon Application

### Endpoint
N/A

### Parameters
None

### Request Example
```js
import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonJsx } from 'nano-css/addon/jsx';
import { addon as addonStyle } from 'nano-css/addon/style';

addonCache(nano);
addonRule(nano);
addonJsx(nano);
addonStyle(nano);
```

### Response
N/A
```

--------------------------------

### Recommended Setup with Addons

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/getting-started/installation.mdx

Configure and export a nano-css renderer with multiple addons for a real project. This setup includes addons for caching, stable class names, nesting, atoms, keyframes, rules, sheets, and JSX.

```javascript
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({
  pfx: 'my-app-',
  h: createElement,
});

addonCache(nano);
addonStable(nano);
addonNesting(nano);
addonAtoms(nano);
addonKeyframes(nano);
addonRule(nano);
addonSheet(nano);
addonJsx(nano);

const { rule, sheet, jsx, keyframes } = nano;

export { nano, rule, sheet, jsx, keyframes };
```

--------------------------------

### nano-css Addon Installation

Source: https://github.com/streamich/nano-css/blob/master/docs/drule.md

Import and initialize the `cache`, `rule`, and `drule` addons for nano-css. This setup is required before using `drule()`.

```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
}
```

--------------------------------

### Install nano-css Addons

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/component.mdx

Install and initialize the `cache`, `rule`, and `component` addons for nano-css. Ensure these addons are applied to the nano instance before use.

```js
import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonComponent } from 'nano-css/addon/component';

addonCache(nano);
addonRule(nano);
addonComponent(nano);
```

--------------------------------

### Addon Installation Pattern

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/getting-started/installation.mdx

Demonstrates how to install and use a specific addon, `rule`, by importing it and applying it to the nano-css renderer. This pattern applies to all available addons.

```javascript
import { addon as addonRule } from 'nano-css/addon/rule';

addonRule(nano);

nano.rule({ color: 'red' });
```

--------------------------------

### Installing the `rule` Addon

Source: https://github.com/streamich/nano-css/blob/master/docs/rule.md

Import and apply the `rule` addon to your nano-css instance. This setup is necessary before you can use the `rule()` function.

```javascript
import {create} from 'nano-css';
import {addon} from 'nano-css/addon/rule';

const nano = create();
addon(nano);
const {rule} = nano;

export {
    rule
}
```

--------------------------------

### Recommended Setup with Addons

Source: https://github.com/streamich/nano-css/blob/master/docs/Installation.md

A comprehensive setup for large projects using nano-css with multiple addons like cache, stable, nesting, atoms, keyframes, rule, sheet, and jsx. This configuration includes a custom prefix and React's createElement.

```javascript
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,
};
```

--------------------------------

### Install and Initialize nano-css with rule() addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/core/rule.mdx

Import `create` and the `rule` addon, then initialize nano-css and apply the addon.

```javascript
import { create } from 'nano-css';
import { addon } from 'nano-css/addon/rule';

const nano = create();
addon(nano);

const { rule } = nano;
```

--------------------------------

### Installation

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/core/drule.mdx

To use drule(), you need to install and import the necessary addons: cache, rule, and drule.

```APIDOC
## Installation

### Description
Requires `rule` and `cache` addons. Import `create` from `nano-css` and the necessary addons.

### Method
Import and Initialize

### Endpoint
N/A

### Request Example
```javascript
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);
```
```

--------------------------------

### Install nano-css Nesting Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/nesting.mdx

Import and initialize the nesting addon for nano-css to enable extended nesting features. This is a required setup step for using the nesting functionalities.

```javascript
import { addon as addonNesting } from 'nano-css/addon/nesting';
addonNesting(nano);
```

--------------------------------

### Install and Add hydrate() Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/advanced/hydrate.mdx

Install the `hydrate` addon and then add it to your nano-css instance.

```javascript
import { addon as addonHydrate } from 'nano-css/addon/hydrate';
addonHydrate(nano);
```

--------------------------------

### Installation and Addons

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/styled.mdx

Details the required addons for using the styled()() functionality.

```APIDOC
## Installation

### Description
Requires `cache`, `rule`, `jsx`, and `style` addons to be enabled.

### Method
`addon()`

### Endpoint
N/A (JavaScript API)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonJsx } from 'nano-css/addon/jsx';
import { addon as addonStyle } from 'nano-css/addon/style';
import { addon as addonStyled } from 'nano-css/addon/styled';

addonCache(nano);
addonRule(nano);
addonJsx(nano);
addonStyle(nano);
addonStyled(nano);
```

### Response
#### Success Response (200)
Addons are successfully registered with nano-css.

#### Response Example
N/A (Setup process)
```

--------------------------------

### Install spread addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/advanced/spread.mdx

Import and initialize the spread addon for nano-css before using the spread() function.

```js
import { addon as addonSpread } from 'nano-css/addon/spread';
addonSpread(nano);
```

--------------------------------

### Install prefixer addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/prefixer.mdx

Import and initialize the prefixer addon with your nano-css instance.

```javascript
import { addon as addonPrefixer } from 'nano-css/addon/prefixer';
addonPrefixer(nano);
```

--------------------------------

### Installation of Decorator Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/decorator.mdx

Install the necessary addons (cache, rule, decorator) for nano-css by calling their respective `addon` functions.

```js
import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonDecorator } from 'nano-css/addon/decorator';

addonCache(nano);
addonRule(nano);
addonDecorator(nano);
```

--------------------------------

### Install nano-css Array Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/array.mdx

Import and initialize the array addon for nano-css to enable its features.

```javascript
import { addon as addonArray } from 'nano-css/addon/array';
addonArray(nano);
```

--------------------------------

### Install and Configure AMP Addon

Source: https://github.com/streamich/nano-css/blob/master/docs/amp.md

Import and apply the AMP addon to nano-css for basic AMP compliance.

```javascript
import {addon as addonAmp} from 'nano-css/addon/amp';

addonAmp(nano);
```

--------------------------------

### Install and Configure `limit` Addon

Source: https://github.com/streamich/nano-css/blob/master/docs/limit.md

Install the `limit` addon and specify the maximum server-side style sheet size in bytes. Defaults to 50000 bytes if not provided.

```javascript
import {addon as addonLimit} from 'nano-css/addon/limit';

addonLimit(nano, 100000);
```

--------------------------------

### nano-css Addon Installation

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/hyperstyle.mdx

Install and apply the necessary addons (cache, rule, sheet, hyperstyle) for nano-css to function correctly.

```js
import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonSheet } from 'nano-css/addon/sheet';
import { addon as addonHyperstyle } from 'nano-css/addon/hyperstyle';

addonCache(nano);
addonRule(nano);
addonSheet(nano);
addonHyperstyle(nano);
```

--------------------------------

### Install Sourcemaps Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/sourcemaps.mdx

Import and apply the sourcemaps addon to nano-css. Ensure nano-css is initialized before calling this.

```javascript
import { addon as addonSourcemaps } from 'nano-css/addon/sourcemaps';
addonSourcemaps(nano);
```

--------------------------------

### Install nano-css addons

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/style.mdx

Import and apply the necessary addons (cache, rule, jsx, style) to nano-css before use.

```js
import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonJsx } from 'nano-css/addon/jsx';
import { addon as addonStyle } from 'nano-css/addon/style';

addonCache(nano);
addonRule(nano);
addonJsx(nano);
addonStyle(nano);
```

--------------------------------

### Install nano-css

Source: https://github.com/streamich/nano-css/blob/master/docs/Installation.md

Install nano-css using npm. This command adds the package to your project's dependencies.

```bash
npm i nano-css --save
```

--------------------------------

### Install nano-css Addons for dsheet()

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/core/dsheet.mdx

The dsheet() addon requires the cache, rule, and sheet addons to be installed and applied to the nano instance.

```javascript
import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonSheet } from 'nano-css/addon/sheet';
import { addon as addonDsheet } from 'nano-css/addon/dsheet';

addonCache(nano);
addonRule(nano);
addonSheet(nano);
addonDsheet(nano);
```

--------------------------------

### Install and initialize the Tachyons addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/tachyons.mdx

Import the tachyons addon and apply it to your nano-css instance. This makes Tachyons utility classes available for use.

```javascript
import { addon as addonTachyons } from 'nano-css/addon/tachyons';

addonTachyons(nano);
```

--------------------------------

### Install nano-css addons for jsx()

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/jsx.mdx

To use the jsx() function, you must install and enable the `cache`, `rule`, and `jsx` addons for nano-css.

```js
import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonJsx } from 'nano-css/addon/jsx';

addonCache(nano);
addonRule(nano);
addonJsx(nano);
```

--------------------------------

### Install cssom and vcssom Addons

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/advanced/vcssom.mdx

Import and apply the necessary addons for cssom and vcssom functionality to nano-css.

```javascript
import { addon as addonCssom } from 'nano-css/addon/cssom';
import { addon as addonVcssom } from 'nano-css/addon/vcssom';

addonCssom(nano);
addonVcssom(nano);
```

--------------------------------

### Install CSSOM Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/advanced/cssom.mdx

Import and initialize the CSSOM addon for nano-css. This enables the direct CSS rule creation capabilities.

```javascript
import { addon as addonCssom } from 'nano-css/addon/cssom';
addonCssom(nano);
```

--------------------------------

### Installation of useStyles() Addons

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/use-styles.mdx

Requires the 'rule' and 'sheet' addons to be imported and applied to nano-css before using useStyles().

```js
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonSheet } from 'nano-css/addon/sheet';
import { addon as addonUseStyles } from 'nano-css/addon/useStyles';

addonRule(nano);
addonSheet(nano);
addonUseStyles(nano);
```

--------------------------------

### Install RTL Addon for nano-css

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/advanced/rtl.mdx

Import and initialize the RTL addon to enable automatic style flipping for right-to-left layouts. This requires the nano-css library to be set up.

```javascript
import { addon as addonRtl } from 'nano-css/addon/rtl';
addonRtl(nano);
```

--------------------------------

### Installation of withStyles() Addons

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/with-styles.mdx

Requires 'rule' and 'sheet' addons to be imported and applied to nano-css before using withStyles().

```js
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonSheet } from 'nano-css/addon/sheet';
import { addon as addonWithStyles } from 'nano-css/addon/withStyles';

addonRule(nano);
addonSheet(nano);
addonWithStyles(nano);
```

--------------------------------

### Install nano-css atoms addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/atoms.mdx

Import the `addon` function from `nano-css/addon/atoms` and pass it to the `nano` instance to enable the atoms addon.

```javascript
import { addon as addonAtoms } from 'nano-css/addon/atoms';
addonAtoms(nano);
```

--------------------------------

### Install Sheet Preset

Source: https://github.com/streamich/nano-css/blob/master/docs/Presets.md

Use the sheet preset to install the sheet addon along with stable, nesting, atoms, and keyframes addons. This provides a convenient way to set up common styling functionalities.

```javascript
import {preset} from 'nano-css/preset/sheet';

const {rule, sheet} = preset();

export {
    rule,
    sheet
};
```

--------------------------------

### Install sheet() and rule() addons for nano-css

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/core/sheet.mdx

To use the sheet() function, you need to install both the rule and sheet addons for nano-css. Import them and then apply them to your nano instance.

```javascript
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonSheet } from 'nano-css/addon/sheet';

addonRule(nano);
addonSheet(nano);
```

--------------------------------

### Install Stylis Addon for nano-css

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/stylis.mdx

Import and initialize the Stylis addon to enable Stylis string syntax with nano-css. This is required before using Stylis features.

```javascript
import { addon as addonStylis } from 'nano-css/addon/stylis';
addonStylis(nano);
```

--------------------------------

### Install and Apply Addons in nano-css

Source: https://github.com/streamich/nano-css/blob/master/docs/Addons.md

Demonstrates how to import and apply addons like `rule()` and `atoms` to a nano-css renderer instance. Ensure you import the addon as `addon` and then apply it to your `nano` object.

```javascript
import {addon as addonXXX} from 'nano-css/addon/xxx';

addonXXX(nano);
```

```javascript
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);
```

--------------------------------

### Initialize googleFont() Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/advanced/google-font.mdx

Import and initialize the googleFont addon with your nano-css instance to enable its functionality. This is a required setup step before using googleFont().

```javascript
import { addon as addonGoogleFont } from 'nano-css/addon/googleFont';
addonGoogleFont(nano);
```

--------------------------------

### Install Extract Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/advanced/extract.mdx

Import and apply the extract addon to your nano-css instance to enable build-time CSS extraction.

```javascript
import { addon as addonExtract } from 'nano-css/addon/extract';
addonExtract(nano);
```

--------------------------------

### Install nano-css Units Addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/units.mdx

Import and apply the units addon to your nano-css instance to enable unit conversion functions.

```javascript
import { addon as addonUnits } from 'nano-css/addon/units';
addonUnits(nano);
```

--------------------------------

### Apply Styles with Chained Methods

Source: https://github.com/streamich/nano-css/blob/master/docs/snake.md

Chain methods to apply various styles. This example demonstrates background and padding.

```javascript
nano.s.bg('pink').pad('20px'); // etc..
```

--------------------------------

### Install Virtual Addon for nano-css

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/advanced/virtual.mdx

Import and apply the virtual addon to your nano-css instance to enable virtual CSS capabilities. Ensure the addon is correctly integrated before use.

```javascript
import { addon as addonVirtual } from 'nano-css/addon/virtual';
addonVirtual(nano);
```

--------------------------------

### Basic Usage of nano-css

Source: https://github.com/streamich/nano-css/blob/master/docs/Installation.md

Create a nano renderer and use `put` to add CSS rules. This example demonstrates adding a simple class to the DOM.

```jsx
import {create} from 'nano-css';

const nano = create();

nano.put('.test', {
    color: 'red',
    border: '1px solid red'
});

<div className='test'>Hello world!</div>
```

--------------------------------

### Install Required Addons for nano-css

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/styled.mdx

Before using nano-css features like styled()(), ensure all necessary addons (cache, rule, jsx, style, styled) are imported and initialized.

```js
import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonJsx } from 'nano-css/addon/jsx';
import { addon as addonStyle } from 'nano-css/addon/style';
import { addon as addonStyled } from 'nano-css/addon/styled';

addonCache(nano);
addonRule(nano);
addonJsx(nano);
addonStyle(nano);
addonStyled(nano);
```

--------------------------------

### Example of unitless CSS output

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/unitless.mdx

Demonstrates how the unitless addon transforms numeric values into CSS rules with appended units for properties requiring them, and leaves others unitless.

```javascript
nano.put('.foo', {
  width: 50,
  zIndex: 10,
});
```

```css
.foo {
  width: 50px;
  z-index: 10;
}
```

--------------------------------

### Initialize nano-css with the Sheet Preset

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/getting-started/presets.mdx

Use the `sheet` preset for a basic setup including rule, sheet, stable, nesting, atoms, keyframes, and sourcemaps addons. No additional configuration is required.

```javascript
import { preset } from 'nano-css/preset/sheet';

const { rule, sheet } = preset();

export { rule, sheet };
```

--------------------------------

### Install Emmet Addon for nano-css

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/emmet.mdx

Import the `addonEmmet` from `nano-css/addon/emmet` and apply it to your nano-css instance. This enables the use of Emmet abbreviations.

```javascript
import { addon as addonEmmet } from 'nano-css/addon/emmet';
addonEmmet(nano);
```

--------------------------------

### Render HTML with Generated Class Name

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/core/rule.mdx

Example of how to apply the generated class name to an HTML element.

```html
<div class={className}>Hello world!</div>
```

--------------------------------

### Generated Global CSS

Source: https://github.com/streamich/nano-css/blob/master/docs/global.md

This is the CSS output generated by the :global selector example, demonstrating the injected global styles.

```css
.foo {
    color: red;
}
.foo .nested {
    font-weight: bold;
}
.global_class {
    border: 1px solid red;
}
```

--------------------------------

### Install !important addon

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/important.mdx

Import and apply the !important addon to your nano-css instance. This will make all subsequent style declarations have the !important flag.

```javascript
import { addon as addonImportant } from 'nano-css/addon/important';
addonImportant(nano);
```

--------------------------------

### Install Stable Addon for nano-css

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/stable.mdx

Import and apply the stable addon to nano-css to ensure deterministic class name generation. This is particularly useful for server-side rendering.

```javascript
import { addon as addonStable } from 'nano-css/addon/stable';
addonStable(nano);
```

--------------------------------

### Create a link component using an existing button component

Source: https://github.com/streamich/nano-css/blob/master/docs/jsx.md

This example shows how to create a new component (`Link`) that reuses the styles of an existing styled component (`Button`) but renders as a different HTML element (`<a>`) by overriding the `$as` prop.

```js
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',
});

const Link = (props) => Button({
    ...props,
    $as: 'a'
});

<Link>Click me!</Link>
// <a>Click me!</a>
```

--------------------------------

### Apply Left-to-Right Styles with `rtl` Addon

Source: https://github.com/streamich/nano-css/blob/master/docs/rtl.md

Use this snippet to define styles that will be automatically flipped for RTL support. Ensure the `rtl` addon is installed.

```javascript
nano.put('.foo', {
    textAlign: 'left',
    marginLeft: '100px'
});
```

--------------------------------

### Re-hydrate Server-Side Generated CSS

Source: https://github.com/streamich/nano-css/blob/master/docs/SSR.md

To re-hydrate server-generated CSS, install the `hydrate` addon and provide the style sheet to the nano-css instance during creation. This example assumes the existence of a `document` object.

```javascript
const nano = create({
    sh: typeof document === 'object' ? document.getElementById('nano-css') : null
});

html += `<style id="nano-css">${nano.raw}</style>`;
```

--------------------------------

### Dynamic styling for button size variation

Source: https://github.com/streamich/nano-css/blob/master/docs/jsx.md

An alternative to direct composition, this example shows how to achieve different button sizes using dynamic styling via the `css` prop within a single component. This approach is generally preferred.

```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 <BaseButton {...rest} css={css} />;
};
```

--------------------------------

### Configure nano-css with Options

Source: https://github.com/streamich/nano-css/blob/master/docs/Installation.md

Configure the `create()` function with options such as a custom prefix and a hyperscript function for JSX.

```javascript
import {createElement} from 'react';

const nano = create({
    pfx: 'my-company-',
    h: createElement
});
```

--------------------------------

### nano-css Configuration

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/getting-started/configuration.mdx

The `create()` function accepts an optional configuration object to customize nano-css behavior.

```APIDOC
## Configuration Options

The `create()` function accepts an optional configuration object.

```js
import { create } from 'nano-css';

const nano = create(config);
```

### Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `pfx` | `string` | `'_'` | Prefix added to all generated class and animation names |
| `h` | `function` | — | Hyperscript function from your virtual DOM library (e.g. `React.createElement`). Required for `jsx()`, `style()`, `styled()`, and `component` addons |
| `sh` | `HTMLElement` | — | DOM style sheet element for re-hydrating server-rendered styles |
| `verbose` | `boolean` | `false` | Enable verbose console output in development mode |

### Examples

#### With React

```js
import { createElement } from 'react';
import { create } from 'nano-css';

const nano = create({
  pfx: 'my-company-',
  h: createElement,
});
```

#### With Preact

```js
import { h } from 'preact';
import { create } from 'nano-css';

const nano = create({
  h: h,
});
```

#### With Server-Side Rendering

```js
const nano = create({
  sh: typeof document === 'object'
    ? document.getElementById('nano-css')
    : null,
});
```
```

--------------------------------

### Basic nano-css Initialization

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/getting-started/configuration.mdx

Initializes nano-css with a configuration object. The `config` object can contain various options to customize nano-css behavior.

```javascript
import { create } from 'nano-css';

const nano = create(config);
```

--------------------------------

### Create Nano CSS Instance

Source: https://context7.com/streamich/nano-css/llms.txt

Initializes a nano-css renderer with optional configuration for prefixes, hyperscript functions, and hydration support. Use `put()` to inject basic styles.

```javascript
import {create} from 'nano-css';
import {createElement} from 'react';

// Basic creation
const nano = create();

// With configuration options
const nano = create({
    pfx: 'my-app-',           // Prefix for generated class names
    h: createElement,          // Hyperscript function for jsx() addon
    sh: document.getElementById('nano-css'),  // Style sheet for hydration
    verbose: true              // Enable console warnings in DEV mode
});

// Inject basic styles
ano.put('.button', {
    display: 'inline-block',
    padding: '10px 20px',
    backgroundColor: 'blue',
    color: 'white',
    ':hover': {
        backgroundColor: 'darkblue'
    }
});
```

--------------------------------

### Define a custom component for jsx()

Source: https://github.com/streamich/nano-css/blob/master/docs/jsx.md

Example of a custom React component that can be used as an element type with the `jsx()` addon.

```jsx
const MyComp = (props) => {
    return <button {...props} />
};
```

--------------------------------

### style() - Creating Styled Components

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/style.mdx

Demonstrates the basic usage of the style() function to create a styled button component with static and dynamic styles.

```APIDOC
## POST /style()

### Description
Creates styled components with support for dynamic style templates.

### Method
POST (conceptual, as style() is a function call)

### Endpoint
N/A (Function Call)

### Parameters
#### Arguments
- **type** (String or Component) - Required - The HTML tag name or component to style.
- **css** (Object) - Required - A static CSS-like object defining the base styles.
- **dynamicCss** (Function) - Optional - A function that accepts props and returns a CSS-like object for dynamic styling.
- **name** (String) - Optional - A semantic name for the component.

### Request Example
```jsx
const Button = nano.style('button', {
  display: 'inline-block',
  borderRadius: '3px',
  padding: '0.5rem 0',
  margin: '0.5rem 1rem',
  width: '11rem',
  color: 'white',
  border: '2px solid white',
}, (props) => ({
  background: props.primary ? 'blue' : 'grey',
  fontSize: props.small ? '12px' : '16px',
}));

<Button primary>Click me!</Button>
```

### Response
#### Success Response (Component)
Returns a React component with the applied styles.

#### Response Example
```jsx
<button class="css-12345">Click me!</button>
```
```

--------------------------------

### Add CSS Units with nano.units functions

Source: https://github.com/streamich/nano-css/blob/master/docs/units.md

Use the provided functions to append CSS units to numbers. Ensure the addon is installed.

```javascript
nano.px(36);
// 36px
ano.em(1);
// 1em
ano.pct(25);
// 25%
ano.inch(3);
// 3in
// ...
```

--------------------------------

### Initialize nano-css with the VDOM Preset

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/getting-started/presets.mdx

The `vdom` preset includes all `sheet` preset addons plus the `jsx()` addon for virtual DOM libraries. It requires you to provide a hyperscript function (e.g., `createElement` from React) during initialization.

```javascript
import { createElement } from 'react';
import { preset } from 'nano-css/preset/vdom';

const { rule, sheet, jsx } = preset({ h: createElement });

export { rule, sheet, jsx };
```

--------------------------------

### Create and Extend nano-css Renderer

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/index.mdx

Initialize the nano-css renderer and extend it with the 'rule' and 'atoms' addons. The 'rule' addon allows generating class names from CSS objects, and 'atoms' provides shorthand CSS properties.

```javascript
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);

const className = nano.rule({
  col: 'red',
  bdrad: '4px',
});
```

--------------------------------

### Initialize nano-css with the React Preset

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/getting-started/presets.mdx

The `react` preset extends the `vdom` preset with `snake`, `style()`, `styled()()`, and `decorator` addons. It automatically configures `React.createElement` as the hyperscript function, simplifying React integration.

```javascript
import { preset } from 'nano-css/preset/react';

const { rule, sheet, jsx, styled } = preset();

export { rule, sheet, jsx, styled };
```

--------------------------------

### Get Generated CSS Object with `.obj`

Source: https://github.com/streamich/nano-css/blob/master/docs/snake.md

Retrieve the current CSS-like object using the `.obj` property after applying styles via method chaining.

```javascript
nano.s.col('red').bd('1px solid red').obj;
```

--------------------------------

### Basic Usage of nano-css

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/getting-started/installation.mdx

Create a renderer and inject styles using the `put` method. This is useful for simple, on-the-fly style injection.

```javascript
import { create } from 'nano-css';

const nano = create();

nano.put('.test', {
  color: 'red',
  border: '1px solid red',
});
```

```html
<div class="test">Hello world!</div>
```

--------------------------------

### Comma-Separated Selectors in nano-css

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/nesting.mdx

Use comma-separated selectors within the nesting addon to apply styles to multiple elements simultaneously. Ensure the nesting addon is installed.

```javascript
nano.put('.foo', {
  '.bar, .baz': {
    color: 'red',
  },
});
```

```css
.foo .bar, .foo .baz {
  color: red;
}
```

--------------------------------

### Import and Apply Eric Meyer Condensed Reset

Source: https://github.com/streamich/nano-css/blob/master/docs/resets.md

Import the Eric Meyer Condensed reset addon and apply it to your nano-css instance. Ensure the addon is installed.

```javascript
import {addon as addonReset} from 'nano-css/addon/reset/EricMeyerCondensed';

adddonReset(nano);
```

--------------------------------

### Generate Unique Class Name with rule()

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/core/rule.mdx

Use `rule()` to create a CSS rule and get a unique class name. Supports pseudo-classes like `:hover`.

```javascript
const className = nano.rule({
  color: 'tomato',
  ':hover': {
    color: 'blue',
  },
});
```

--------------------------------

### styled()() Usage

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/styled.mdx

Demonstrates the basic usage of styled()() to create a styled component.

```APIDOC
## styled()()

### Description
Provides a familiar styled-components API with pre-generated HTML tag helpers.

### Method
`styled()`

### Endpoint
N/A (JavaScript API)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
const Button = nano.styled('button')({
  display: 'inline-block',
  borderRadius: '3px',
}, (props) => ({
  background: props.primary ? 'blue' : 'grey',
}));
```

### Response
#### Success Response (200)
Returns a React component.

#### Response Example
N/A (Component creation)
```

--------------------------------

### Initialize nano-css with React's createElement

Source: https://github.com/streamich/nano-css/blob/master/docs/jsx.md

To use the `jsx()` addon with React, you must provide React's `createElement` function to the `nano-css` instance during creation. This ensures proper integration with React's virtual DOM.

```js
import {create} from 'nano-css';
import {createElement} from 'react';

const nano = create({
    h: createElement
});
```

--------------------------------

### Whitelist Pass-through Props for Styled Components

Source: https://github.com/streamich/nano-css/blob/master/docs/style.md

Explicitly define which props should be passed through to the underlying DOM element to prevent unwanted attributes. This example whitelists `title` and `onClick`.

```jsx
const ButtonWhitelist = ({className, children, title, onClick}) =>
    <button
        className={className}
        title={title}
        onClick={onClick}
    >{children}</button>;

const Button = style(ButtonWhitelist, {
    // ...
});

<Button primary small title="Click it!" onClick={}>Click me!</Button>
```

--------------------------------

### style() Addon Usage

Source: https://github.com/streamich/nano-css/blob/master/docs/style.md

Demonstrates how to use the style() function to create a styled button component with static and dynamic styles based on props.

```APIDOC
## POST /api/users

### Description
This endpoint allows for the creation of new user resources.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Query Parameters
- **limit** (integer) - Optional - The maximum number of users to return.

#### Request Body
- **username** (string) - Required - The desired username for the new user.
- **email** (string) - Required - The email address of the new user.

### Request Example
```json
{
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```

### Response
#### Success Response (200)
- **id** (integer) - The unique identifier for the newly created user.
- **username** (string) - The username of the created user.
- **email** (string) - The email address of the created user.

#### Response Example
```json
{
  "id": 123,
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

--------------------------------

### Apply Pseudo Selectors

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/snake.mdx

Chain pseudo-selectors like hover and focus to apply styles conditionally. This example sets the text color to red on hover and yellow on focus.

```javascript
nano.s.hover(nano.s.col('red')).focus(nano.s.col('yellow'));
```

--------------------------------

### Initialize AMP Addon in nano-css

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/advanced/amp.mdx

Import and apply the AMP addon to your nano-css instance. This enforces AMP style sheet restrictions by default.

```javascript
import { addon as addonAmp } from 'nano-css/addon/amp';

addonAmp(nano);
```

```javascript
// With options
addonAmp(nano, {
  limit: 50000,
  removeImportant: true,
  removeReserved: true,
  removeBanned: true,
});
```

--------------------------------

### React Button Component with Dynamic Styling

Source: https://github.com/streamich/nano-css/blob/master/docs/drule.md

Example of a React button component that changes its background color based on a `primary` prop using `drule()` for dynamic styling.

```jsx
const classNames = drule({
    border: '1px solid #888',
    color: '#fff',
});

const Button = ({children, primary}) =>
    <button className={classNames({
        background: primary ? 'blue' : 'grey'
    })}>
        {children}
    </button>;
```

--------------------------------

### Apply styles with prefixer

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/addons/prefixer.mdx

Use nano.put to apply styles. The prefixer addon will automatically add vendor prefixes.

```javascript
nano.put('.foo', {
  flex: 1,
});
```

--------------------------------

### Create Styled Components with styled()() Addon

Source: https://context7.com/streamich/nano-css/llms.txt

Utilize the `styled()()` addon for an alternative syntax to create styled components, featuring pre-generated HTML tag helpers and dynamic style functions. Ensure all necessary addons are imported and initialized.

```javascript
import {create} from 'nano-css';
import {createElement} from 'react';
import {addon as addonCache} from 'nano-css/addon/cache';
import {addon as addonRule} from 'nano-css/addon/rule';
import {addon as addonJsx} from 'nano-css/addon/jsx';
import {addon as addonStyle} from 'nano-css/addon/style';
import {addon as addonStyled} from 'nano-css/addon/styled';

const nano = create({h: createElement});
addonCache(nano);
addonRule(nano);
addonJsx(nano);
addonStyle(nano);
addonStyled(nano);

const {styled} = nano;

// Using pre-generated tag helpers
const Button = styled.button({
    display: 'inline-block',
    padding: '12px 24px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
}, (props) => ({
    backgroundColor: props.primary ? '#007bff' : '#6c757d',
    color: 'white',
    fontSize: props.small ? '14px' : '16px'
}), 'Button');

// Alternative syntax with string tag
const Input = styled('input')({
    padding: '10px',
    border: '1px solid #ccc',
    borderRadius: '4px'
}, (props) => ({
    borderColor: props.error ? 'red' : '#ccc'
}));

// Usage
<Button>Default</Button>
<Button primary>Primary</Button>
<Button primary small>Small Primary</Button>
<Input placeholder="Enter text" />
<Input error placeholder="Has error" />
```

--------------------------------

### Use `stylis` syntax with nano-css

Source: https://github.com/streamich/nano-css/blob/master/docs/stylis.md

Use the `stylis` pre-processor to write CSS as a string. This allows for nested rules and other `stylis` features directly in your JavaScript. Ensure `stylis` is installed.

```javascript
const className = nano.rule(`
    color: red;
    &:hover {
        color: blue
    }
`);
```

--------------------------------

### Create Styled Hyperscript Function

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/hyperstyle.mdx

Use hyperstyle() to create a hyperscript function that maps styleName props to class names. This example defines a 'foo' style and applies it to a div.

```jsx
const h = nano.hyperstyle({
  foo: {
    color: 'red',
  },
});

const App = () => h('div', { styleName: 'foo' }, 'My app...');
```

--------------------------------

### nano-css Built-in API

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/getting-started/configuration.mdx

The renderer object created by `create()` includes several properties and methods out of the box.

```APIDOC
## Built-in API

The renderer object created by `create()` includes these properties out of the box (no addons required):

| Property | Description |
|----------|-------------|
| `nano.put(selector, css, atrule?)` | Inject CSS by selector and CSS-like object |
| `nano.putRaw(rawCss)` | Inject a raw CSS string |
| `nano.raw` | Accumulated CSS string (useful for server-side rendering) |
| `nano.client` | `true` when running in a browser environment |
| `nano.pfx` | The configured class name prefix |
```

--------------------------------

### Blacklist Non-pass-through Props for Styled Components

Source: https://github.com/streamich/nano-css/blob/master/docs/style.md

Exclude specific semantic props from being passed to the underlying DOM element. This example blacklists `primary` and `small` using rest parameters.

```jsx
const ButtonBlacklist = ({primary, small, ...rest}) =>
    <button {...rest} />;

const Button = style(ButtonBlacklist, {
    // ...
});

<Button primary small title="Click it!" onClick={}>Click me!</Button>
```

--------------------------------

### jsx() - Creating Styled Components

Source: https://github.com/streamich/nano-css/blob/master/site/content/docs/styling/jsx.mdx

Demonstrates how to use the jsx() function to create a styled button component.

```APIDOC
## POST /api/users

### Description
Creates a new user in the system.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Request Body
- **username** (string) - Required - The desired username for the new user.
- **email** (string) - Required - The email address of the new user.
- **password** (string) - Required - The password for the new user.

### Request Example
```json
{
  "username": "johndoe",
  "email": "john.doe@example.com",
  "password": "securepassword123"
}
```

### Response
#### Success Response (201)
- **id** (string) - The unique identifier for the newly created user.
- **username** (string) - The username of the created user.
- **email** (string) - The email address of the created user.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

--------------------------------

### Add Vendor Prefixes with `prefixer`

Source: https://github.com/streamich/nano-css/blob/master/docs/prefixer.md

Use the `prefixer` addon to automatically apply vendor prefixes to CSS properties. This example shows how to add a style with `flex: 1`, which will be prefixed.

```javascript
nano.put('.foo', {
    flex: 1
});
```

--------------------------------

### Use JSX with `hyperstyle()` and Babel pragma

Source: https://github.com/streamich/nano-css/blob/master/docs/hyperstyle.md

Combine the Babel pragma with `nano.hyperstyle()` to use JSX syntax for creating virtual DOM elements with defined styles.

```jsx
/** @jsx h */

const h = nano.hyperstyle({
    foo: {
        color: 'red'
    }
});

const App = () =>
    <div styleName="foo">My app..</div>;
```

--------------------------------

### Inject Global CSS with :global Selector

Source: https://github.com/streamich/nano-css/blob/master/docs/global.md

Use the :global selector within a CSS object to define global styles. This example shows how to apply a global class to the document.

```javascript
const className = nano.put('.foo', {
    color: 'red',
    '.nested': {
        fontWeight: 'bold'
    },
    ':global': {
        '.global_class': {
            border: '1px solid red'
        }
    }
});
```
Tokens:
Raw