otion/dist-deno/bundle.dev.d.ts

Atomic CSS-in-JS with a featherweight runtime

/* eslint-disable @typescript-eslint/no-explicit-any */
import * as CSS from "csstype";
type CSSProperties = CSS.PropertiesFallback<string | number>;
type ScopedCSSProperties = Omit<CSSProperties, "all">;
type CSSRules<P extends Record<string, any> = CSSProperties> = CSSStyleRules<P> & CSSGroupingRules<P>;
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface ScopedCSSRules extends CSSRules<ScopedCSSProperties> {
}
type CSSStyleRules<P extends Record<string, any> = CSSProperties> = P & {
    [pseudo in CSS.SimplePseudos]?: P;
} & {
    selectors?: {
        [selector: string]: P;
    };
};
interface CSSGroupingRules<P extends Record<string, any> = CSSProperties> {
    "@media"?: {
        [conditionText: string]: CSSRules<P>;
    };
    "@supports"?: {
        [conditionText: string]: CSSRules<P>;
    };
}
type CSSKeyframeRules = {
    [time in "from" | "to"]?: CSSProperties;
} | {
    [time: string]: CSSProperties;
};
interface InjectorConfig<T> {
    /** Sets a cryptographic nonce (number used once) on the enclosing `<style>` tag when generating a page on demand. Useful for enforcing a [Content Security Policy (CSP)](https://developer.mozilla.org/docs/Web/HTTP/CSP). */
    nonce?: string;
    /** Target to insert rules into. */
    target?: T;
}
type InjectorInstance = {
    sheet?: CSSStyleSheet;
    insert(rule: string, index: number): number;
};
/**
 * Creates an injector which inserts style rules through the CSS Object Model.
 */
declare function CSSOMInjector({ nonce, target }: InjectorConfig<CSSStyleSheet>): InjectorInstance;
/**
 * Creates an injector which inserts style rules through the Document Object Model.
 */
declare function DOMInjector({ nonce, target }: InjectorConfig<HTMLStyleElement>): InjectorInstance;
/**
 * An injector placeholder which performs no operations. Useful for avoiding errors in a non-browser environment.
 */
declare const NoOpInjector: InjectorInstance;
interface OtionConfig {
    /** Style insertion methodology to be used. */
    injector?: InjectorInstance;
    /** Auto-prefixer method for CSS property–value pairs. */
    prefix?: (property: string, value: string) => string;
}
interface OtionInstance {
    /**
     * Customizes the otion instance. May only be called once, before using the instance for anything else.
     */
    setup(options: OtionConfig): void;
    /**
     * Marks server-rendered CSS identity names as available to avoid re-injecting them to the style sheet during runtime.
     */
    hydrate(): void;
    /**
     * Decomposes CSS into atomic styles. Rules are injected to the style sheet if not already available.
     *
     * @param rules Scoped CSS as [object styles](https://gist.github.com/threepointone/9f87907a91ec6cbcd376dded7811eb31), with value fallbacks represented as arrays.
     *
     * - Numbers assigned to non-unitless properties are postfixed with "px".
     * - Excess white space characters are truncated.
     *
     * @returns A space-separated list of stably generated unique class names.
     *
     * @example
     * const classNames = css({
     *   display: "flex",
     *   justifyContent: ["space-around", "space-evenly"], // Last takes precedence
     *   padding: 8, // "8px"
     *   lineHeight: 1.5, // "1.5" without a unit
     *   selectors: {
     *     // Advanced selectors must start with "&"
     *     "& > * + *": {
     *       paddingLeft: 16
     *     }
     *   }
     * });
     */
    css(rules: ScopedCSSRules): string;
    // used to specify the values for the animating properties at various points during the animation
    /**
     * Creates keyframes for animating values of given properties over time.
     *
     * @param rules CSS keyframe rules as [object styles](https://gist.github.com/threepointone/9f87907a91ec6cbcd376dded7811eb31), with value fallbacks represented as arrays.
     *
     * - Numbers assigned to non-unitless properties are postfixed with "px".
     * - Excess white space characters are truncated.
     *
     * @returns Lazy method for stably generating a unique animation name upon usage.
     *
     * @example
     * const pulse = keyframes({
     *   from: { opacity: 0 },
     *   to: { opacity: 1 }
     * });
     *
     * // Referencing
     * const className = css({
     *   animation: `${pulse} 3s infinite alternate`
     * });
     */
    keyframes(rules: CSSKeyframeRules): {
        /** @private */ toString(): string;
    };
}
/**
 * Creates a new otion instance. Usable for managing styles of multiple browsing contexts (e.g. an `<iframe>` besides the main document).
 */
declare function createInstance(): OtionInstance;
declare const setup: OtionInstance["setup"];
declare const hydrate: OtionInstance["hydrate"];
declare const css: OtionInstance["css"];
declare const keyframes: OtionInstance["keyframes"];
export { createInstance, setup, hydrate, css, keyframes, CSSOMInjector, DOMInjector, NoOpInjector, ScopedCSSRules };
//# sourceMappingURL=bundle.dev.d.ts.map