UNPKG

@wix/css-property-parser

Version:

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

83 lines (82 loc) 2.52 kB
// Angle data type parser // Handles parsing of CSS angle values according to MDN specification // https://developer.mozilla.org/en-US/docs/Web/CSS/angle import { parse as parseNumber } from './number.js'; import { parse as parseCSSVariable, toCSSValue as cssVariableToCSSValue } from './css-variable.js'; import { isCssVariable } from '../utils/shared-utils.js'; import { parseCalcFunction, cssFunctionToCSSValue } from '../utils/css-function-parser.js'; // Common angle unit patterns const ANGLE_UNIT_REGEX = /^(-?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?)(deg|grad|rad|turn)$/i; /** * Parses a CSS angle value into structured components * @param value - The CSS angle value string * @returns Parsed angle object or null if invalid */ export function parse(value) { if (!value || typeof value !== 'string') { return null; } const trimmed = value.trim(); if (trimmed === '') return null; // CSS variables - ALWAYS CHECK FIRST if (isCssVariable(trimmed)) { return parseCSSVariable(trimmed); } // Handle calc() expressions const calcResult = parseCalcFunction(trimmed); if (calcResult) { return calcResult; } // Handle zero (can be unitless) if (trimmed === '0') { return { type: 'angle', value: 0, unit: 'deg' }; } // Match angle with unit const match = trimmed.match(ANGLE_UNIT_REGEX); if (!match) { return null; } const [, valueStr, unitStr] = match; const numberValue = parseNumber(valueStr); if (!numberValue || !('value' in numberValue)) { return null; } const unit = unitStr.toLowerCase(); return { type: 'angle', value: numberValue.value, unit }; } /** * Converts a parsed angle back to a CSS value string * @param parsed - The parsed angle 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); } // Handle calc expressions if ('expression' in parsed) { return cssFunctionToCSSValue(parsed); } // Handle regular angle values if ('value' in parsed && 'unit' in parsed) { // Special case: zero can be unitless if (parsed.value === 0) { return '0'; } return `${parsed.value}${parsed.unit}`; } return null; }