CSS mirroring support PostCSS, postcss-pxtorem, postcss-px-to-viewport

[flyyuan]

Is your feature request related to a problem? Please describe.

The current CSS mirroring functionality does not support the postcss-pxtorem plugin. This limitation becomes problematic when there's a need to maintain sizes in pixels within the file, even though the conversion to rem units is handled by the extension. The absence of support for converting rem or vw units back to pixels before saving the mirrored CSS content restricts the usability of CSS mirroring in projects that utilize PostCSS for responsive design and scaling.
reproduct issues example:
https://github.com/flyyuan/my-app-cra-ts-scss-rem

Describe the solution you'd like:

Enhance the extension to interpret configurations from the postcss.config.js file, specifically leveraging the rootValue setting. This improvement would enable the automatic conversion of rem and vw units back to pixels based on the rootValue defined, prior to saving the new content of the mirrored CSS. Such a feature would streamline the development process by ensuring that the original pixel values can be preserved and manipulated directly within the CSS files, while still benefiting from the responsive and scalable advantages of using rem and vw units through PostCSS plugins.

Describe alternatives you've considered:

N/A

Additional context:

This feature request aims to bridge the gap between the flexibility of using PostCSS for responsive design and the convenience of working with pixel values directly in CSS files. By accommodating the conversion process within the CSS mirroring functionality, developers can achieve a more seamless integration of responsive design techniques without compromising on the ease of use or the clarity of their codebase.

AB#48952824

[captainbrosset]

Thank you for filing. Marking this as tracked on our backlog.

[flyyuan]

I am preparing to submit a PR about it @captainbrosset

[flyyuan]

This resolves #2016
@captainbrosset

[captainbrosset]

Thank you for opening a PR. I'll ping a reviewer on it.

[vidorteg]

Hi @flyyuan

Thanks for bringing this to our attention (and also for the PR to address it 👍). Unfortunately I'm not familiar on the internals on postCSS or the pxtorem plugin(s), but if I understand corrently the intention is to transform between different units (px and rem) while using the CSS mirroring function? do you have a minimal repro/example on the workflow you expect to see?

[flyyuan]

Hi @flyyuan

Thanks for bringing this to our attention (and also for the PR to address it 👍). Unfortunately I'm not familiar on the internals on postCSS or the pxtorem plugin(s), but if I understand corrently the intention is to transform between different units (px and rem) while using the CSS mirroring function? do you have a minimal repro/example on the workflow you expect to see?

@vidorteg Yes, the goal is to enable the automatic conversion of rem units back to px when using the CSS mirroring feature.
You can achieve this desired effect by using the plugin from flyyuan/vscode-edge-devtools to launch the project my-app-cra-ts-scss-rem (has some px in src/App.scss).
Without this setup, if you use the official vscode-edge-devtools, the rem units converted during CSS mirroring will directly overwrite the original px values in the SCSS files.

To address this issue, two additional steps have been implemented on top of the existing CSS mirroring process:
Configure the rootValue for the current PostCSS in the plugin settings vscode-edge-devtools.postCSSRootValue. This step will not take effect if not configured.
For the CSS mirroring content, use the rootValue to reverse calculate the values from rem back to px.

[vidorteg]

Copying and pasting from the pull request (#2016):

thank you for the detailed steps on how to test the feature, I had some time to review the proposed feature and unfortunately I don't think this is something that we would like to include at the moment. Here is some reasoning behind it:

• The CSS Mirroring feature is designed to be a "what-you-see-is-what-you-get" (WYSIWYG), which is what is happening in here. If you edit the px value in the CSS file it will correctly display the px in the Devtools.
• If you only use rem units on both places (source file and Devtools) the WYSISWYG consistency remains intact it is only when postcss-pxtorem plugin kicks-in that it gets broken, which hints that the proposed behavior could likely be achieved as a postCSS plugin (although my expertise in postCSS is limited, so I cannot confirm if this approach is feasible).
• On the limited testing I did I found several workarounds, e.g in the postcss.config.js file I changed replace: false which kept both values (px and rem) in the file and in the Devtools (which is consistent with WYSISWYG).

Thank you for using the Edge Devtools extension.