Skip to content

Support all modern logical properties

Choose a tag to compare

@oe oe released this 27 May 17:32
· 46 commits to main since this release
  • Logical Properties Shim/Experimental System: Major feature extension adding support for previously unsupported CSS logical properties and values

    • New logical-shim.ts module with extensible architecture
    • SHIM_DECLARATIONS object mapping logical properties to transformation functions
    • extendProcessors() function for seamless integration with existing postcss-logical functionality
    • Minimal-impact approach that extends rather than replaces core functionality
  • Scroll Properties Support: Full support for CSS scroll-related logical properties

    • scroll-margin-inline-start/end with direction-aware transformation to left/right
    • scroll-margin-block-start/end transformation to top/bottom
    • scroll-padding-inline-start/end with direction-aware transformation to left/right
    • scroll-padding-block-start/end transformation to top/bottom
    • Shorthand support: scroll-margin-inline, scroll-margin-block, scroll-padding-inline, scroll-padding-block
    • Proper value parsing for multi-value shorthands (start/end value handling)
  • Logical Values Support: Support for logical values in existing CSS properties

    • float: inline-start/end → direction-aware left/right transformation
    • clear: inline-start/end → direction-aware left/right transformation
    • resize: block/inline → vertical/horizontal transformation
    • Preserves non-logical values unchanged
  • Scroll Properties Support Overflow Properties (⭐ NEW via shim)

    • overscroll-behavior-block → overscroll-behavior-y
    • overscroll-behavior-inline → overscroll-behavior-x
    • overflow-block → overflow-y
    • overflow-inline → overflow-x
  • Scroll Properties Support CSS Containment Properties (⭐ NEW via shim)

    • contain-intrinsic-block-size → contain-intrinsic-height
    • contain-intrinsic-inline-size → contain-intrinsic-width
  • Smart Selector Priority Optimization: NEW! Advanced rightmost priority logic for predictable CSS behavior

    • Implements rightmost priority algorithm that prioritizes the most specific (rightmost) direction selector in complex selector chains
    • Handles mixed built-in (:dir(), [dir]) and custom direction selectors seamlessly
    • Eliminates unexpected behavior from contradictory direction contexts
    • Follows CSS cascade principles for intuitive results
    • Framework-agnostic support for any custom selector pattern
    • Comprehensive test coverage for edge cases and complex nested scenarios
    • New example demonstrating the optimization with real-world selector chains
  • Enhanced Documentation: Comprehensive documentation improvements

    • New technical documentation (SELECTOR-PRIORITY-OPTIMIZATION.md) explaining the rightmost priority logic
    • Updated README with detailed explanations and examples of the new optimization
    • Added selector priority optimization example in examples/selector-priority/
    • Bilingual documentation (English/Chinese) for broader accessibility

Enhanced

  • Property Detection: Extended logical property detection to include shim-supported properties

    • Updated supportedLogicalPropertiesSet with all shim-enabled properties
    • Improved accuracy for property classification and transformation decisions
    • Better integration between core logical properties and shim extensions
  • Test Coverage: Comprehensive test suite expansion to 250 tests (100% pass rate)

    • Added unit tests for all shim functionality in logical-properties-unit.test.ts
    • Integration tests for combined shim and core features
    • Enhanced limitations-handling.test.ts with shim capability demonstrations
    • Exception handling and edge case coverage
    • CSS variables interaction testing with logical property names
  • Output Optimization: Intelligent rule consolidation for better CSS output

    • Direction-independent properties consolidated in main rules
    • Direction-dependent properties separated into [dir="ltr"]/[dir="rtl"] variants only when needed
    • Reduced CSS output size through smart property grouping
    • Better performance with fewer duplicate declarations