How to use the nano-css/addon/jsx.addon function in nano-css
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 {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;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',
errorColor: '#a60000',
height: 48,
loaderColor: '#ccc',
