handsontable/themes/engine/utils/cssVariables.js

Handsontable is a JavaScript Data Grid available for React, Angular and Vue.

"use strict";

exports.__esModule = true;
exports.flattenCssVariables = flattenCssVariables;
var _object = require("../../../helpers/object");
var _string = require("../../../helpers/string");
/**
 * The theme prefix.
 *
 * @type {string}
 */
const VAR_PREFIX = '--ht-';

/**
 * List of keys that should not be converted to CSS variable references.
 *
 * @type {string[]}
 */
const CSS_KEY_EXCEPTIONS = ['font-family'];

/**
 * List of prefixes that indicate a value should be converted to a CSS variable reference.
 *
 * @type {string[]}
 */
const VAR_REFERENCE_PREFIXES = ['tokens.', 'colors.', 'sizing.', 'density.'];

/**
 * Checks if a value is a reference to another CSS variable (e.g., 'colors.primary').
 *
 * @param {string} value - The value to check.
 * @returns {boolean} - True if the value is a variable reference.
 */
function isVarReference(value) {
  return typeof value === 'string' && VAR_REFERENCE_PREFIXES.some(prefix => value.includes(prefix));
}

/**
 * Converts a dot notation path to a CSS variable reference.
 * Handles special case for 'tokens.' prefix which strips the first segment.
 *
 * @param {string} path - The dot notation path (e.g., 'colors.primary').
 * @returns {string} - The CSS variable reference (e.g., 'var(--ht-colors-primary)').
 */
function toVarReference(path) {
  if (path.includes('tokens.')) {
    return `var(${VAR_PREFIX}${(0, _string.toHyphen)(path.split('.').slice(1).join('-'))})`;
  }
  return `var(${VAR_PREFIX}${(0, _string.toHyphen)(path.split('.').join('-'))})`;
}

/**
 * Converts a key to a CSS variable key.
 *
 * @param {string} prefix - The prefix to add to the CSS variable.
 * @param {string} key - The key to convert.
 * @returns {string} - The CSS variable key.
 */
function toCssKey(prefix, key) {
  return `${VAR_PREFIX}${prefix ? `${prefix}-` : ''}${(0, _string.toHyphen)(key)}`;
}

/**
 * Converts a value to a CSS variable value.
 * Handles variable references, light/dark values, and single values.
 *
 * @param {string|object} value - The value to convert.
 * @param {string} [key] - The CSS key name (used for exceptions like font-family).
 * @returns {string} - The CSS value.
 */
function toCssValue(value, key) {
  if (isVarReference(value)) {
    return toVarReference(value);
  }
  if (Array.isArray(value)) {
    if (value.length >= 2) {
      const [light, dark] = value;
      if (typeof light === 'string' && typeof dark === 'string') {
        return `light-dark(${toCssValue(light, key)}, ${toCssValue(dark, key)})`;
      }
      if (typeof light === 'string') {
        return toCssValue(light, key);
      }
      if (typeof dark === 'string') {
        return toCssValue(dark, key);
      }
      return '';
    }
    return toCssValue(value[0], key);
  }
  if (key && CSS_KEY_EXCEPTIONS.includes(key)) {
    return String(value);
  }
  return (0, _string.toHyphen)(value);
}

/**
 * Converts a key and value to a CSS variable line.
 *
 * @param {string} prefix - The prefix to add to the CSS variable.
 * @param {string} key - The key to convert.
 * @param {string} value - The value to convert.
 * @returns {string} - The CSS variable line.
 */
function toCssLine(prefix, key, value) {
  return `${toCssKey(prefix, key)}: ${toCssValue(value, key)};`;
}

/**
 * Flattens the CSS variables object into a string of CSS variables.
 *
 * @param {object} cssVariables - The CSS variables object to flatten.
 * @param {string} [prefix='colors'] - The prefix to add to the CSS variables.
 * @param {string} [parentKey=''] - The parent key to add to the CSS variables.
 * @returns {string} - The flattened CSS variables.
 */
function flattenCssVariables(cssVariables) {
  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  let parentKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
  let cssVars = '';
  Object.entries(cssVariables).forEach(_ref => {
    let [key, value] = _ref;
    const normalizedKey = (0, _string.toHyphen)(key);
    const fullKey = parentKey ? `${parentKey}-${normalizedKey}` : normalizedKey;
    if ((0, _object.isObject)(value)) {
      cssVars += flattenCssVariables(value, prefix, fullKey);
    } else {
      cssVars += `${toCssLine(prefix, fullKey, value)}\n`;
    }
  });
  return cssVars;
}