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

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

) => (
    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',
    errorColor: '#a60000',
    height: 48,
    loaderColor: '#ccc',
    loaderSize: 32,
    savedColor: '#1cb954',
    sliderColor: '#666',

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: `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;