@ckeditor/ckeditor5-export-inline-styles
Version:
The export with inline styles feature for CKEditor 5.
69 lines (68 loc) • 2.81 kB
TypeScript
/**
* @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* @module export-inline-styles/utils/exportinlinestylescssvariables
*/
import type { StylesMap } from 'ckeditor5/src/engine.js';
import type { ParsedCSSRule } from './exportinlinestylescollector.js';
/**
* Collects CSS custom properties (variables) that are defined in `:root` selector rules.
* These variables are then used as global fallback values for variable resolution in the document.
*
* **Note:** Since `element.matches(':root')` always returns `false` for detached DOM elements,
* this effectively inlines all CSS custom properties defined in `:root` rules into the document,
* making them available for variable resolution regardless of the DOM structure.
*
* @param rules An array of parsed CSS rules to extract variables from.
* @returns A map containing CSS variable names as keys and their computed values.
*
* ```ts
* const rules = [
* {
* flatSelector: ':root',
* stylesMap: createStylesMap( '--primary-color: blue; --button-color: var(--primary-color);' )
* },
* {
* flatSelector: '.button',
* stylesMap: createStylesMap( 'background: var(--button-color); border: 1px solid var(--primary-color);' )
* }
* ];
*
* const rootVariables = collectRootStylesheetsVariables( rules );
* // Returns: Map {
* // '--primary-color' => 'blue',
* // '--button-color' => 'blue'
* // }
* ```
*/
export declare function collectRootStylesheetsVariables(rules: Array<ParsedCSSRule>): CSSVariablesMap;
/**
* Processes CSS variables in a styles map by inlining their values.
*
* **Note:** This function modifies the input StylesMap object. CSS variables are extracted
* and their references are replaced with actual values in other style properties.
*
* @param fallbackCSSVariablesLookup A function that returns a CSS variable if not found in the local CSS variables map.
* @param stylesMap The styles map to process. Will be modified in-place.
* @returns The local CSS variables map containing CSS variables and their values.
*
* ```ts
* const stylesMap = new StylesMap();
* stylesMap.set( '--color', 'red' );
* stylesMap.set( 'color', 'var(--color)' );
*
* inlineStylesMapCSSVariables( stylesMap );
* // stylesMap now contains: color: red
* ```
*/
export declare function inlineStylesMapCSSVariables(fallbackCSSVariablesLookup: CSSVariableLookupCallback, stylesMap: StylesMap): CSSVariablesMap;
/**
* A function that returns a CSS variable value for a given variable name.
*/
export type CSSVariableLookupCallback = (name: string) => string | undefined;
/**
* A map of CSS variables and their values.
*/
export type CSSVariablesMap = Map<string, string>;