From 9f1699151e5eb52d9e4644952ed9058f1f2b3fe2 Mon Sep 17 00:00:00 2001 From: Aniket-lodh Date: Sun, 3 May 2026 18:47:31 +0530 Subject: [PATCH 1/5] feat(wxt-demo): add rem-to-px postcss example for Shadow Root UI --- packages/wxt-demo/package.json | 1 + packages/wxt-demo/postcss.config.mjs | 11 +++++++ .../src/entrypoints/rem-fix.content/index.ts | 32 +++++++++++++++++++ .../src/entrypoints/rem-fix.content/style.css | 30 +++++++++++++++++ packages/wxt-demo/wxt.config.ts | 1 + 5 files changed, 75 insertions(+) create mode 100644 packages/wxt-demo/postcss.config.mjs create mode 100644 packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts create mode 100644 packages/wxt-demo/src/entrypoints/rem-fix.content/style.css diff --git a/packages/wxt-demo/package.json b/packages/wxt-demo/package.json index e52b1242d..ed839a835 100644 --- a/packages/wxt-demo/package.json +++ b/packages/wxt-demo/package.json @@ -35,6 +35,7 @@ "typescript": "^5.9.3", "unocss": "^0.64.0 || ^0.65.0 || ^65.0.0 || ^66.0.0", "vitest": "^4.0.18", + "postcss-rem-to-responsive-pixel": "^7.0.4", "vitest-plugin-random-seed": "^1.1.2", "wxt": "workspace:*" }, diff --git a/packages/wxt-demo/postcss.config.mjs b/packages/wxt-demo/postcss.config.mjs new file mode 100644 index 000000000..0e564f1bc --- /dev/null +++ b/packages/wxt-demo/postcss.config.mjs @@ -0,0 +1,11 @@ +import postcssRemToResponsivePx from 'postcss-rem-to-responsive-pixel'; + +export default { + plugins: [ + postcssRemToResponsivePx({ + rootValue: 16, + propList: ['*'], + transformUnit: 'px', + }), + ], +}; diff --git a/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts b/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts new file mode 100644 index 000000000..18bc284d6 --- /dev/null +++ b/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts @@ -0,0 +1,32 @@ +import './style.css'; + +export default defineContentScript({ + matches: [''], + cssInjectionMode: 'ui', + + async main(ctx) { + const ui = await createShadowRootUi(ctx, { + name: 'rem-fix-demo', + position: 'inline', + anchor: 'body', + append: 'first', + onMount(container) { + const card = document.createElement('div'); + card.classList.add('rem-fix-card'); + + const title = document.createElement('h3'); + title.textContent = 'rem → px Demo'; + + const desc = document.createElement('p'); + desc.textContent = + 'This UI uses rem units in CSS, converted to px at build time by postcss-rem-to-responsive-pixel. ' + + 'It will render at the same size regardless of the host page\'s root font-size.'; + + card.append(title, desc); + container.append(card); + }, + }); + + ui.mount(); + }, +}); diff --git a/packages/wxt-demo/src/entrypoints/rem-fix.content/style.css b/packages/wxt-demo/src/entrypoints/rem-fix.content/style.css new file mode 100644 index 000000000..e6f5f879c --- /dev/null +++ b/packages/wxt-demo/src/entrypoints/rem-fix.content/style.css @@ -0,0 +1,30 @@ +/* + * These rem values will be converted to px at build time + * by postcss-rem-to-responsive-pixel, making this UI immune + * to host page font-size overrides. + */ +.rem-fix-card { + padding: 1rem; + border-radius: 0.5rem; + background-color: #1e1e2e; + color: #cdd6f4; + font-family: system-ui, -apple-system, sans-serif; + font-size: 0.875rem; + line-height: 1.5; + border: 1px solid #45475a; + max-width: 20rem; + box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); +} + +.rem-fix-card h3 { + margin: 0 0 0.5rem 0; + font-size: 1rem; + font-weight: 600; + color: #a6e3a1; +} + +.rem-fix-card p { + margin: 0; + font-size: 0.75rem; + color: #a6adc8; +} diff --git a/packages/wxt-demo/wxt.config.ts b/packages/wxt-demo/wxt.config.ts index 014e3ef17..c1ef6fe08 100644 --- a/packages/wxt-demo/wxt.config.ts +++ b/packages/wxt-demo/wxt.config.ts @@ -38,6 +38,7 @@ export default defineConfig({ 'iframe', 'location-change', 'main-world', + 'rem-fix', 'sandbox', 'sidepanel', 'unlisted', From 3f2ac999e7343f2d8f1e1142e8163e15ed06c912 Mon Sep 17 00:00:00 2001 From: Aniket-lodh Date: Sun, 3 May 2026 18:57:13 +0530 Subject: [PATCH 2/5] chore: add postcss to devDependencies in wxt-demo package --- packages/wxt-demo/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/wxt-demo/package.json b/packages/wxt-demo/package.json index ed839a835..49b5afc96 100644 --- a/packages/wxt-demo/package.json +++ b/packages/wxt-demo/package.json @@ -35,6 +35,7 @@ "typescript": "^5.9.3", "unocss": "^0.64.0 || ^0.65.0 || ^65.0.0 || ^66.0.0", "vitest": "^4.0.18", + "postcss": "^8.5.13", "postcss-rem-to-responsive-pixel": "^7.0.4", "vitest-plugin-random-seed": "^1.1.2", "wxt": "workspace:*" From 69b2b6924fb2d692ebceed794dff308a6bee9e21 Mon Sep 17 00:00:00 2001 From: Aniket lodh <63922607+Aniket-lodh@users.noreply.github.com> Date: Mon, 4 May 2026 19:37:10 +0530 Subject: [PATCH 3/5] Update packages/wxt-demo/src/entrypoints/rem-fix.content/style.css Co-authored-by: Patryk Kuniczak --- .../src/entrypoints/rem-fix.content/style.css | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/wxt-demo/src/entrypoints/rem-fix.content/style.css b/packages/wxt-demo/src/entrypoints/rem-fix.content/style.css index e6f5f879c..619561fa8 100644 --- a/packages/wxt-demo/src/entrypoints/rem-fix.content/style.css +++ b/packages/wxt-demo/src/entrypoints/rem-fix.content/style.css @@ -14,17 +14,17 @@ border: 1px solid #45475a; max-width: 20rem; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); -} -.rem-fix-card h3 { - margin: 0 0 0.5rem 0; - font-size: 1rem; - font-weight: 600; - color: #a6e3a1; -} + h3 { + margin-right:0.5rem; + font-size: 1rem; + font-weight: 600; + color: #a6e3a1; + } -.rem-fix-card p { - margin: 0; - font-size: 0.75rem; - color: #a6adc8; + p { + font-size: 0.75rem; + color: #a6adc8; + } } + From be261229ba91fe16d18705c2631374c887846086 Mon Sep 17 00:00:00 2001 From: Aniket lodh <63922607+Aniket-lodh@users.noreply.github.com> Date: Mon, 4 May 2026 19:37:22 +0530 Subject: [PATCH 4/5] Update packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts Co-authored-by: Patryk Kuniczak --- packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts b/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts index 18bc284d6..92c26b9c6 100644 --- a/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts +++ b/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts @@ -20,7 +20,7 @@ export default defineContentScript({ const desc = document.createElement('p'); desc.textContent = 'This UI uses rem units in CSS, converted to px at build time by postcss-rem-to-responsive-pixel. ' + - 'It will render at the same size regardless of the host page\'s root font-size.'; + 'It will render at the same size regardless of the host pages root font-size.'; card.append(title, desc); container.append(card); From 3468f500137ec054c90a3b1366baf48021560765 Mon Sep 17 00:00:00 2001 From: Aniket lodh <63922607+Aniket-lodh@users.noreply.github.com> Date: Thu, 7 May 2026 08:34:14 +0530 Subject: [PATCH 5/5] Update packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts Co-authored-by: Patryk Kuniczak --- packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts b/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts index 92c26b9c6..b14b36599 100644 --- a/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts +++ b/packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts @@ -18,9 +18,8 @@ export default defineContentScript({ title.textContent = 'rem → px Demo'; const desc = document.createElement('p'); - desc.textContent = - 'This UI uses rem units in CSS, converted to px at build time by postcss-rem-to-responsive-pixel. ' + - 'It will render at the same size regardless of the host pages root font-size.'; +desc.textContent = `This UI uses 'rem' units in CSS, converted to 'px' at build time by 'postcss-rem-to-responsive-pixel'. + It will render at the same size regardless of the host pages root 'font-size'.`; card.append(title, desc); container.append(card);