CSS Style Normalizer

Build a utility that normalizes CSS style objects by automatically appending 'px' units to numeric values where appropriate, while leaving unitless properties as-is.

Requirements

You need to implement a function that accepts a style object (with string keys and string or numeric values) and returns a normalized style object where:

1. Numeric values for properties that require units (like width, height, margin, padding) should have 'px' appended
2. Numeric values for unitless properties (like flex, opacity, zIndex) should remain as numbers
3. String values should be passed through unchanged
4. The value 0 should be treated as unitless regardless of property

Test Cases

• When given { flex: 1, width: 200 }, it returns { flex: 1, width: '200px' } @test
• When given { opacity: 0.5, margin: 10, zIndex: 999 }, it returns { opacity: 0.5, margin: '10px', zIndex: 999 } @test
• When given { lineHeight: 1.5, fontSize: 16 }, it returns { lineHeight: 1.5, fontSize: '16px' } @test
• When given { width: 0, height: 0 }, it returns { width: 0, height: 0 } @test

Implementation

@generates

API

/**
 * Normalizes a CSS style object by adding 'px' units to numeric values where appropriate.
 *
 * @param {Object} styles - An object with CSS property names as keys and string or numeric values
 * @returns {Object} A normalized style object with units added where needed
 */
function normalizeStyles(styles) {
  // IMPLEMENTATION HERE
}

module.exports = { normalizeStyles };

Dependencies { .dependencies }

@emotion/unitless { .dependency }

Provides information about which CSS properties accept unitless numeric values.