diff --git a/index.d.ts b/index.d.ts index 79e9b9f6..79c6e412 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,6 +1,7 @@ import {CreateNano} from './types/nano'; import {RuleAddon} from './types/addon/rule'; import {UnitsAddon} from './types/addon/units'; +import {DruleAddon} from './types/addon/drule'; export * from './types/nano'; @@ -12,6 +13,10 @@ declare module 'nano-css/addon/rule' { export const addon: RuleAddon; } +declare module 'nano-css/addon/rdule' { + export const addon: DruleAddon; +} + declare module 'nano-css/addon/units' { export const addon: UnitsAddon; } diff --git a/types/addon/drule.d.ts b/types/addon/drule.d.ts new file mode 100644 index 00000000..fd50e510 --- /dev/null +++ b/types/addon/drule.d.ts @@ -0,0 +1,8 @@ +import {CssLikeObject, TDynamicCss} from '../common'; +import {NanoRenderer} from '../nano'; + +export interface DrulePatch { + drule: (css: CssLikeObject, block?: string) => TDynamicCss; +} + +export type DruleAddon = (nano: T) => T & DrulePatch; diff --git a/types/nano.d.ts b/types/nano.d.ts index 66244124..55ffca36 100644 --- a/types/nano.d.ts +++ b/types/nano.d.ts @@ -1,15 +1,10 @@ import {CssLikeObject} from './common'; import {RulePatch} from './addon/rule'; +import {DrulePatch} from './addon/drule'; +import {UnitsPatch} from './addon/units'; /* interface NanoRenderer extends Partial { - client: boolean; - raw: string; - pfx: string; - putRaw: (rawCss: string) => void; - put: (selector: string, css: ICssLikeObject, atrule?: string) => void; - rule?: (css: ICssLikeObject, block?: string) => string; - drule?: (css: ICssLikeObject, block?: string) => TDynamicCss; sheet?: (cssMap: {[s: string]: ICssLikeObject}, block?: string) => {[s: string]: string}; dsheet?: (cssMap: {[s: string]: ICssLikeObject}, block?: string) => {[s: string]: TDynamicCss}; jsx?: ( @@ -50,7 +45,7 @@ interface NanoRenderer extends Partial { } */ -export interface NanoRenderer extends Partial { +export interface NanoRenderer extends Partial, Partial, Partial { /** * Equals to `true` if in browser environment. */ @@ -103,15 +98,53 @@ export interface NanoRenderer extends Partial { put: (selector: string, css: CssLikeObject, atrule?: string) => void; } -interface INanoOptions { +interface Options { + /** + * Prefix added to all class names and animation names. + */ pfx?: string; + + /** + * Hyperscript function of your virtual DOM library. Needed only if you use + * addons (like `jsx`, `style`, `styled`, `component`) that create components. + * + * ```js + * const nano = create({ + * h: React.createElement, + * }); + * ``` + */ h?: (...args) => any; + + /** + * Stylesheet `` to be used to inject CSS. If not provided, one will + * be automatically created. You can also provide an external stylesheet + * ``, but then you need to set proper attributes on it: `rel="stylesheet" type="text/css"`. + * + * ```js + * const nano = create({ + * sh: typeof window === 'object' ? document.getElementById('nano-css') : undefined, + * }); + * ``` + */ sh?: CSSStyleSheet; + + /** + * Whether to be chatty in DEV mode. + */ verbose?: boolean; + + /** + * Defaults to `Object.assign`. + */ assign?: (...objects: object[]) => object; + + /** + * Defaults to `JSON.stringify`. + */ stringify?: (obj: object) => string; } -type CreateNano = (options?: INanoOptions) => NanoRenderer; +type CreateNano = (options?: Options) => NanoRenderer; export const create: CreateNano;