@atlaskit/primitives/dist/types/xcss/xcss.d.ts

Primitives are token-backed low-level building blocks.

import { css as cssEmotion } from '@emotion/react';
import type { CSSPropertiesWithMultiValues, SerializedStyles } from '@emotion/serialize';
import type * as CSS from 'csstype';
import type { MediaQuery } from '../responsive/types';
import { TokenisedProps } from './style-maps.partial';
declare const uniqueSymbol: unique symbol;
/**
 * @internal used in primitives
 * @returns a collection of styles that can be applied to the respective primitive
 */
type ParsedXcss = ReturnType<typeof cssEmotion> | ReturnType<typeof cssEmotion>[];
export declare const parseXcss: (args: XCSS | (XCSS | false | undefined)[]) => ParsedXcss;
type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)';
type CSSMediaQueries = {
    [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
};
type CSSPseudos = {
    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>;
};
type AtRulesWithoutMedia = Exclude<CSS.AtRules, '@media'>;
type CSSAtRules = {
    [AtRule in AtRulesWithoutMedia as `${AtRule}${string}`]?: Omit<SafeCSSObject, AtRulesWithoutMedia>;
};
type SafeCSSObject = CSSPseudos & CSSAtRules & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
export type XCSS = ReturnType<typeof xcss>;
/**
 * ### xcss
 *
 * `xcss` is a safer, tokens-first approach to CSS-in-JS. It allows token-backed values for
 * CSS application.
 *
 * ```tsx
 * const styles = xcss({
 *   padding: 'space.100'
 * })
 * ```
 */
export declare function xcss(style: SafeCSSObject): {
    readonly [uniqueSymbol]: SerializedStyles;
};
export {};