UNPKG

@wix/css-property-parser

Version:

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

62 lines (61 loc) 2.25 kB
// CSS overflow property evaluator // Handles CSS overflow property values according to MDN specification // https://developer.mozilla.org/en-US/docs/Web/CSS/overflow import { isCssVariable, isGlobalKeyword, getValidKeyword } from '../utils/shared-utils.js'; import { parse as parseCSSVariable, toCSSValue as cssVariableToCSSValue } from './css-variable.js'; import { OVERFLOW_KEYWORDS } from '../types.js'; /** * Parses a CSS overflow property value according to MDN specification * * Supports: * - visible: Content is not clipped and may overflow the container * - hidden: Content is clipped to the container with no scrolling mechanism * - scroll: Content is clipped with scrollbars always visible * - auto: Content is clipped with scrollbars shown only when needed * - clip: Content is clipped with no scrolling mechanism (newer value) * - Global keywords: inherit, initial, unset, revert, revert-layer * - CSS variables: var(--custom-overflow) * * @param value - The CSS value to parse * @returns Parsed OverflowValue 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 - parse and return directly if (isCssVariable(trimmed)) { return parseCSSVariable(trimmed); } // Global keywords if (isGlobalKeyword(trimmed)) { return { type: 'keyword', keyword: trimmed.toLowerCase() }; } // Overflow-specific keywords const overflowKeyword = getValidKeyword(trimmed, OVERFLOW_KEYWORDS); if (overflowKeyword) { return { type: 'keyword', keyword: overflowKeyword }; } return null; } /** * Converts a parsed OverflowValue back to CSS string representation * * @param parsed - The parsed overflow value * @returns CSS value string or null if invalid */ export function toCSSValue(parsed) { if (!parsed) return null; // Handle CSS variables if (parsed.type === 'variable') { return cssVariableToCSSValue(parsed); } // Handle keyword values (both overflow-specific and global) if (parsed.type === 'keyword') { return parsed.keyword; } return null; }