CSS Style Value Formatter

A utility for formatting CSS style values from JavaScript style objects, ensuring that numeric values are properly handled based on whether they require units.

Capabilities

Format style values correctly

When provided with a CSS property name and a numeric value, the formatter should determine whether the property accepts unitless values or requires units (like 'px'). Properties that accept unitless values should have the number returned as-is, while properties that require units should have 'px' appended.

• Given property "flex" with value 1, returns 1 @test
• Given property "opacity" with value 0.5, returns 0.5 @test
• Given property "zIndex" with value 100, returns 100 @test
• Given property "width" with value 200, returns "200px" @test
• Given property "height" with value 50, returns "50px" @test
• Given property "margin" with value 10, returns "10px" @test

Handle zero values appropriately

Zero values should never have units appended, regardless of the property type.

• Given property "width" with value 0, returns 0 @test
• Given property "padding" with value 0, returns 0 @test

Process style objects

Transform complete style objects where numeric values are converted to appropriate string or numeric representations.

• Given style object { flex: 1, width: 100, opacity: 0.8 }, returns { flex: "1", width: "100px", opacity: "0.8" } @test
• Given style object { zIndex: 10, margin: 20, lineHeight: 1.5 }, returns { zIndex: "10", margin: "20px", lineHeight: "1.5" } @test

Implementation

@generates

API

/**
 * Formats a CSS property value, adding 'px' units when necessary.
 *
 * @param {string} property - The CSS property name (e.g., "width", "flex", "opacity").
 * @param {number} value - The numeric value to format.
 * @returns {number|string} The formatted value - either the original number or a string with 'px' appended.
 */
function formatValue(property, value) {
  // IMPLEMENTATION HERE
}

/**
 * Processes a style object, formatting all numeric values appropriately.
 *
 * @param {Object} styles - An object with CSS property names as keys and values (string or number).
 * @returns {Object} A new object with all numeric values properly formatted as strings.
 */
function processStyles(styles) {
  // IMPLEMENTATION HERE
}

module.exports = {
  formatValue,
  processStyles,
};

Dependencies { .dependencies }

@emotion/unitless { .dependency }

Provides lookup object for CSS properties that accept unitless numeric values.

@satisfied-by