feat: 🎸 move TypeScript typings inline next to implementations

BREAKING CHANGE: 🧨 refactoring TypeScript types might break some TypeScript builds

.storybook/vcssom/nano.ts

@@ -1,8 +1,11 @@
 import {create} from '../../index';
-import {addon as addonCSSOM} from '../../addon/cssom';
-import {addon as addonVCSSOM} from '../../addon/vcssom';
+import {addon as addonCSSOM, CSSOMAddon} from '../../addon/cssom';
+import {addon as addonVCSSOM, VCSSOMAddon} from '../../addon/vcssom';
+import {NanoRenderer} from '../../types/nano';
 
-const nano = create();
+type Nano = NanoRenderer & CSSOMAddon & VCSSOMAddon;
+
+const nano = create() as Nano;
 addonCSSOM(nano);
 addonVCSSOM(nano);
 

types/addon/atoms.d.ts → addon/atoms.d.ts

@@ -1,5 +1,5 @@
 import * as CSS from 'csstype';
-import {NanoRenderer} from '../nano';
+import {NanoRenderer} from '../types/nano';
 
 type TLength = string | number;
 
@@ -240,4 +240,4 @@ export interface Atoms {
     tr?: CSS.TransformProperty;
 }
 
-export type AtomsAddon = <T extends NanoRenderer>(nano: T) => T;
+export function addon(nano: NanoRenderer);

addon/component.d.ts

@@ -0,0 +1,7 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface ComponentAddon {
+    Component;
+}
+
+export function addon(nano: NanoRenderer);

addon/cssom.d.ts

@@ -1,15 +1,17 @@
+import {NanoRenderer} from '../types/nano';
+
 export interface CSSOMRule extends CSSRule {
     index: number;
     style: CSSStyleDeclaration;
     styleMap: any;
 }
 
-export interface AddonCSSOM {
+export interface CSSOMAddon {
     /**
      * @param selector CSS rule selector string.
      * @param prelude Media query at-rule prelude string.
      */
     createRule(selector: string, prelude: string): CSSOMRule;
 }
 
-export function addon<Nano extends {sh: HTMLStyleElement}>(nano: Nano): Nano & AddonCSSOM;
+export function addon(nano: NanoRenderer);

addon/decorator.d.ts

@@ -0,0 +1,7 @@
+import {NanoRenderer} from '../types/nano';
+
+export interface DecoratorAddon {
+    css;
+}
+
+export function addon(nano: NanoRenderer);

addon/drule.d.ts

@@ -0,0 +1,8 @@
+import {CssLikeObject, TDynamicCss} from '../types/common';
+import {NanoRenderer} from '../types/nano';
+
+export interface DruleAddon {
+    drule: (css: CssLikeObject, block?: string) => TDynamicCss;
+}
+
+export function addon(nano: NanoRenderer);

types/addon/emmet.d.ts → addon/emmet.d.ts

@@ -1,9 +1,9 @@
 import * as CSS from 'csstype';
-import {NanoRenderer} from '../nano';
+import {NanoRenderer} from '../types/nano';
 
 type TLength = string | number;
 
-export interface Emmet {
+export interface EmmetAddon {
     // Visual Formatting; //
     /**
      * Short for `position` property. Requires [`atoms` addon](https://github.com/streamich/nano-css/blob/master/docs/atoms.md).
@@ -611,4 +611,4 @@ export interface Emmet {
     us?: CSS.UserSelectProperty;
 }
 
-export type EmmetAddon = <T extends NanoRenderer>(nano: T) => T;
+export function addon(nano: NanoRenderer);

types/addon/keyframes.d.ts → addon/keyframes.d.ts

@@ -1,7 +1,6 @@
-import {CssLikeObject} from '../common';
-import {NanoRenderer} from '../nano';
+import {NanoRenderer} from '../types/nano';
 
-export interface KeyframesPatch {
+export interface KeyframesAddon {
     /**
      * @param frames Map of keyframes.
      * @param block Optional semantic name.
@@ -32,4 +31,4 @@ export interface KeyframesPatch {
     keyframes: (frames: object, block?: string) => string;
 }
 
-export type KeyframesAddon = <T extends NanoRenderer>(nano: T) => T & KeyframesPatch;
+export function addon(nano: NanoRenderer);

types/addon/rule.d.ts → addon/rule.d.ts

@@ -1,11 +1,8 @@
-import {CssLikeObject} from '../common';
-import {NanoRenderer} from '../nano';
+import {CssLikeObject} from '../types/common';
+import {NanoRenderer} from '../types/nano';
 
-export interface RulePatch {
+export interface RuleAddon {
     /**
-     * @param css [CSS-like object](https://github.com/streamich/nano-css/blob/master/docs/put.md#css-like-object).
-     * @param block Optional semantic name of this rule, must be unique.
-     *
      * You need to install `rule` addon to add this method.
      *
      * ```js
@@ -19,8 +16,11 @@ export interface RulePatch {
      *   color: 'red',
      * });
      * ```
+     *
+     * @param css [CSS-like object](https://github.com/streamich/nano-css/blob/master/docs/put.md#css-like-object).
+     * @param block Optional semantic name of this rule, must be unique.
      */
     rule: (css: CssLikeObject, block?: string) => string;
 }
 
-export type RuleAddon = <T extends NanoRenderer>(nano: T) => T & RulePatch;
+export function addon(nano: NanoRenderer);

types/addon/sheet.d.ts → addon/sheet.d.ts

@@ -1,7 +1,7 @@
-import {CssLikeObject} from '../common';
-import {NanoRenderer} from '../nano';
+import {CssLikeObject} from '../types/common';
+import {NanoRenderer} from '../types/nano';
 
-export interface SheetPatch {
+export interface SheetAddon {
     /**
      * Creates a collection of CSS rules.
      *
@@ -19,4 +19,4 @@ export interface SheetPatch {
     sheet: (cssMap: {[s: string]: CssLikeObject}, block?: string) => {[s: string]: string};
 }
 
-export type SheetAddon = <T extends NanoRenderer>(nano: T) => T & SheetPatch;
+export function addon(nano: NanoRenderer);

types/addon/units.d.ts → addon/units.d.ts

@@ -1,5 +1,4 @@
-import {CssLikeObject} from '../common';
-import {NanoRenderer} from '../nano';
+import {NanoRenderer} from '../types/nano';
 
 export interface Units {
     /**
@@ -83,8 +82,8 @@ export interface Units {
     pct: (val: number) => string;
 }
 
-export interface UnitsPatch extends Units {
+export interface UnitsAddon extends Units {
     units: Units;
 }
 
-export type UnitsAddon = <T extends NanoRenderer>(nano: T) => T & UnitsPatch;
+export function addon(nano: NanoRenderer);

addon/vcssom.d.ts

@@ -1,12 +1,13 @@
-import {AddonCSSOM} from './cssom';
+import {CSSOMAddon} from './cssom';
 import {Css} from './vcssom/cssToTree';
+import {NanoRenderer} from '../types/nano';
 
 export interface VSheet {
     diff(css: Css);
 }
 
-export interface AddonVCSSOM {
+export interface VCSSOMAddon {
     VSheet: new () => VSheet;
 }
 
-export function addon<Nano extends AddonCSSOM>(nano: Nano): Nano & AddonVCSSOM;
+export function addon(nano: NanoRenderer);

addon/vcssom/cssToTree.d.ts

@@ -12,4 +12,4 @@ export interface Tree {
     };
 }
 
-export function cssToTree(css: Css): Tree;
+export function cssToTree(tree: {}, css: Css, selector: string, prelude: string): Tree;

index.d.ts

@@ -1,5 +1,4 @@
 import {CreateNano} from './types/nano';
-import {RuleAddon} from './types/addon/rule';
 import {UnitsAddon} from './types/addon/units';
 import {DruleAddon} from './types/addon/drule';
 import {SheetAddon} from './types/addon/sheet';

preset/sheet.d.ts

@@ -0,0 +1,5 @@
+import {NanoOptions, NanoRenderer} from '../types/nano';
+import {RuleAddon} from '../addon/rule';
+import {SheetAddon} from '../addon/sheet';
+
+type SheetPreset = (options: NanoOptions) => NanoRenderer & RuleAddon & SheetAddon;

types/common.d.ts

@@ -1,5 +1,5 @@
 import * as CSS from 'csstype';
-import {Atoms} from './addon/atoms';
+import {Atoms} from '../addon/atoms';
 
 interface CssProps extends CSS.Properties, CSS.PropertiesHyphen, Atoms {}
 

types/nano.d.ts

@@ -1,61 +1,28 @@
+import {RuleAddon} from '../addon/rule';
+import {VCSSOMAddon} from '../addon/vcssom';
+import {CSSOMAddon} from '../addon/cssom';
 import {CssLikeObject} from './common';
-import {RulePatch} from './addon/rule';
-import {DrulePatch} from './addon/drule';
-import {UnitsPatch} from './addon/units';
-import {SheetPatch} from './addon/sheet';
-import {KeyframesPatch} from './addon/keyframes';
-import {ComponentPatch} from './addon/component';
-import {DecoratorPatch} from './addon/decorator';
+import {ComponentAddon} from '../addon/component';
+import {DecoratorAddon} from '../addon/decorator';
+import {EmmetAddon} from '../addon/emmet';
+import {SheetAddon} from '../addon/sheet';
+import {UnitsAddon} from '../addon/units';
+import {KeyframesAddon} from '../addon/keyframes';
 
-/*
-interface NanoRenderer extends Partial<IUnits> {
-    dsheet?: (cssMap: {[s: string]: ICssLikeObject}, block?: string) => {[s: string]: TDynamicCss};
-    jsx?: (
-        type: THyperscriptType,
-        css: ICssLikeObject,
-        dynamicCss?: TDynamicCss,
-        block?: string
-    ) => THyperscriptComponent;
-    style?: (
-        type: THyperscriptType,
-        css: ICssLikeObject,
-        dynamicCss?: TDynamicCss,
-        block?: string
-    ) => THyperscriptComponent;
-    styled?: (
-        type: THyperscriptType
-    ) => (css: ICssLikeObject, dynamicCss?: TDynamicCss, block?: string) => THyperscriptComponent;
-    cache?: (css: ICssLikeObject) => string;
-    global?: (css: ICssLikeObject) => void;
-    keyframes?: (...args) => string;
-    hydrate?: (sh: CSSStyleSheet) => void;
-    hyperstyle?: (cssMap: {[s: string]: ICssLikeObject}, block?: string) => THyperstyle;
-    putRule?: (...args) => any;
-    createRef?: (...args) => any;
-    ref?: (...args) => any;
-    useStyles?: (
-        cssMap: {[s: string]: ICssLikeObject},
-        fn: (props, styles: {[s: string]: string}) => THyperstyleElement,
-        block?: string
-    ) => THyperscriptComponent;
-    withStyles?: (
-        cssMap: {[s: string]: ICssLikeObject},
-        fn: THyperscriptComponent,
-        block?: string
-    ) => THyperscriptComponent;
-    s?: object;
-    units?: IUnits;
-}
-*/
+export type Addons = RuleAddon &
+    SheetAddon &
+    ComponentAddon &
+    UnitsAddon &
+    KeyframesAddon &
+    DecoratorAddon &
+    EmmetAddon &
+    CSSOMAddon &
+    VCSSOMAddon;
 
-export interface NanoRenderer
-    extends Partial<RulePatch>,
-        Partial<UnitsPatch>,
-        Partial<DrulePatch>,
-        Partial<SheetPatch>,
-        Partial<KeyframesPatch>,
-        Partial<ComponentPatch>,
-        Partial<DecoratorPatch> {
+/**
+ * nano-css main object.
+ */
+export interface NanoRenderer extends Partial<Addons> {
     /**
      * Equals to `true` if in browser environment.
      */
@@ -155,6 +122,5 @@ export interface NanoOptions {
     stringify?: (obj: object) => string;
 }
 
-type CreateNano = (options?: NanoOptions) => NanoRenderer;
-
+export type CreateNano = (options?: NanoOptions) => NanoRenderer;
 export const create: CreateNano;