units-css

What is units-css?

The units-css npm package provides utilities for converting and manipulating CSS units. It simplifies the process of working with different units in CSS, such as pixels, ems, rems, percentages, and more.

What are units-css's main functionalities?

Convert units

This feature allows you to convert one CSS unit to another. In the example, 16 pixels are converted to ems based on a base size of 16 pixels.

const units = require('units-css');
const pxToEm = units.convert('16px', 'em', { base: '16px' });
console.log(pxToEm); // '1em'

Parse units

This feature parses a CSS unit string into an object containing the numeric value and the unit. In the example, '16px' is parsed into an object with value 16 and unit 'px'.

const units = require('units-css');
const parsed = units.parse('16px');
console.log(parsed); // { value: 16, unit: 'px' }

Stringify units

This feature converts an object with a value and unit back into a CSS unit string. In the example, an object with value 16 and unit 'px' is converted back to '16px'.

const units = require('units-css');
const stringified = units.stringify({ value: 16, unit: 'px' });
console.log(stringified); // '16px'

Other packages similar to units-css

css-unit-converter

The css-unit-converter package provides similar functionality for converting between different CSS units. It offers a straightforward API for unit conversion but lacks some of the parsing and stringifying capabilities of units-css.

postcss-pxtorem

The postcss-pxtorem package is a PostCSS plugin that converts pixel units to rem units. While it focuses specifically on px to rem conversion, it integrates well with PostCSS workflows, unlike units-css which is a standalone utility.

css-values

The css-values package provides utilities for parsing and manipulating CSS values, including units. It offers a broader range of CSS value manipulations compared to units-css, which is more focused on unit conversions.

README

CSS unit conversion utility (WIP)