CSS Property Validator

Build a type-safe CSS property validation system that can distinguish between properties that accept unitless numeric values and those that require units.

Requirements

Implement a TypeScript module that provides the following functionality:

1. Type-Safe Property Validation

Create a type guard function isUnitlessProperty that:

• Takes a CSS property name (string) as input
• Returns a boolean indicating whether the property accepts unitless numeric values
• Provides TypeScript type narrowing so the compiler knows the property is valid

2. Value Formatter

Create a function formatStyleValue that:

• Takes a CSS property name and a numeric value
• Returns the appropriate formatted value:
  • For unitless properties: returns the number as-is (or as a string)
  • For properties requiring units: appends 'px' to the number
  • For zero values: returns 0 without units (optimization)

3. Style Object Validator

Create a function validateStyleObject that:

• Takes an object with CSS property names as keys and numeric or string values
• Returns an object indicating which properties are valid unitless properties
• The return object should map each property name to a boolean indicating if it's unitless
• Should handle both valid and invalid property names gracefully

Constraints

• Use TypeScript with strict type checking enabled
• All functions must be properly typed with no any types
• The type guard must provide proper type narrowing
• Handle edge cases (undefined properties, zero values, etc.)

Dependencies { .dependencies }

@emotion/unitless { .dependency }

Provides a lookup object for CSS properties that don't accept values with units.

Test Cases

Test Case 1: Type Guard Validation { .test-case @test }

// File: validator.test.ts
import { isUnitlessProperty } from './validator';

// Test unitless properties
console.log(isUnitlessProperty('flex'));       // Should print: true
console.log(isUnitlessProperty('opacity'));    // Should print: true
console.log(isUnitlessProperty('zIndex'));     // Should print: true

// Test properties that need units
console.log(isUnitlessProperty('width'));      // Should print: false
console.log(isUnitlessProperty('height'));     // Should print: false
console.log(isUnitlessProperty('padding'));    // Should print: false

Test Case 2: Value Formatting { .test-case @test }

// File: formatter.test.ts
import { formatStyleValue } from './validator';

// Unitless properties should not get units
console.log(formatStyleValue('flex', 1));           // Should print: 1 (or "1")
console.log(formatStyleValue('opacity', 0.5));      // Should print: 0.5 (or "0.5")
console.log(formatStyleValue('zIndex', 999));       // Should print: 999 (or "999")

// Properties with units should get 'px' appended
console.log(formatStyleValue('width', 100));        // Should print: "100px"
console.log(formatStyleValue('height', 200));       // Should print: "200px"

// Zero should not get units
console.log(formatStyleValue('width', 0));          // Should print: 0 (or "0")

Test Case 3: Style Object Validation { .test-case @test }

// File: object-validator.test.ts
import { validateStyleObject } from './validator';

const styles = {
  flex: 1,
  opacity: 0.8,
  width: 200,
  zIndex: 10,
  margin: 20
};

const result = validateStyleObject(styles);
console.log(JSON.stringify(result, null, 2));
// Should print:
// {
//   "flex": true,
//   "opacity": true,
//   "width": false,
//   "zIndex": true,
//   "margin": false
// }

Deliverables

• validator.ts: Main implementation file with all three functions
• validator.test.ts: Test file demonstrating the type guard
• formatter.test.ts: Test file demonstrating value formatting
• object-validator.test.ts: Test file demonstrating style object validation

Notes

• Focus on type safety and proper TypeScript type annotations
• The implementation should leverage the dependency package effectively
• Consider performance for the validation operations