Style Value Processor

Build a style value processor that efficiently handles CSS property values for a CSS-in-JS library. The processor should convert style objects with numeric values into properly formatted CSS strings, determining when to add units based on CSS property conventions.

Requirements

Your processor should handle style objects where:

• Numeric values for properties that accept unitless numbers remain as-is
• Numeric values for properties that require units get 'px' appended
• Zero values never get units appended
• Non-numeric values pass through unchanged
• Custom CSS properties (starting with --) are never modified

The implementation should be optimized for performance, as it may process thousands of style objects during application rendering.

API

@generates

/**
 * Processes a single style value, adding 'px' unit where appropriate.
 *
 * @param {string} property - The CSS property name
 * @param {string|number} value - The style value
 * @returns {string|number} The processed value
 */
function processValue(property, value) {
  // IMPLEMENTATION HERE
}

/**
 * Processes an entire style object, converting all numeric values appropriately.
 *
 * @param {Object} styles - An object with CSS property names as keys
 * @returns {Object} A new object with processed string values
 */
function processStyles(styles) {
  // IMPLEMENTATION HERE
}

module.exports = {
  processValue,
  processStyles
};

Test Cases

• processValue('flex', 1) returns 1 @test
• processValue('opacity', 0.5) returns 0.5 @test
• processValue('zIndex', 100) returns 100 @test
• processValue('width', 200) returns "200px" @test
• processValue('height', 0) returns 0 @test
• processValue('margin', 0) returns 0 @test
• processValue('--custom-size', 10) returns 10 @test
• processValue('color', 'red') returns "red" @test
• processStyles({ flex: 1, width: 100, opacity: 0.8, color: 'blue' }) returns { flex: "1", width: "100px", opacity: "0.8", color: "blue" } @test
• processStyles({ zIndex: 999, padding: 20, lineHeight: 1.5 }) returns { zIndex: "999", padding: "20px", lineHeight: "1.5" } @test

Dependencies { .dependencies }

@emotion/unitless { .dependency }

Provides efficient lookup of CSS properties that accept unitless numeric values.