CSS Style Value Processor

Build a style value processor that formats numeric CSS values by adding appropriate units. The processor should handle both standard CSS properties and CSS custom properties (CSS variables).

Requirements

Implement a function that processes CSS property-value pairs where the value is numeric. The function should:

1. Accept a CSS property name (string) and a numeric value
2. Return the value as-is for properties that don't need units
3. Return the value as-is for CSS custom properties (properties starting with --)
4. Add px units to numeric values for properties that require units
5. Handle the special case where a value of 0 doesn't need units

Implementation Guidelines

• CSS custom properties are identified by checking if the property name starts with -- (hint: check the character code at position 1 for a hyphen, which has character code 45)
• Use appropriate type annotations for TypeScript
• Export the main processing function

Test Cases

• Given property flex and value 1, the function returns 1 @test
• Given property opacity and value 0.8, the function returns 0.8 @test
• Given property width and value 200, the function returns "200px" @test
• Given property --my-custom-var and value 42, the function returns 42 @test
• Given property margin and value 0, the function returns 0 @test

Implementation

@generates

API

/**
 * Processes a CSS property value by adding units when necessary.
 *
 * @param property - The CSS property name
 * @param value - The numeric value
 * @returns The formatted value (either as-is or with 'px' appended)
 */
export function processStyleValue(property: string, value: number): string | number;

Dependencies { .dependencies }

@emotion/unitless { .dependency }

Provides a lookup object for CSS properties that don't require units.