CSS mirroring support PostCSS, postcss-pxtorem

package.json

@@ -283,6 +283,11 @@
                     "type": "boolean",
                     "default": false,
                     "description": "Turn off notification for webhint installation failures."
+                },
+                "vscode-edge-devtools.postCSSRootValue": {
+                    "type": "number",
+                    "default": 0,
+                    "description": "Specifies the root value used by PostCSS."
                 }
             }
         },
@@ -716,4 +721,4 @@
         "webpack": "5.88.2",
         "webpack-cli": "5.1.4"
     }
-}
+}

src/devtoolsPanel.ts

@@ -32,6 +32,8 @@ import {
     CDN_FALLBACK_REVISION,
     getCSSMirrorContentEnabled,
     setCSSMirrorContentEnabled,
+    getPostCSSRootValue,
+    toOriginalPx,
 } from './utils';
 import { ErrorReporter } from './errorReporter';
 import { ErrorCodes } from './common/errorCodes';
@@ -382,9 +384,10 @@ export class DevToolsPanel {
                 }
                 if (canMirror)
                 {
-                    this.mirroredCSS.set(url, newContent);
+                    const postCSSRootValue = getPostCSSRootValue();
+                    this.mirroredCSS.set(url, toOriginalPx(newContent, postCSSRootValue));
                     void textEditor.edit(editBuilder => {
-                        editBuilder.replace(fullRange, newContent);
+                        editBuilder.replace(fullRange, toOriginalPx(newContent, postCSSRootValue));
                     });
                 }
                 else

src/utils.ts

@@ -756,6 +756,22 @@ export function reportChangedExtensionSetting(event: vscode.ConfigurationChangeE
     }
 }
 
+export function getPostCSSRootValue(): number | undefined {
+    const settings = vscode.workspace.getConfiguration(SETTINGS_STORE_NAME);
+    const rootValue: number | undefined = settings.get('postCSSRootValue');
+    return rootValue;
+}
+
+export function toOriginalPx(text:string, rootSize:number|undefined):string {
+    if (rootSize) {
+        return text.replace(/(\d*\.?\d+)rem/g, (match, remValue:string) => {
+            const pxValue = Math.round(parseFloat(remValue) * rootSize);
+            return `${pxValue}px`;
+        });
+    }
+    return text;
+}
+
 export function reportUrlType(url: string, telemetryReporter: Readonly<TelemetryReporter>): void {
     const localhostPattern = /^https?:\/\/localhost:/;
     const ipPattern = /(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/;

test/utils.test.ts

@@ -7,7 +7,7 @@
 import * as path from "path";
 
 import { createFakeExtensionContext, createFakeGet, createFakeTelemetryReporter, createFakeVSCode, Mocked } from "./helpers/helpers";
-import { BrowserFlavor, IRemoteTargetJson, IUserConfig } from "../src/utils";
+import { BrowserFlavor, IRemoteTargetJson, IUserConfig, toOriginalPx } from "../src/utils";
 import { ConfigurationChangeEvent } from "vscode";
 
 jest.mock("vscode", () => null, { virtual: true });
@@ -1062,4 +1062,38 @@ describe("utils", () => {
             expect(reporter.sendTelemetryEvent).toBeCalledWith('user/settingsChanged', { isHeadless: 'false' });
         });
     });
+
+    describe('PostCSS Utilities Tests', () => {
+        it("returns the stored settings", async () => {
+            const expected = {
+                postCSSRootValue: 3.75,
+            };
+
+            // Override the configuration mock to return our custom test values
+            const configMock = {
+                get: (name: string) => (expected as any)[name],
+            };
+            const vscodeMock = await jest.requireMock("vscode");
+            vscodeMock.workspace.getConfiguration.mockImplementationOnce(() => configMock);
+
+            // Ensure the new values are returned
+            const postCSSRootValue = utils.getPostCSSRootValue();
+            expect(postCSSRootValue).toBe(expected.postCSSRootValue);
+        });
+
+        it('converts rem to original px correctly with rootSize 3.75', async () => {
+            const text = `.example { margin: 2rem; }`;
+            const convertedText = toOriginalPx(text, 3.75);
+            const expectedPx = Math.round(2 * 3.75);
+            expect(convertedText).toBe(`.example { margin: ${expectedPx}px; }`);
+        });
+
+        it('returns original text if rootSize is undefined', async () => {
+            const text = `.example { margin: 2rem; }`;
+            const convertedText = toOriginalPx(text, undefined);
+            expect(convertedText).toBe(text);
+        });
+    });
 });
+
+