style-value-types

What is style-value-types?

The style-value-types npm package provides utilities for parsing, transforming, and interpolating CSS style values. It is particularly useful for animation libraries and other applications that need to manipulate CSS values programmatically.

What are style-value-types's main functionalities?

Parsing CSS Values

This feature allows you to parse CSS values into their constituent parts, such as separating the numeric value from the unit.

const { parse } = require('style-value-types');
const parsedValue = parse('10px');
console.log(parsedValue); // { unit: 'px', value: 10 }

Transforming CSS Values

This feature allows you to transform numeric values into CSS values with appropriate units.

const { px } = require('style-value-types');
const transformedValue = px.transform(10);
console.log(transformedValue); // '10px'

Interpolating CSS Values

This feature allows you to interpolate between two CSS values, which is useful for animations and transitions.

const { interpolate } = require('style-value-types');
const interpolator = interpolate([0, 100], ['0px', '100px']);
console.log(interpolator(0.5)); // '50px'

Other packages similar to style-value-types

stylefire

Stylefire is a library for setting and getting CSS styles on DOM elements. It provides similar functionality for parsing and transforming CSS values but is more focused on direct DOM manipulation.

csstype

Csstype is a TypeScript library that provides type definitions for CSS properties and values. While it doesn't offer parsing or transforming utilities, it ensures type safety when working with CSS in TypeScript.

polished

Polished is a library of lightweight, fast, and easy-to-use style functions for writing styles in JavaScript. It includes utilities for manipulating CSS values, similar to style-value-types, but also offers a broader range of styling utilities.

README

Style Value Types

Parsers, transformers and tests for common style value types, eg: %, hex codes etc.

Install

npm install style-value-types --save

Docs