@wix/css-property-parser
Advanced tools
A comprehensive TypeScript library for parsing and serializing CSS property values with full MDN specification compliance
A comprehensive TypeScript library for parsing and serializing CSS property values with full MDN specification compliance.
Test all CSS property parsers live in your browser with real-time parsing and examples.
import) and CommonJS (require)calc(), min(), max(), clamp(), gradients, and morenpm install @wix/css-property-parser
import { Width, Height, Margin, Background, Font } from '@wix/css-property-parser';
// Parse CSS values
const width = Width.parse('calc(100% - 20px)');
const background = Background.parse('linear-gradient(45deg, red, blue)');
// Serialize back to CSS
const widthCSS = Width.toCSSValue(width); // "calc(100% - 20px)"
const bgCSS = Background.toCSSValue(background); // "linear-gradient(45deg, red, blue)"
const { Width, Height, Margin, Background, Font } = require('@wix/css-property-parser');
// Parse CSS values
const width = Width.parse('calc(100% - 20px)');
const background = Background.parse('linear-gradient(45deg, red, blue)');
// Serialize back to CSS
const widthCSS = Width.toCSSValue(width); // "calc(100% - 20px)"
const bgCSS = Background.toCSSValue(background); // "linear-gradient(45deg, red, blue)"
import {
Width, Height, Background, Font, Margin, Color, Position,
// Import types for parsed values
WidthValue, HeightValue, BackgroundValue, FontValue, MarginValue,
ColorValue, PositionValue, LengthPercentageValue,
// Import atomic types
CSSLengthValue, CSSPercentageValue, LengthValue, PercentageValue
} from '@wix/css-property-parser';
// Use types for variables
const width: WidthValue | null = Width.parse('100px');
const background: BackgroundValue | null = Background.parse('red');
const margin: MarginValue | null = Margin.parse('10px 20px');
const color: ColorValue | null = Color.parse('#ff0000');
const position: PositionValue | null = Position.parse('absolute');
// Type-safe functions
function processWidth(value: string): WidthValue | null {
return Width.parse(value);
}
function serializeFont(font: FontValue): string {
return Font.toCSSValue(font) || '';
}
// All types are available from the main package for convenience
// This includes both property value types and atomic CSS types
Note: All examples work with both ESM (
import) and CommonJS (require). For TypeScript type imports, see Usage section above.
import { Width, Height, Margin, Background, Font } from '@wix/css-property-parser';
// Parse CSS values with advanced features
const width = Width.parse('calc(100% - 20px)');
const height = Height.parse('50vh');
const margin = Margin.parse('10spx 20spx'); // SPX (Scalable-Pixel) support
const background = Background.parse('linear-gradient(45deg, red, blue)');
const font = Font.parse('bold 16px/1.5 "Helvetica Neue", Arial, sans-serif');
// Serialize back to CSS
const widthCSS = Width.toCSSValue(width); // "calc(100% - 20px)"
const heightCSS = Height.toCSSValue(height); // "50vh"
const marginCSS = Margin.toCSSValue(margin); // "10spx 20spx"
const bgCSS = Background.toCSSValue(background); // "linear-gradient(45deg, red, blue)"
const fontCSS = Font.toCSSValue(font); // "bold 16px/1.5 "Helvetica Neue", Arial, sans-serif"
Every property evaluator follows the same consistent API:
interface PropertyEvaluator<T> {
parse(value: string): T | null;
toCSSValue(parsed: T | null): string | null;
}
import { Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight } from '@wix/css-property-parser';
// Sizing properties support lengths, percentages, and keywords
const width = Width.parse('50%'); // { value: 50, unit: '%' }
const height = Height.parse('auto'); // { keyword: 'auto' }
const minWidth = MinWidth.parse('0'); // { value: 0, unit: 'px' }
import { Margin, Padding, Gap, ColumnGap, RowGap } from '@wix/css-property-parser';
// Shorthand properties expand to constituent parts
const margin = Margin.parse('10px 20px'); // Expands to top/right/bottom/left
const padding = Padding.parse('1em'); // Expands to all sides
const gap = Gap.parse('10px 20px'); // Row and column gaps
import { FontSize, FontWeight, FontFamily, LineHeight, LetterSpacing } from '@wix/css-property-parser';
// Font properties with comprehensive keyword support
const fontSize = FontSize.parse('1.2em'); // { type: 'length', value: 1.2, unit: 'em' }
const fontWeight = FontWeight.parse('bold'); // { type: 'keyword', keyword: 'bold' }
const fontFamily = FontFamily.parse('Arial, sans-serif'); // { type: 'font-list', families: ['Arial', 'sans-serif'] }
const lineHeight = LineHeight.parse('1.5'); // { type: 'number', value: 1.5 } (unitless)
import { Background, Border, Font, TextShadow } from '@wix/css-property-parser';
// Multi-value and shorthand properties
const background = Background.parse('url(bg.jpg) no-repeat center / cover');
const border = Border.parse('2px solid red');
const font = Font.parse('bold 16px/1.4 "Helvetica Neue", Arial, sans-serif');
const textShadow = TextShadow.parse('2px 2px 4px rgba(0,0,0,0.5)');
For parsing individual CSS data types:
import {
LengthEvaluator,
PercentageEvaluator,
Color,
AngleEvaluator,
NumberEvaluator
} from '@wix/css-property-parser';
// Parse individual CSS types
const length = LengthEvaluator.parse('10px'); // { value: 10, unit: 'px' }
const percentage = PercentageEvaluator.parse('50%'); // { value: 50, unit: '%' }
const color = Color.parse('#ff0000'); // { type: 'hex', value: 'ff0000' }
const angle = AngleEvaluator.parse('45deg'); // { value: 45, unit: 'deg' }
import { Width, CssVariable } from '@wix/css-property-parser';
// CSS variables are parsed but not resolved
const width = Width.parse('var(--main-width)');
// Returns: { CSSvariable: '--main-width' }
const widthWithFallback = Width.parse('var(--main-width, 100px)');
// Returns: { CSSvariable: '--main-width', defaultValue: '100px' }
import { Width, FontSize } from '@wix/css-property-parser';
// Calc expressions
const width = Width.parse('calc(100% - 20px)');
// Returns: { expression: '100% - 20px', function: 'calc' }
// Min/max/clamp functions
const fontSize = FontSize.parse('clamp(1rem, 2.5vw, 2rem)');
// Returns: { expression: '1rem, 2.5vw, 2rem', function: 'clamp' }
import { Background } from '@wix/css-property-parser';
const originalValue = 'linear-gradient(45deg, red 0%, blue 100%)';
const parsed = Background.parse(originalValue);
const serialized = Background.toCSSValue(parsed);
console.log(serialized === originalValue); // true
import { FontSize, Color, Margin } from '@wix/css-property-parser';
// Validate design tokens
function validateDesignToken(property: string, value: string): boolean {
switch (property) {
case 'font-size':
return FontSize.parse(value) !== null;
case 'color':
return Color.parse(value) !== null;
case 'margin':
return Margin.parse(value) !== null;
default:
return false;
}
}
import { Width, Height, Background } from '@wix/css-property-parser';
// Parse and transform CSS values
function processStyles(styles: Record<string, string>) {
const processed: Record<string, any> = {};
for (const [property, value] of Object.entries(styles)) {
switch (property) {
case 'width':
processed.width = Width.parse(value);
break;
case 'height':
processed.height = Height.parse(value);
break;
case 'background':
processed.background = Background.parse(value);
break;
}
}
return processed;
}
import { Color, Background } from '@wix/css-property-parser';
// Optimize CSS values
function optimizeColor(value: string): string {
const parsed = Color.parse(value);
if (parsed && parsed.type === 'hex') {
// Convert to shortest hex format
return Color.toCSSValue(parsed);
}
return value;
}
# Run all tests
npm test
# Run tests for specific property
npm test -- width.test.ts
# Run tests with coverage
npm test:coverage
# Watch mode for development
npm test:watch
# Install dependencies
npm install
# Build TypeScript
npm run build
# Build with watch mode
npm run build:watch
# Run development server
npm run dev
Total: 124 CSS Property Evaluators - All evaluators include full MDN compliance, comprehensive test coverage, and TypeScript type definitions.
💡 Quick Reference: Use
{PropertyName}.parse(value)to parse and{PropertyName}.toCSSValue(parsed)to serialize any property below.
angle, color, length, number, percentage, string, timelength-percentage, css-variable, blend-modewidth, height, min-width, max-width, min-height, max-heightblock-size, inline-size, min-block-size, max-block-size, min-inline-size, max-inline-sizegap, column-gap, row-gapmargin (shorthand), margin-top, margin-right, margin-bottom, margin-left, margin-inline-start, margin-inline-endpadding (shorthand), padding-top, padding-right, padding-bottom, padding-left, padding-inline-start, padding-inline-endborder, border-color, border-style, border-widthborder-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radiusborder-top, border-right, border-bottom, border-leftborder-top-color, border-right-color, border-bottom-color, border-left-colorborder-top-style, border-right-style, border-bottom-style, border-left-styleborder-top-width, border-right-width, border-bottom-width, border-left-widthborder-block, border-block-start, border-block-endborder-block-start-color, border-block-end-colorborder-block-start-style, border-block-end-styleborder-block-start-width, border-block-end-widthborder-inline, border-inline-start, border-inline-endborder-inline-start-color, border-inline-end-colorborder-inline-start-style, border-inline-end-styleborder-inline-start-width, border-inline-end-widthfont (shorthand), font-family, font-size, font-weight, font-style, font-variant, font-stretchtext-align, text-transform, text-decoration, text-shadow, text-overflow, text-indentline-height, letter-spacingwhite-space, word-break, overflow-wrap, writing-modegrid-template (shorthand), grid-template-columns, grid-template-rowsgrid-area, grid-column, grid-rowgrid-gap (shorthand), grid-column-gap, grid-row-gapdisplay, overflow, visibilitybackground, color, opacity, box-shadowobject-fit, object-positionposition, z-indexalign-items, align-self, justify-content, flex-directionShared Evaluator Pattern (8 shared): 95% code reduction through intelligent reuse
CSS Functions: Full support for calc(), min(), max(), clamp(), var(), gradients
SPX Units: Wix Scalable-Pixel units for responsive design
Round-Trip Stability: Parse → serialize → parse produces identical results
Performance: Optimized parsing with minimal memory footprint
ISC License - see LICENSE file for details.
FAQs
A comprehensive TypeScript library for parsing and serializing CSS property values with full MDN specification compliance
The npm package @wix/css-property-parser receives a total of 189 weekly downloads. As such, @wix/css-property-parser popularity was classified as not popular.
We found that @wix/css-property-parser demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.