feat(ptw): add background color prefix support with comprehensive test suite

[croatialu]

feat(ptw): add background color prefix support with comprehensive test suite

Summary

Adds background color utility support to the PTW (PixiJS Tailwind) system and includes a comprehensive test suite to ensure reliability.

Changes Made

✨ New Features

• Background Color Support: Added bg- prefix support for setting backgroundColor in PixiJS Layout components
• Color Value Conversion: Implemented convertColorValue() method to handle color strings
• Color Parsing Logic: Added parseColor() method to integrate color utilities into the parsing pipeline

🛠️ Technical Implementation

• Added COLOR_MAP to map bg prefix to backgroundColor property
• Imported ColorSource type from pixi.js for type safety
• Extended TailwindParser.parse() to handle color utilities alongside existing spacing, size, and flex utilities

🧪 Testing

• Comprehensive Test Suite: Added 313 test cases covering:
  • Spacing utilities (padding, margin, gap)
  • Size utilities (width, height, min/max dimensions)
  • Flex utilities (direction, wrap, grow/shrink, alignment)
  • Color utilities (background colors) - NEW
  • Multiple utilities combinations
  • Template literal functionality with interpolation
  • Edge cases and error handling
  • Base unit conversion and px values

Usage Examples

// Background color utilities
const styles = tw`bg-red`; // { backgroundColor: 'red' }
const styles = tw`bg-blue`; // { backgroundColor: 'blue' }

// Combined with other utilities
const styles = tw`p-4 w-full flex-row items-center bg-red`;
// {
//   padding: 16,
//   width: '100%',
//   flexDirection: 'row',
//   alignItems: 'center',
//   backgroundColor: 'red'
// }

// With template literals
const color = 'blue';
const styles = tw`p-${spacing} bg-${color} flex-row`;

Testing Coverage

• ✅ All existing PTW functionality
• ✅ New background color utilities
• ✅ Template literal interpolation
• ✅ Edge cases and error handling
• ✅ Multiple utility combinations
• ✅ Type safety with PixiJS ColorSource

Breaking Changes

None. This is a purely additive feature that maintains backward compatibility.

Files Changed

• src/tailwind/ptw.ts - Added color support functionality
• tests/__tests__/ptw.test.ts - Added comprehensive test suite (NEW)

---

Type: Feature
Scope: PTW (PixiJS Tailwind)
Impact: Adds background color support to Tailwind-like styling in PixiJS Layout system

[pkg-pr-new]

layout-js • layout-react

npm i https://pkg.pr.new/pixijs/layout/@pixi/layout@122

commit: 791d311