@wix/css-property-parser/dist/evaluators/length-percentage.js

A comprehensive TypeScript library for parsing and serializing CSS property values with full MDN specification compliance

// Length-Percentage data type parser
// Handles parsing of CSS <length-percentage> values according to MDN specification
// https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage
// Accepts both length values (px, em, rem, etc.) and percentage values
import { parse as parseLength, toCSSValue as lengthToCSSValue } from './length.js';
import { parse as parsePercentage, toCSSValue as percentageToCSSValue } from './percentage.js';
import { isCssVariable } from '../utils/shared-utils.js';
import { parse as parseCSSVariable, toCSSValue as cssVariableToCSSValue } from './css-variable.js';
/**
 * Parses a CSS <length-percentage> value into structured components
 * @param value - The CSS length-percentage value
 * @returns Parsed length-percentage object or null if invalid
 */
export function parse(value) {
    if (!value || typeof value !== 'string') {
        return null;
    }
    const trimmed = value.trim();
    if (trimmed === '')
        return null;
    // Check for CSS variables - use centralized resolver
    if (isCssVariable(trimmed)) {
        return parseCSSVariable(trimmed);
    }
    // Try parsing as percentage first (since it's more specific - ends with %)
    const percentageResult = parsePercentage(trimmed);
    if (percentageResult) {
        return percentageResult;
    }
    // Try parsing as length
    const lengthResult = parseLength(trimmed);
    if (lengthResult) {
        return lengthResult;
    }
    return null;
}
/**
 * Converts a parsed length-percentage back to a CSS value string
 * @param parsed - The parsed length-percentage object
 * @returns CSS value string or null if invalid
 */
export function toCSSValue(parsed) {
    if (!parsed) {
        return null;
    }
    // Handle CSS variables
    if ('CSSvariable' in parsed) {
        return cssVariableToCSSValue(parsed);
    }
    // Check if it's a percentage value (unit is '%')
    if ('unit' in parsed && parsed.unit === '%') {
        return percentageToCSSValue(parsed);
    }
    // Otherwise, try as length value
    return lengthToCSSValue(parsed);
}