From 3bf8a8a053341447fe678fbf363ceaa044f010c6 Mon Sep 17 00:00:00 2001 From: flyyuan <740004544@qq.com> Date: Tue, 13 Feb 2024 03:21:50 +0800 Subject: [PATCH 1/5] get postcssRootValue --- package.json | 7 ++++++- src/utils.ts | 8 ++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e051e5ad..8ccbfb79 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts index 933db457..1ac8d14b 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -756,6 +756,12 @@ 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 reportUrlType(url: string, telemetryReporter: Readonly): 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]?)/; @@ -834,6 +840,8 @@ export function getSupportedStaticAnalysisFileTypes(): string[] { } (function initialize() { + const aaa = getPostcssRootValue(); + console.log('getPostcssRootValue',aaa); // insertion order matters. msEdgeBrowserMapping.set('Stable', { debianLinux: '/opt/microsoft/msedge/msedge', From 6b0c9843a52471ecb248338f6a6ec63be64256e7 Mon Sep 17 00:00:00 2001 From: flyyuan <740004544@qq.com> Date: Tue, 13 Feb 2024 03:59:55 +0800 Subject: [PATCH 2/5] toOriginalPx --- src/devtoolsPanel.ts | 7 +++++-- src/utils.ts | 10 ++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/devtoolsPanel.ts b/src/devtoolsPanel.ts index 2456538c..ab1ad04a 100644 --- a/src/devtoolsPanel.ts +++ b/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 diff --git a/src/utils.ts b/src/utils.ts index 1ac8d14b..bc3c78d9 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -762,6 +762,16 @@ export function getPostcssRootValue(): number | undefined { 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): 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]?)/; From 963447ad5537c02cbba3432ed274428c0721c1ec Mon Sep 17 00:00:00 2001 From: flyyuan <740004544@qq.com> Date: Tue, 13 Feb 2024 04:54:47 +0800 Subject: [PATCH 3/5] toOriginalPx test --- src/utils.ts | 2 -- test/utils.test.ts | 20 +++++++++++++++++++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/utils.ts b/src/utils.ts index bc3c78d9..4be0d631 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -850,8 +850,6 @@ export function getSupportedStaticAnalysisFileTypes(): string[] { } (function initialize() { - const aaa = getPostcssRootValue(); - console.log('getPostcssRootValue',aaa); // insertion order matters. msEdgeBrowserMapping.set('Stable', { debianLinux: '/opt/microsoft/msedge/msedge', diff --git a/test/utils.test.ts b/test/utils.test.ts index 522ac0fa..45c01654 100644 --- a/test/utils.test.ts +++ b/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,22 @@ describe("utils", () => { expect(reporter.sendTelemetryEvent).toBeCalledWith('user/settingsChanged', { isHeadless: 'false' }); }); }); + + describe('PostCSS Utilities Tests', () => { + + 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); + }); + }); }); + + From 5c15eb12e28bea4fe3adcc443d18b031b8f59e77 Mon Sep 17 00:00:00 2001 From: flyyuan <740004544@qq.com> Date: Wed, 14 Feb 2024 17:07:21 +0800 Subject: [PATCH 4/5] test for getPostcssRootValue --- test/utils.test.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/test/utils.test.ts b/test/utils.test.ts index 45c01654..42f3ae1b 100644 --- a/test/utils.test.ts +++ b/test/utils.test.ts @@ -1064,7 +1064,23 @@ describe("utils", () => { }); 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); From fdc178cc61805a2d14f7ec5a5b088e85226bd89a Mon Sep 17 00:00:00 2001 From: flyyuan <740004544@qq.com> Date: Wed, 14 Feb 2024 17:30:22 +0800 Subject: [PATCH 5/5] update variable postCSSRootValue from postcssRootValue --- package.json | 2 +- src/devtoolsPanel.ts | 8 ++++---- src/utils.ts | 4 ++-- test/utils.test.ts | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 8ccbfb79..ab110e11 100644 --- a/package.json +++ b/package.json @@ -284,7 +284,7 @@ "default": false, "description": "Turn off notification for webhint installation failures." }, - "vscode-edge-devtools.postcssRootValue": { + "vscode-edge-devtools.postCSSRootValue": { "type": "number", "default": 0, "description": "Specifies the root value used by PostCSS." diff --git a/src/devtoolsPanel.ts b/src/devtoolsPanel.ts index ab1ad04a..c1410f34 100644 --- a/src/devtoolsPanel.ts +++ b/src/devtoolsPanel.ts @@ -32,7 +32,7 @@ import { CDN_FALLBACK_REVISION, getCSSMirrorContentEnabled, setCSSMirrorContentEnabled, - getPostcssRootValue, + getPostCSSRootValue, toOriginalPx, } from './utils'; import { ErrorReporter } from './errorReporter'; @@ -384,10 +384,10 @@ export class DevToolsPanel { } if (canMirror) { - const postcssRootValue = getPostcssRootValue(); - this.mirroredCSS.set(url, toOriginalPx(newContent, postcssRootValue)); + const postCSSRootValue = getPostCSSRootValue(); + this.mirroredCSS.set(url, toOriginalPx(newContent, postCSSRootValue)); void textEditor.edit(editBuilder => { - editBuilder.replace(fullRange, toOriginalPx(newContent, postcssRootValue)); + editBuilder.replace(fullRange, toOriginalPx(newContent, postCSSRootValue)); }); } else diff --git a/src/utils.ts b/src/utils.ts index 4be0d631..e0d35cf9 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -756,9 +756,9 @@ export function reportChangedExtensionSetting(event: vscode.ConfigurationChangeE } } -export function getPostcssRootValue(): number | undefined { +export function getPostCSSRootValue(): number | undefined { const settings = vscode.workspace.getConfiguration(SETTINGS_STORE_NAME); - const rootValue: number | undefined = settings.get('postcssRootValue'); + const rootValue: number | undefined = settings.get('postCSSRootValue'); return rootValue; } diff --git a/test/utils.test.ts b/test/utils.test.ts index 42f3ae1b..1639149a 100644 --- a/test/utils.test.ts +++ b/test/utils.test.ts @@ -1066,7 +1066,7 @@ describe("utils", () => { describe('PostCSS Utilities Tests', () => { it("returns the stored settings", async () => { const expected = { - postcssRootValue: 3.75, + postCSSRootValue: 3.75, }; // Override the configuration mock to return our custom test values @@ -1077,8 +1077,8 @@ describe("utils", () => { vscodeMock.workspace.getConfiguration.mockImplementationOnce(() => configMock); // Ensure the new values are returned - const postcssRootValue = utils.getPostcssRootValue(); - expect(postcssRootValue).toBe(expected.postcssRootValue); + const postCSSRootValue = utils.getPostCSSRootValue(); + expect(postCSSRootValue).toBe(expected.postCSSRootValue); }); it('converts rem to original px correctly with rootSize 3.75', async () => {