feat(wxt-demo): add rem-to-px postcss example for Shadow Root UI

packages/wxt-demo/package.json

@@ -35,6 +35,8 @@
     "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:*"
   },

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

packages/wxt-demo/src/entrypoints/rem-fix.content/index.ts

@@ -0,0 +1,31 @@
+import './style.css';
+
+export default defineContentScript({
+  matches: ['<all_urls>'],
+  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 pages root 'font-size'.`;
+
+        card.append(title, desc);
+        container.append(card);
+      },
+    });
+
+    ui.mount();
+  },
+});

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);
+
+  h3 {
+    margin-right:0.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #a6e3a1;
+  }
+
+  p {
+    font-size: 0.75rem;
+    color: #a6adc8;
+  }
+}
+

packages/wxt-demo/wxt.config.ts

@@ -38,6 +38,7 @@ export default defineConfig({
       'iframe',
       'location-change',
       'main-world',
+      'rem-fix',
       'sandbox',
       'sidepanel',
       'unlisted',