primefaces/primevue

Feature Request: Transform CSS Logical Properties to Physical Properties for Legacy Browser Support

Open

#7272 opened on Feb 18, 2025

View on GitHub
 (1 comment) (0 reactions) (0 assignees)CSS (8,326 stars) (1,057 forks)batch import
Resolution: Needs Upvote :+1:good first issue

Description

I would like to request a feature to support transforming CSS logical properties to physical properties for better browser compatibility, similar to what Ant Design Vue provides.

Currently, CSS logical properties have limited support in older browsers. By transforming logical properties to their physical counterparts (like converting margin-inline to margin-left/margin-right), we can ensure consistent layout behavior across different browser versions.

Reference implementation from Ant Design Vue:

This feature would allow developers to:

  • Write modern CSS logical properties in their code
  • Automatically get backward compatibility for legacy browsers
  • Maintain clean, future-proof code while ensuring wide browser support

Would the PrimeVue team consider adding this compatibility transformer feature?

Contributor guide

Tech stack
vuetypescriptcss
Domain
frontendtooling
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS logical propertiesbasic JavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the Ant Design Vue reference implementation at https://github.com/vueComponent/ant design vue/blob/main/components/ util/cssinjs/transformers/legacyLogicalProperties.ts. Explore PrimeVue's existing CSS build pipeline to understand how it currently handles browser compatibility. Consider implementing a similar transformer that can be integrated into PrimeVue's theme or build process. Check the single comment on the issue for any additional context or requirements from maintainers.