Unfortunately, it seems that converting rem
and em
units to px
statically is not possible. The browser handles this conversion dynamically in real time, making it impossible to set these values statically during compilation.
It's important to note that rem
s (and consequently em
s) can be influenced by user settings in the browser, meaning websites using these units will adjust according to the user's font size preferences, which cannot be predicted or enforced.
While some websites may set a fixed pixel font-size on the root element to provide consistency, this is generally considered bad practice. Additionally, given your goal for the plugin to work across various websites/templates, this approach may not be suitable.
Furthermore, aside from the challenges with browser font-sizes, calculating em
units statically can be complex, especially considering their dependence on parent elements and the element itself. This adds another layer of difficulty to achieving your objective.
In conclusion, it appears that achieving your desired result is not feasible due to the inherent differences between rem
s, em
s, and px
s, as well as the dynamic nature of their conversion during CSS parsing.