@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.
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 height = Height.parse('50vh');
const margin = Margin.parse('10spx 20spx'); // SPX (Scalable-Pixel) support
const background = Background.parse('linear-gradient(45deg, red, blue)');
// 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)"
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: 123 CSS Property Evaluators
angle, blend-mode, color, css-variable, length, length-percentagenumber, percentage, string, timewidth, 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, margin-top, margin-right, margin-bottom, margin-left, margin-inline-start, margin-inline-endpadding, 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, 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, grid-template-columns, grid-template-rowsgrid-area, grid-column, grid-rowgrid-gap, grid-column-gap, grid-row-gapdisplay, overflow, visibilitybackground, color, opacity, box-shadowobject-fit, object-positionposition, z-indexalign-items, align-self, justify-content, flex-directionISC 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 41 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 24 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.
Security News
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.