UNPKG

@wix/css-property-parser

Version:

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

66 lines (65 loc) 2.5 kB
// CSS justify-content property evaluator // Handles CSS justify-content property values according to MDN specification // https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content 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 { JUSTIFY_CONTENT_NORMAL_KEYWORDS, POSITIONAL_ALIGNMENT_KEYWORDS, JUSTIFY_CONTENT_DISTRIBUTED_KEYWORDS, OVERFLOW_ALIGNMENT_KEYWORDS } from '../types.js'; // Use imported keyword arrays const NORMAL_KEYWORDS = JUSTIFY_CONTENT_NORMAL_KEYWORDS; const POSITIONAL_KEYWORDS = POSITIONAL_ALIGNMENT_KEYWORDS; const DISTRIBUTED_KEYWORDS = JUSTIFY_CONTENT_DISTRIBUTED_KEYWORDS; const OVERFLOW_KEYWORDS = OVERFLOW_ALIGNMENT_KEYWORDS; // All valid justify-content keywords const ALL_KEYWORDS = [ ...NORMAL_KEYWORDS, ...POSITIONAL_KEYWORDS, ...DISTRIBUTED_KEYWORDS ]; export function parse(value) { if (!value || typeof value !== 'string') { return null; } const trimmed = value.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 (safe/unsafe + positional keyword) const tokens = trimmed.toLowerCase().split(/\s+/); if (tokens.length === 2) { const [modifier, alignment] = tokens; const validModifier = getValidKeyword(modifier, OVERFLOW_KEYWORDS); const validAlignment = getValidKeyword(alignment, POSITIONAL_KEYWORDS); if (validModifier && validAlignment) { return { type: 'keyword', keyword: `${validModifier} ${validAlignment}` }; } } // Handle single keywords const lowerValue = trimmed.toLowerCase(); const validKeyword = getValidKeyword(lowerValue, ALL_KEYWORDS); 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; }