Avoid duplicating shared CSS across multiple WXT entrypoints

[oyzamil]

When multiple WXT entrypoints import the same CSS file, WXT generates separate CSS for each entrypoint.

For example:

src/
├── entrypoints/
│   ├── popup/
│   ├── aliexpress.content/
│   └── ebay.content/
│
└── styles/
    └── tailwind.css

All three use:

import "@/styles/tailwind.css";

But the build effectively produces:

                 tailwind.css
                     │
          ┌───────────┼───────────┐
          ▼           ▼           ▼
       popup.css  aliexpress.css  ebay.css
          │           │              │
          └───────────┴──────────────┘
                  duplicated CSS

Instead, it would be ideal to have:

                 shared.css
                     │
        ┌────────────┼────────────┐
        ▼            ▼            ▼
      Popup      AliExpress      eBay

Why this matters

This becomes especially problematic with Tailwind CSS, where the generated stylesheet can be relatively large.

It can cause:

• 📦 Larger extension builds
• 💾 Duplicate CSS in the final dist
• ⚡ Unnecessary CSS parsing/loading
• 📈 Increasing overhead as more content scripts are added
• 🧩 More complexity when sharing UI components/design systems

This is common when an extension has:

Popup
Options
Side panel
Content script A
Content script B
Content script C
...
        ↓
   Same UI/CSS

Expected behavior

WXT should ideally detect shared CSS dependencies and emit them as a single shared CSS asset:

dist/
├── assets/
│   └── shared-[hash].css
├── popup/
├── content-scripts/
│   ├── aliexpress.js
│   └── ebay.js
└── ...

Multiple entrypoints could then reference the same CSS asset.

Current workaround

Developers can manually place CSS in public/ and load it with:

const link = document.createElement("link");

link.rel = "stylesheet";
link.href = browser.runtime.getURL("/shared.css");

document.head.appendChild(link);

However, this means manually managing CSS that should ideally be handled by WXT's build system.

Request

Could WXT support shared/deduplicated CSS chunks across multiple entrypoints, similar to shared JavaScript dependencies?

This would significantly reduce build size and make multi-content-script + Tailwind projects more efficient.

Thanks for the great work on WXT! @aklinker1 @PatrykKuniczak

Reproduction

wxt-css-dup-demo.zip

Steps to reproduce

Run bun install and then bun run zip

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 996.68 MB / 7.88 GB
  Binaries:
    Node: 22.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.13.0 - C:\Users\oyzamil\AppData\Roaming\npm\npm.CMD
    pnpm: 10.28.2 - C:\Users\oyzamil\AppData\Local\pnpm\pnpm.CMD
    bun: 1.3.14 - C:\Users\oyzamil\.bun\bin\bun.EXE
  Browsers:
    Chrome: 151.0.7922.174
    Edge: Chromium (151.0.4129.107)
    Firefox: 153.0.3 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.26100.8115

Used Package Manager

bun

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.