fix: deduplicate content script CSS in build output#2268
Open
oc-wonton wants to merge 2 commits intowxt-dev:mainfrom
Open
fix: deduplicate content script CSS in build output#2268oc-wonton wants to merge 2 commits intowxt-dev:mainfrom
oc-wonton wants to merge 2 commits intowxt-dev:mainfrom
Conversation
When content scripts import CSS files, Vite outputs the CSS in two locations:
1. content-scripts/{name}.css (referenced in manifest)
2. assets/{name}.css (duplicate, not needed)
This change adds a post-build deduplication step that removes identical
CSS files from assets/ when they already exist in content-scripts/ with
the same base name and content. This reduces extension package size by
eliminating unnecessary duplicate files.
The deduplication logic:
- Only compares files with matching base names (e.g., both named "content.css")
- Verifies content is identical before removing
- Preserves legitimate CSS files in assets/ (unlisted-style entrypoints)
- Only removes true duplicates created by Vite's build process
Fixes wxt-dev#1987
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions
Bot
added
the
pkg/wxt
✅ Deploy Preview for creative-fairy-df92c4 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
@oc-wonton When using tailwindcss in content-script and other pages like popup, options etc. The CSS file is created 2 times. Will this pull also fix it or not? See the 2 files. I am also curious why the CSS file is named as my component name, Button-id.css; it should be styles.css 
|
Contributor
|
@aklinker1 Please review this. |
PatrykKuniczak
requested changes
Apr 24, 2026
Comment on lines
+26
to
+30
| afterEach(async () => { | ||
| // Cleanup | ||
| await rm(testOutDir, { recursive: true, force: true }); | ||
| }); | ||
|
|
Collaborator
There was a problem hiding this comment.
That isn't necessary, because you're doing it in beforeEach
| const output: Omit<BuildOutput, 'manifest'> = { | ||
| steps: [ | ||
| { | ||
| entrypoints: [] as any, |
Collaborator
There was a problem hiding this comment.
Suggested change
| entrypoints: [] as any, | |
| entrypoints: [], |
This isn't working?
Collaborator
There was a problem hiding this comment.
It isn't possible to avoid creating duplicated css, instead of removing it after create?
@wxt-dev/analytics
@wxt-dev/auto-icons
@wxt-dev/browser
@wxt-dev/i18n
@wxt-dev/is-background
@wxt-dev/module-react
@wxt-dev/module-solid
@wxt-dev/module-svelte
@wxt-dev/module-vue
@wxt-dev/runner
@wxt-dev/storage
@wxt-dev/unocss
@wxt-dev/webextension-polyfill
wxt
commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
When content scripts import CSS files, Vite outputs the CSS in two locations:
content-scripts/{name}.css(referenced in manifest)assets/{name}.css(duplicate, not needed)This adds a post-build deduplication step that removes identical CSS files from
assets/when they already exist incontent-scripts/with the same base name and content.Related Issues
Fixes #1987
Type of Change
Implementation
deduplicateCss()utility inpackages/wxt/src/core/utils/building/deduplicate-css.tsrebuild.ts)assets/(e.g., unlisted-style entrypoints)Testing
content-scripts/and not duplicated inassets/Additional Notes
Based on maintainer guidance in #1987: each content script is built in a separate Vite build, causing CSS to appear in both locations. This fix deduplicates at the output level rather than changing the build pipeline.