import { Dimensions, Appearance, ScaledSize, EmitterSubscription, NativeEventSubscription, TextStyle, ImageStyle, ViewStyle, Platform, StyleProp } from "react-native"; import { MediaRecord } from "../types/common"; import { ColorSchemeStore } from "./color-scheme"; export type { ColorSchemeSystem, ColorSchemeName } from "./color-scheme"; export declare type Style = ViewStyle | ImageStyle | TextStyle; export declare type InlineStyle = T; export declare type AtRuleStyle = T & { atRules: unknown[]; }; export declare type CompiledStyle = { [key: string]: string; } & { $$css: boolean; }; export declare type EitherStyle = AtRuleStyle | CompiledStyle | InlineStyle | StyleProp; export declare type Snapshot = Record; export declare type StylesArray = Array>; /** * Tailwind styles are strings of atomic classes. eg "a b" compiles to [a, b] * * If the styles are static we can simply cache them and return a stable result * * However, if the styles are dynamic (have atRules) there are two things we need to do * - Update the atomic style * - Update the dependencies of the atomic style * * This is performed by each style subscribing to a atRule topic. The atomic styles are updated * before the parent styles. * * The advantage of this system is that styles are only updated once, no matter how many components * are on using them * * The disadvantages are * - Is that the store doesn't purge unused styles, so the listeners will continue to grow * - UI states (hover/active/focus) are considered separate styles * * If you are interested in helping me build a more robust store, please create an issue on Github. * */ export declare class StyleSheetRuntime extends ColorSchemeStore { snapshot: Snapshot; listeners: Set<() => void>; atRuleListeners: Set<(topics: string[]) => void>; dimensionListener?: EmitterSubscription; appearanceListener?: NativeEventSubscription; dangerouslyCompileStyles?: (className: string, store: StyleSheetRuntime) => void; styles: Record; atRules: MediaRecord; transforms: Record; platform: typeof Platform.OS; window: ScaledSize; orientation: OrientationLockType; constructor(); setDimensions(dimensions: Dimensions): void; setAppearance(appearance: typeof Appearance): void; setPlatform(platform: typeof Platform.OS): void; setDangerouslyCompileStyles(dangerouslyCompileStyles: (className: string, store: StyleSheetRuntime) => void): void; getSnapshot: () => Snapshot; getServerSnapshot(): Snapshot; subscribe: (listener: () => void) => () => boolean; destroy(): void; notify(): void; subscribeMedia(listener: (topics: string[]) => void): () => boolean; notifyMedia(topics: string[]): void; isEqual(a: StylesArray, b: StylesArray): boolean; prepare(composedClassName?: string): string; reEvaluate: (snapshotKey: string, classNames: string[]) => void; /** * ClassNames are made of multiple atomic styles. eg "a b" are the styles [a, b] * * This function will be called for each atomic style */ upsertAtomicStyle(className: string): StylesArray; create({ styles, atRules, transforms, }: Partial>): void; platformSelect: { (specifics: ({ ios?: T | undefined; android?: T | undefined; windows?: T | undefined; macos?: T | undefined; web?: T | undefined; native?: T | undefined; } & { default: T; }) | { ios: T; android: T; windows: T; macos: T; web: T; native: T; }): T; (specifics: { ios?: T_1 | undefined; android?: T_1 | undefined; windows?: T_1 | undefined; macos?: T_1 | undefined; web?: T_1 | undefined; native?: T_1 | undefined; }): T_1 | undefined; }; platformColor(color: string): string | import("react-native").OpaqueColorValue; hairlineWidth(): number; pixelRatio(value: number | Record): number; fontScale(value: number | Record): number; getPixelSizeForLayoutSize: (layoutSize: number) => number; roundToNearestPixel: (layoutSize: number) => number; }