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);
+ });
+ });
 });
+
+