CSS Style Value Formatter

A utility that formats numeric CSS style values by automatically adding 'px' units where appropriate, based on which CSS properties require units and which accept unitless numbers.

Capabilities

Processes flexbox properties

• Given a style object with flex: 1, flexGrow: 2, and flexShrink: 0.5, returns each value as-is without adding units @test

Processes grid layout properties

• Given a style object with gridRow: 2, gridColumn: 3, and gridRowSpan: 2, returns each value as-is without adding units @test

Processes typography properties

• Given a style object with fontWeight: 700 and lineHeight: 1.5, returns each value as-is without adding units @test
• Given a style object with fontSize: 16, adds 'px' unit to produce "16px" @test

Processes opacity properties

• Given a style object with opacity: 0.8, fillOpacity: 0.5, and strokeOpacity: 0.3, returns each value as-is without adding units @test

Processes layout properties requiring units

• Given a style object with width: 200, height: 100, padding: 10, and margin: 20, adds 'px' units to each value @test

Handles z-index and order properties

• Given a style object with zIndex: 999 and order: 5, returns each value as-is without adding units @test

Handles animation and aspect ratio properties

• Given a style object with animationIterationCount: 3 and aspectRatio: 1.5, returns each value as-is without adding units @test

Implementation

@generates

API

/**
 * Formats CSS style values by adding 'px' units to numeric values
 * for properties that require units, while leaving unitless properties unchanged.
 * Non-numeric values (strings) are returned as-is.
 *
 * @param {Object} styles - An object containing CSS property names as keys and their values (numbers or strings)
 * @returns {Object} A new object with formatted values (numbers converted to strings, with 'px' added where needed)
 */
function formatStyles(styles) {
  // IMPLEMENTATION HERE
}

module.exports = { formatStyles };

Dependencies { .dependencies }

@emotion/unitless { .dependency }

Provides information about which CSS properties accept unitless numeric values.