UNPKG

@wix/css-property-parser

Version:

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

70 lines (69 loc) 2.71 kB
// CSS align-items property evaluator // Handles CSS align-items property values according to MDN specification // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items import { isCssVariable, isGlobalKeyword, getValidKeyword } from '../utils/shared-utils.js'; import { parse as parseCSSVariable, toCSSValue as cssVariableToCSSValue } from './css-variable.js'; // Import and re-export centralized types import { BASIC_ALIGNMENT_KEYWORDS, POSITIONAL_ALIGNMENT_KEYWORDS, BASELINE_ALIGNMENT_KEYWORDS, OVERFLOW_ALIGNMENT_KEYWORDS } from '../types.js'; // Use imported keyword arrays const BASIC_KEYWORDS = BASIC_ALIGNMENT_KEYWORDS; const POSITIONAL_KEYWORDS = POSITIONAL_ALIGNMENT_KEYWORDS; const BASELINE_KEYWORDS = BASELINE_ALIGNMENT_KEYWORDS; const OVERFLOW_KEYWORDS = OVERFLOW_ALIGNMENT_KEYWORDS; // All valid alignment values (excluding overflow combinations) const ALL_ALIGNMENT_VALUES = [ ...BASIC_KEYWORDS, ...POSITIONAL_KEYWORDS, ...BASELINE_KEYWORDS ]; export function parse(input) { if (!input || typeof input !== 'string') { return null; } const trimmed = input.trim(); if (trimmed === '') { return null; } // CSS variables can be parsed directly if (isCssVariable(trimmed)) { return parseCSSVariable(trimmed); } // Handle global keywords if (isGlobalKeyword(trimmed)) { return { type: 'keyword', keyword: trimmed.toLowerCase() }; } // Handle overflow alignment (e.g., "safe center", "unsafe flex-start") const tokens = trimmed.toLowerCase().split(/\s+/); if (tokens.length === 2) { const [modifier, alignment] = tokens; const validModifier = getValidKeyword(modifier, OVERFLOW_KEYWORDS); const validAlignment = getValidKeyword(alignment, ALL_ALIGNMENT_VALUES); if (validModifier && validAlignment) { return { type: 'keyword', keyword: `${validModifier} ${validAlignment}` }; } } // Handle multi-word baseline alignment if (trimmed.toLowerCase() === 'first baseline' || trimmed.toLowerCase() === 'last baseline') { return { type: 'keyword', keyword: trimmed.toLowerCase() }; } // Handle single keywords const lowerValue = trimmed.toLowerCase(); const validKeyword = getValidKeyword(lowerValue, ALL_ALIGNMENT_VALUES); if (validKeyword) { return { type: 'keyword', keyword: validKeyword }; } return null; } export function toCSSValue(parsed) { if (!parsed) { return null; } // Handle CSS variables if ('CSSvariable' in parsed) { return cssVariableToCSSValue(parsed); } if ('keyword' in parsed) { return parsed.keyword; } return null; }