Style Value Processor

A utility that processes CSS style values and automatically adds pixel units to numeric values when appropriate.

Capabilities

Processes numeric style values

• When given property "width" with value 100, returns "100px" @test
• When given property "margin" with value 20, returns "20px" @test
• When given property "padding" with value 15, returns "15px" @test

Preserves unitless properties

• When given property "flex" with value 1, returns 1 (no unit added) @test
• When given property "opacity" with value 0.5, returns 0.5 (no unit added) @test
• When given property "zIndex" with value 999, returns 999 (no unit added) @test
• When given property "lineHeight" with value 1.5, returns 1.5 (no unit added) @test

Handles zero values appropriately

• When given property "width" with value 0, returns 0 (no unit needed for zero) @test
• When given property "margin" with value 0, returns 0 (no unit needed for zero) @test

Handles string values

• When given property "width" with value "100px", returns "100px" unchanged @test
• When given property "color" with value "red", returns "red" unchanged @test

Implementation

@generates

API

/**
 * Processes a CSS property value and adds 'px' unit if needed.
 *
 * @param {string} property - The CSS property name (e.g., 'width', 'flex', 'opacity')
 * @param {string|number} value - The value for the property
 * @returns {string|number} The processed value with units added if appropriate
 */
function processStyleValue(property, value) {
  // IMPLEMENTATION HERE
}

module.exports = { processStyleValue };

Dependencies { .dependencies }

@emotion/unitless { .dependency }

Provides an object of CSS properties that don't accept unit values.

@satisfied-by