import { IDomArgs, TagElem, TagName } from './domImpl';
import { cls } from './domMethods';
export interface IClsName {
    className: string;
    cls: typeof cls;
}
export type DomCreateFunc<R, Args extends IDomArgs<R> = IDomArgs<R>> = (...args: Args) => R;
/**
 * In-code styling for DOM components, inspired by Reacts Styled Components.
 *
 * Usage:
 * ```ts
 * const cssTitle = styled('h1', `
 *   font-size: 1.5em;
 *   text-align: center;
 *   color: palevioletred;
 * `);
 *
 * const cssWrapper = styled('section', `
 *   padding: 4em;
 *   background: papayawhip;
 * `);
 *
 * cssWrapper(cssTitle('Hello world'))
 * ```
 *
 * This generates class names for `cssTitle` and `cssWrapper`, adds the styles to the document on
 * first use, and the result is equivalent to:
 * ```ts
 * dom(`section.${cssWrapper.className}`, dom(`h1.${cssTitle.className}`, 'Hello world'));
 * ```
 *
 * What `styled(tag)` returns is a function that takes the same arguments `...args` as
 * `dom(tag, ...args)`. In particular, you may call it with all the arguments that
 * [`dom()`](#dom) takes: content, DOM methods, event handlers, etc.
 *
 * Calls to `styled()` should happen at the top level, at import time, in order to register all
 * styles upfront. Actual work happens the first time a style is needed to create an element.
 * Calling `styled()` elsewhere than at top level is wasteful and bad for performance.
 *
 * You may create a style that modifies an existing `styled()` or other component, e.g.
 * ```ts
 * const cssTitle2 = styled(cssTitle, `font-size: 1rem; color: red;`);
 * ```
 *
 * Now calling `cssTitle2('Foo')` becomes equivalent to
 * `dom('h1', {className: cssTitle.className + ' ' + cssTitle2.className})`.
 *
 * Styles may incorporate other related styles by nesting them under the main one as follows:
 * ```ts
 * const myButton = styled('button', `
 *   border-radius: 0.5rem;
 *   border: 1px solid grey;
 *   font-size: 1rem;
 *
 *   &:active {
 *     background: lightblue;
 *   }
 *   &-small {
 *     font-size: 0.6rem;
 *   }
 * `);
 * ```
 *
 * In nested styles, ampersand (&) gets replaced with the generated .className of the main element.
 *
 * The resulting styled component provides a `.cls()` helper to simplify using prefixed classes. It
 * behaves as `dom.cls()`, but prefixes the class names with the generated className of the main
 * element. E.g. for the example above,
 * ```ts
 * myButton(myButton.cls('-small'), 'Test')
 * ```
 *
 * creates a button with both the `myButton` style above, and the style specified under "&-small".
 */
export declare function styled<Tag extends TagName>(tag: Tag, styles: string): DomCreateFunc<TagElem<Tag>> & IClsName;
export declare function styled<Args extends any[], R extends Element>(creator: (...args: Args) => R, styles: string): typeof creator & IClsName;
/**
 * Animations with `@keyframes` may be created with a unique name by using the keyframes() helper:
 * ```ts
 * const rotate360 = keyframes(`
 *   from { transform: rotate(0deg); }
 *   to { transform: rotate(360deg); }
 * `);
 *
 * const Rotate = styled('div', `
 *   display: inline-block;
 *   animation: ${rotate360} 2s linear infinite;
 * `);
 * ```
 *
 * This function returns simply a string with the generated name. Note that keyframes do not
 * support nesting or ampersand (&) handling, like `styled()` does, since these would be difficult
 * and are entirely unneeded.
 */
export declare function keyframes(styles: string): string;