@wix/css-property-parser/commonjs/evaluators/padding.cjs

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

"use strict";
// CSS padding property parser - Phase 3 refactored
// Handles parsing of CSS padding shorthand property according to MDN specification
// https://developer.mozilla.org/en-US/docs/Web/CSS/padding
Object.defineProperty(exports, "__esModule", { value: true });
exports.parse = parse;
exports.toCSSValue = toCSSValue;
const length_1 = require('./length.cjs');
const percentage_1 = require('./percentage.cjs');
const css_variable_1 = require('./css-variable.cjs');
const shared_utils_1 = require('../utils/shared-utils.cjs');
// ========================================
// Utilities
// ========================================
/**
 * Checks if a string is a valid padding value component
 */
function isPaddingValue(value) {
    const trimmed = value.trim();
    // CSS variables are valid padding values
    if ((0, shared_utils_1.isCssVariable)(trimmed)) {
        return true;
    }
    // Global keywords are valid
    if ((0, shared_utils_1.isGlobalKeyword)(trimmed)) {
        return true;
    }
    // Try to parse as percentage (must be non-negative)
    const percentageResult = (0, percentage_1.parse)(trimmed);
    if (percentageResult) {
        return (0, shared_utils_1.isNonNegative)(percentageResult);
    }
    // Try to parse as length (must be non-negative)
    const lengthResult = (0, length_1.parse)(trimmed);
    if (lengthResult) {
        return (0, shared_utils_1.isNonNegative)(lengthResult);
    }
    return false;
}
/**
 * Parses a single padding value into atomic type
 */
function parsePaddingValue(value) {
    const trimmed = value.trim();
    // Handle CSS variables in individual components
    if ((0, shared_utils_1.isCssVariable)(trimmed)) {
        return (0, css_variable_1.parse)(trimmed);
    }
    // First validate the value
    if (!isPaddingValue(trimmed)) {
        return null;
    }
    // Handle keywords
    if ((0, shared_utils_1.isGlobalKeyword)(trimmed)) {
        return { type: 'keyword', keyword: trimmed.toLowerCase() };
    }
    // Try percentage first
    const percentageResult = (0, percentage_1.parse)(trimmed);
    if (percentageResult) {
        return percentageResult;
    }
    // Try length
    const lengthResult = (0, length_1.parse)(trimmed);
    if (lengthResult) {
        return lengthResult;
    }
    return null;
}
// ========================================
// Main Functions
// ========================================
/**
 * Parses a CSS padding property value into structured components
 * @param value - The CSS padding property string
 * @returns Parsed padding object with individual side values or null if invalid
 */
function parse(value) {
    if (!value || typeof value !== 'string') {
        return null;
    }
    const trimmed = value.trim();
    if (trimmed === '') {
        return null;
    }
    // CSS variables can be parsed directly for entire shorthand
    // Try to parse as CSS variable first, but only if it's valid
    const cssVariableResult = (0, css_variable_1.parse)(trimmed);
    if (cssVariableResult) {
        return cssVariableResult;
    }
    // Handle single global keyword
    if ((0, shared_utils_1.isGlobalKeyword)(trimmed)) {
        const keyword = { type: 'keyword', keyword: trimmed.toLowerCase() };
        return {
            paddingTop: keyword,
            paddingRight: keyword,
            paddingBottom: keyword,
            paddingLeft: keyword
        };
    }
    // Use shared tokenize utility to handle calc expressions properly
    const values = (0, shared_utils_1.tokenize)(trimmed);
    if (values.length === 0 || values.length > 4) {
        return null;
    }
    // Validate and parse each value
    const parsedValues = [];
    for (const val of values) {
        const parsedValue = parsePaddingValue(val);
        if (!parsedValue) {
            return null;
        }
        parsedValues.push(parsedValue);
    }
    // Expand values according to CSS padding shorthand rules using shared utility
    const expandedStrings = (0, shared_utils_1.expandShorthandValues)(values);
    const [topStr, rightStr, bottomStr, leftStr] = expandedStrings;
    // Parse each expanded value
    const paddingTop = parsePaddingValue(topStr);
    const paddingRight = parsePaddingValue(rightStr);
    const paddingBottom = parsePaddingValue(bottomStr);
    const paddingLeft = parsePaddingValue(leftStr);
    if (!paddingTop || !paddingRight || !paddingBottom || !paddingLeft) {
        return null;
    }
    return {
        paddingTop,
        paddingRight,
        paddingBottom,
        paddingLeft
    };
}
/**
 * Converts a parsed padding back to a CSS value string
 * @param parsed - The parsed padding object
 * @returns CSS value string or null if invalid
 */
function toCSSValue(parsed) {
    if (!parsed) {
        return null;
    }
    // Handle CSS variables for entire shorthand
    if ('CSSvariable' in parsed) {
        return (0, css_variable_1.toCSSValue)(parsed);
    }
    // Handle single atomic values (apply to all sides)
    if (!('paddingTop' in parsed)) {
        const singleValue = parsed;
        return convertPaddingValueToCSSValue(singleValue);
    }
    // Handle expanded padding (PaddingExpanded)
    const paddingExpanded = parsed;
    const topValue = convertPaddingValueToCSSValue(paddingExpanded.paddingTop);
    const rightValue = convertPaddingValueToCSSValue(paddingExpanded.paddingRight);
    const bottomValue = convertPaddingValueToCSSValue(paddingExpanded.paddingBottom);
    const leftValue = convertPaddingValueToCSSValue(paddingExpanded.paddingLeft);
    if (!topValue || !rightValue || !bottomValue || !leftValue) {
        return null;
    }
    // Try to recreate the most compact form
    // All sides same
    if (topValue === rightValue && rightValue === bottomValue && bottomValue === leftValue) {
        return topValue;
    }
    // Vertical/horizontal pattern
    if (topValue === bottomValue && rightValue === leftValue) {
        return `${topValue} ${rightValue}`;
    }
    // Top + horizontal + bottom pattern  
    if (rightValue === leftValue) {
        return `${topValue} ${rightValue} ${bottomValue}`;
    }
    // All different
    return `${topValue} ${rightValue} ${bottomValue} ${leftValue}`;
}
/**
 * Converts a single padding value back to CSS string
 */
function convertPaddingValueToCSSValue(paddingValue) {
    // Handle CSS variables in components
    if ('CSSvariable' in paddingValue) {
        return (0, css_variable_1.toCSSValue)(paddingValue);
    }
    // Handle keywords
    if ('keyword' in paddingValue) {
        return paddingValue.keyword;
    }
    // Handle length/percentage by delegating to the appropriate toCSSValue function
    const lengthValue = (0, length_1.toCSSValue)(paddingValue);
    if (lengthValue) {
        return lengthValue;
    }
    const percentageValue = (0, percentage_1.toCSSValue)(paddingValue);
    if (percentageValue) {
        return percentageValue;
    }
    return null;
}