How to use nano-css - 10 common examples

To help you get started, we’ve selected a few nano-css examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

DSchau / css-in-js-playground / src / snippets / nano-css / nano.js View on Github

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

streamich / jsx-plus-plus / .storybook / classnames.stories.js View on Github

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>)

shipshapecode / shepherd / src / js / styles / nano.js View on Github

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

gilbarbara / react-spotify-web-playback / src / styles.tsx View on Github

import { addon as addonStyled } from 'nano-css/addon/styled';

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

interface INanoExtended extends NanoRenderer {
  styled: (
    tag: string,
  ) =&gt; (
    styles: CssLikeObject,
    dynamicTemplate?: (props: IStyledComponentProps) =&gt; CssLikeObject,
    block?: string,
  ) =&gt; 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 =&gt; (typeof val === 'number' ? `${val}px` : val);

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

DSchau / css-in-js-playground / src / snippets / nano-css / nano.js View on Github

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;

gilbarbara / react-spotify-web-playback / src / styles.tsx View on Github

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

interface INanoExtended extends NanoRenderer {
  styled: (
    tag: string,
  ) =&gt; (
    styles: CssLikeObject,
    dynamicTemplate?: (props: IStyledComponentProps) =&gt; CssLikeObject,
    block?: string,
  ) =&gt; 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 =&gt; (typeof val === 'number' ? `${val}px` : val);

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

shipshapecode / shepherd / src / js / styles / nano.js View on Github

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

streamich / jsx-plus-plus / .storybook / classnames.stories.js View on Github

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>)

shipshapecode / shepherd / src / js / styles / nano.js View on Github

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

gilbarbara / react-spotify-web-playback / src / styles.tsx View on Github

) =&gt; (
    styles: CssLikeObject,
    dynamicTemplate?: (props: IStyledComponentProps) =&gt; CssLikeObject,
    block?: string,
  ) =&gt; 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 =&gt; (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',

How to use nano-css - 10 common examples

To help you get started, we’ve selected a few nano-css examples, based on popular ways it is used in public projects.

nano-css

Package Health Score

Popular nano-css functions

Similar packages