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.

To help convert numerical values into commonly-used special value types, like px or hex, we provide an optional module called style-value-types:

npm install style-value-types --save 

Each value type has three functions:

• test: Returns true if the provided value is of that type.
• parse: Returns the value in a format suitable for animation. Either a number or { [key: string]: number }.

And one of:

• transform: The reverse of parse. Accepts a number or map of named numbers and converts that into the value type.
• createTransformer: Accepts a value and returns a transform based on that specific value.

Import

import { color } from 'style-value-types';

Example

// Test
color.test('#fff'); // true
color.test(0); // false

// Parse
color.parse('rgba(255, 255, 255, 0)');
// { red: 255, green: 255, blue: 255, alpha: 0 }

// Transform
color.transform({ hue: 200, saturation: 100, lightness: 50, alpha: 0.5 });
// 'hsla(200, 100%, 50%, 0.5)'

Included value types

• alpha: Number between 0 and 1
• complex: String containing arbitrary sequence of numbers mixed with other characters. See below.
• combo: Handles space and comma delimited values, like CSS box-shadow: '10px 10px inset #f00, 5px 5px 30px #fff'
• color: String of either hex, hsla or rgba type
• degrees: String ending in deg
• hex: String beginning with # and followed by 3 or 6-digit hex code
• hsla: String with valid hsla property
• percent: String ending in %
• px: String ending in px
• scale: Number with a default of 1 instead of 0
• rgbUnit: Integer between 1 and 255
• rgba: String in rgba(rgbUnit, rgbUnit, rgbUnit, alpha) format

Complex and combo types

The complex and combo value types are slightly different to the others. Instead of a transform method, they have a createTransformer method which returns the transform method:

const svgPath = 'M150 0 L75 200';
const transform = complex.createTransformer(svgPath);

The returned transform function is unique to the string given to it. When this function is provided an object of the same format as returned by complex.parse() (in this example complex.parse(svgPath)), it will use the original string as a template.

Example:

transform({
  '0': 300,
  '1': 0,
  '2': 100,
  '3': 200
}); // Returns 'M300 0 L100 200'