ttls-helpers/dist/css/index.d.ts

Helpers for generating valid strings for various languages.

export type Breakpoints = Record<string | number, string>;
export type BreakpointQuery = {
    value: string;
    query: string;
};
/**
 * Convert a map of breakpoints into a normalized format used in other functions.
 * Each breakpoint will have a value and a query string.
 */
export declare function normalizeBreakpoints(breakpoints: Breakpoints): Record<string, BreakpointQuery>;
/**
 * Returns a query range string for the given start and end values.
 * If start is null, it will not include the lower bound.
 * If end is null, it will not include the upper bound.
 */
export declare function getQueryRange(start?: string | null, end?: string | null): string;
/**
 * Returns the range (start and end) of a query.
 */
export declare function getQueryRanges(sizes: (string | null)[]): string[];
/**
 * Returns the min-width of a query.
 */
export declare function getQueryMinWidth(size: string | null): string;
/**
 * Returns the min-width of a query.
 */
export declare function getQueryMinSizes(sizes: (string | null)[]): string[];
/**
 * Returns the whitespace configuration for CSS generation.
 */
export declare function getWhitespace(minified?: boolean, offset?: string): {
    indent: string;
    sep: string;
    eol: string;
};
/**
 * Generates a CSS variable name.
 * ```js
 * varName('one', 'two')
 * ```
 * will produce:
 * ```css
 * --one-two
 * ```
 */
export declare function varName(args: string | string[], join?: string): string;
/**
 * Generates a CSS property declaration.
 * ```js
 * declaration('my-property', 'value', true)
 * ```
 * will produce:
 * ```css
 * my-property: value;
 * ```
 */
export declare function declaration(property: string, value: unknown, minified?: boolean): string;
export declare function declarations(properties: Record<string, unknown>, indent?: string, minified?: boolean): string;
/**
 * Generates a CSS property declaration.
 * ```js
 * property('my-property', 'value', 'syntax', true)
 * ```
 * will produce:
 * ```css
 * @property --my-property {
 *   syntax: "syntax";
 *   inherits: true;
 *   initial-value: value;
 * }
 * ```
 */
export declare function property(name: string, value: unknown, syntax?: string, inherits?: boolean, minified?: boolean): string;
/**
 * @deprecated - use `varName` width `declaration` instead.
 * Generates a CSS variable declaration.
 * ```js
 * variable('my-var', 'red')
 * ```
 * will produce:
 * ```css
 * --my-var: red;
 * ```
 */
export declare function variable(name: string, value: unknown, minified?: boolean): string;
/**
 * @deprecated - use `blockRule` instead.
 */
export declare function rule(selectors: string | string[], decls: Record<string, unknown>, offset?: string, minified?: boolean): string;
/**
 *
 * Generates a CSS rule with the provided selectors and declarations or nested blocks
 * ```js
 * blockRule('.my-class', { 'color': 'red', 'font-size': '16px' })
 * ```
 * will produce:
 * ```css
 * .my-class {
 *   color: red;
 *   font-size: 16px;
 * }
 * ```
 *
 * Can also be used for nested block rules:
 * ```js
 * blockRule('.my-class', blockRule('.nested', Object.entries({ 'display': 'block' }).map(entry => declaration), '  '))
 * ```
 * will produce:
 * ```css
 * .my-class {
 *   .nested {
 *     display: block;
 *   }
 * }
 * ```
 */
export declare function blockRule(selectors: string | string[], rules?: string | Record<string, unknown>, offset?: string, minified?: boolean): string;
/**
 * Generates a set of rules for a given property and values.
 * ```js
 * rules((value) => `.bc-${value}`, ['red', 'blue'], 'background-color')
 * ```
 * will produce:
 * ```css
 * .bc-red {
 *   background-color: red;
 * }
 * .bc-blue {
 *   background-color: blue;
 * }
 * ```
 */
export declare function rules(getSelectors: (value: string) => string, values: string[], property: string, offset?: string, minified?: boolean): string;
/**
 * @deprecated - use "blockRule"
 * Generates a block at-rule with the provided rule, query, and rules.
 * ```js
 * blockAtRule('media', '(max-width: 600px)', '.d-flex { display: flex; }', '  ', false)
 * ```
 * will produce:
 * ```css
 * @media (max-width: 600px) {
 *   .d-flex {
 *     display: flex;
 *   }
 * }
 * ```
 */
export declare function blockAtRule(rule: string, block: string, offset?: string, minified?: boolean): string;
export type GetRules = (name: string, indent: string, minified: boolean) => string;
export type Rules = Record<string, string>;
/**
 * @deprecated - use `blockRule` instead.
 * Generates a container query block with the provided rules.
 * ```js
 * containers((name) => `.c-${name}`, {
 *   small: { query: '(min-width: 600px)' },
 * }, '  ', false)
 * ```
 * will produce:
 * ```css
 * \@container small {
 *   .c-small {
 *      display: block;
 *  }
 * }
 */
export declare function atRules(atRule: string, getRules: GetRules, rules: Rules, offset?: string, minified?: boolean): string;
//# sourceMappingURL=index.d.ts.map