@wezom/toolkit-css-in-js/dist/em-rem.d.ts

Useful tools for working with CSS-in-JS

declare type PixelValue = number | 'auto' | 'inherit' | 'initial' | 'revert' | 'unset';
declare type Units = 'em' | 'rem';
declare type Joiner = ', ' | ' ';
/**
 * Low level converter
 * @param size
 * @param pixels
 * @param unit
 * @param joiner
 */
export declare function jssConvertPixels(
	size: number,
	pixels: PixelValue[],
	unit: Units,
	joiner: Joiner
): string;
/**
 * High level converter from px to em
 * @see jssConvertPixels
 * @example
 *  jssEm(16, 16); // => '1em'
 *  jssEm(16, 16, 'auto'); // => '1em auto'
 *  jssEm(16, -8, 0); // => '-0.5em 0'
 *  jssEm(16, 24, 32, 48); // => '1.5em 2em 3em'
 *  jssEm(20, 30, 10, 45); // => '1.5em 0.5em 2.25em'
 */
export declare function jssEm(emSize: number, ...pixels: PixelValue[]): string;
/**
 * High level converter from px to rem with pre-defined rem size
 * By default rem size used as 16px;
 * @see jssConvertPixels()
 * @see jssSetPreDefinedRemSize()
 * @example
 *  jssRem(16); // => '1rem'
 *  jssRem(16, 'auto'); // => '1rem auto'
 *  jssRem(-8, 0); // => '-0.5rem 0'
 *  jssRem(24, 32, 48); // => '1.5rem 2rem 3rem'
 *  jssRem(30, 10, 45); // => '1.5rem 0.5rem 2.25rem'
 */
export declare function jssRem(...pixels: PixelValue[]): string;
/**
 * High level converter from px to rem, with custom rem size
 * @see jssConvertPixels()
 * @example
 *  jssRemWithSize(16, 16); // => '1rem'
 *  jssRemWithSize(16, 16, 'auto'); // => '1rem auto'
 *  jssRemWithSize(16, -8, 0); // => '-0.5rem 0'
 *  jssRemWithSize(16, 24, 32, 48); // => '1.5rem 2rem 3rem'
 *  jssRemWithSize(20, 30, 10, 45); // => '1.5rem 0.5rem 2.25rem'
 */
export declare function jssRemWithSize(remSize: number, ...pixels: PixelValue[]): string;
/**
 * Change pre-defined rem size.
 * @see jssRemDefined()
 * @example
 *  jssRemDefined(20); // => '1.25rem'
 *  jssSetPreDefinedRemSize(20);
 *  jssRemDefined(20); // => '1rem'
 */
export declare function jssSetPreDefinedRemSize(size: number): void;
export {};