How to use the nano-css/addon/rule.addon function in nano-css

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: `css-in-js-playground-`,
  h: createElement
});

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

export default nano;

import { CssLikeObject } from 'nano-css/types/common';
import { IStyledComponentProps, IStylesOptions, IStylesProps } from './types/common';

interface INanoExtended extends NanoRenderer {
  styled: (
    tag: string,
  ) => (
    styles: CssLikeObject,
    dynamicTemplate?: (props: IStyledComponentProps) => CssLikeObject,
    block?: string,
  ) => React.FunctionComponent;
}

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

addonRule(nano);
addonAtoms(nano);
addonKeyframes(nano);
addonJSX(nano);
addonStyle(nano);
addonStyled(nano);
addonNesting(nano);

const { keyframes, styled } = nano as INanoExtended;

export const px = (val: string | number): string => (typeof val === 'number' ? `${val}px` : val);

export function getMergedStyles(styles: IStylesProps | undefined): IStylesOptions {
  return {
    altColor: '#ccc',
    bgColor: '#fff',
    color: '#333',

import { create } from 'nano-css';
import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonNesting } from 'nano-css/addon/nesting';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonSheet } from 'nano-css/addon/sheet';

const nano = create({
  pfx: ''
});

addonCache(nano);
addonNesting(nano);
addonRule(nano);
addonSheet(nano);

const { rule, sheet } = nano;

export {
  rule,
  sheet
};

import '../src/patch';
import React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {linkTo} from '@storybook/addon-links';
import {create} from 'nano-css';
import {addon as addonRule} from 'nano-css/addon/rule';

const nano = create();

addonRule(nano);

const {rule} = nano;

const classNameRed = rule({
  color: 'red'
});

storiesOf('classnames', module)
  .add('className', () =&gt; <div>test</div>)
  .add('class', () =&gt; <div class="{classNameRed}">test</div>)
  .add('object', () =&gt; <div class="{{[classNameRed]:">test</div>)
  .add('object, negative', () =&gt; <div class="{{[classNameRed]:">test</div>)
  .add('long', () =&gt; <div class="{[null,">long</div>)