Related plugins
Describe the bug
Summary
@vitejs/plugin-vue v5.2.2+ drops scoped CSS from Options API components using named exports. CSS is completely missing from the bundle with no build errors or warnings.
Regression: v5.2.2 (last working: v5.2.1)
Status: Still broken in v6.0.2
Minimal Reproduction
<!-- TestComponent.vue -->
<script>
import { defineComponent } from 'vue'
// Named export - triggers the bug
export const TestComponent = defineComponent({
name: 'TestComponent',
data() {
return { message: 'Hello' }
}
})
</script>
<template>
<div class="TestComponent">{{ message }}</div>
</template>
<style scoped>
.TestComponent { background: blue; }
</style>
<!-- App.vue -->
<script setup>
import { TestComponent } from './TestComponent.vue'
</script>
<template>
<TestComponent />
</template>
Config: Default Vite config, no special plugins needed.
The Issue
Broken (v5.2.2+):
export const MyComponent = defineComponent({...}) // CSS missing
Works:
export default defineComponent({...}) // CSS present
Expected vs Actual
Expected: CSS in bundle with scoped selectors like .TestComponent[data-v-abc123]{background:blue}
Actual: No CSS anywhere in dist/ output. Component renders but completely unstyled.
Steps to Reproduce
- Create component with
export const X = defineComponent({...}) + <style scoped>
- Import via
import { X } from './Component.vue'
- Run
vite build with plugin-vue v5.2.2+
- CSS is missing from output
Environment
- @vitejs/plugin-vue: v6.0.2 (broken), v5.2.1 (works)
- vite: 7.2.4
- vue: 3.5.22
Tested versions:
- ✅ v5.2.1 and earlier - Works
- ❌ v5.2.2 through v6.0.2 - Broken
Analysis
Starting in v5.2.2, tree-shaking doesn't properly track scoped CSS dependencies for named exports. The v5.2.2 CHANGELOG mentions "use transformWithOxc if rolldown-vite is detected" - possibly related.
Workaround
Downgrade to v5.2.1:
npm install -D @vitejs/plugin-vue@5.2.1
Or use default exports (not feasible for patterns requiring named exports like JSONForms).
Impact
- Silent failure affecting production builds
- Common in component libraries and JSONForms renderers
- Forces migration away from named export patterns
Reproduction
https://github.com/kjeksfjes/vite-plugin-vue-named-export-bug
Steps to reproduce
Reproduction Steps
-
Clone the reproduction repo and install dependencies:
git clone https://github.com/kjeksfjes/vite-plugin-vue-named-export-bug.git
cd vite-plugin-vue-named-export-bug
npm install
-
Build the project (bug occurs during production build):
npm run build
-
Check if CSS is present in the output:
grep "TestComponent.\*background" dist/assets/\*.css
-
Expected: CSS found with scoped selectors
Actual: No results - CSS is completely missing
-
(Optional) Test that v5.2.1 works correctly:
npm install -D @vitejs/plugin-vue@5.2.1
npm run build
grep "TestComponent.*background" dist/assets/*.css
✅ CSS is present in v5.2.1
Note: The bug affects production builds only. Dev mode (npm run dev) works correctly - the issue only manifests when running npm run build.
System Info
System:
OS: macOS 26.1
CPU: (10) arm64 Apple M1 Max
Memory: 68.38 MB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.17.0 - /Users/joakim/.nvm/versions/node/v22.17.0/bin/node
Yarn: 1.22.22 - /Users/joakim/.nvm/versions/node/v22.17.0/bin/yarn
npm: 10.9.2 - /Users/joakim/.nvm/versions/node/v22.17.0/bin/npm
pnpm: 10.12.4 - /Users/joakim/.nvm/versions/node/v22.17.0/bin/pnpm
Browsers:
Brave Browser: 134.1.76.74
Chrome: 142.0.7444.176
Edge: 142.0.3595.94
Firefox: 140.0
Safari: 26.1
npmPackages:
@vitejs/plugin-vue: ^6.0.2 => 6.0.2
vite: 7.2.4 => 7.2.4
Used Package Manager
npm
Validations
Related plugins
plugin-vue
plugin-vue-jsx
Describe the bug
Summary
@vitejs/plugin-vuev5.2.2+ drops scoped CSS from Options API components using named exports. CSS is completely missing from the bundle with no build errors or warnings.Regression: v5.2.2 (last working: v5.2.1)
Status: Still broken in v6.0.2
Minimal Reproduction
Config: Default Vite config, no special plugins needed.
The Issue
Broken (v5.2.2+):
Works:
Expected vs Actual
Expected: CSS in bundle with scoped selectors like
.TestComponent[data-v-abc123]{background:blue}Actual: No CSS anywhere in dist/ output. Component renders but completely unstyled.
Steps to Reproduce
export const X = defineComponent({...})+<style scoped>import { X } from './Component.vue'vite buildwith plugin-vue v5.2.2+Environment
Tested versions:
Analysis
Starting in v5.2.2, tree-shaking doesn't properly track scoped CSS dependencies for named exports. The v5.2.2 CHANGELOG mentions "use transformWithOxc if rolldown-vite is detected" - possibly related.
Workaround
Downgrade to v5.2.1:
Or use default exports (not feasible for patterns requiring named exports like JSONForms).
Impact
Reproduction
https://github.com/kjeksfjes/vite-plugin-vue-named-export-bug
Steps to reproduce
Reproduction Steps
Clone the reproduction repo and install dependencies:
git clone https://github.com/kjeksfjes/vite-plugin-vue-named-export-bug.git cd vite-plugin-vue-named-export-bug npm installBuild the project (bug occurs during production build):
npm run buildCheck if CSS is present in the output:
grep "TestComponent.\*background" dist/assets/\*.cssExpected: CSS found with scoped selectors
Actual: No results - CSS is completely missing
(Optional) Test that v5.2.1 works correctly:
npm install -D @vitejs/plugin-vue@5.2.1npm run buildgrep "TestComponent.*background" dist/assets/*.css✅ CSS is present in v5.2.1
Note: The bug affects production builds only. Dev mode (npm run dev) works correctly - the issue only manifests when running npm run build.
System Info
System: OS: macOS 26.1 CPU: (10) arm64 Apple M1 Max Memory: 68.38 MB / 64.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.17.0 - /Users/joakim/.nvm/versions/node/v22.17.0/bin/node Yarn: 1.22.22 - /Users/joakim/.nvm/versions/node/v22.17.0/bin/yarn npm: 10.9.2 - /Users/joakim/.nvm/versions/node/v22.17.0/bin/npm pnpm: 10.12.4 - /Users/joakim/.nvm/versions/node/v22.17.0/bin/pnpm Browsers: Brave Browser: 134.1.76.74 Chrome: 142.0.7444.176 Edge: 142.0.3595.94 Firefox: 140.0 Safari: 26.1 npmPackages: @vitejs/plugin-vue: ^6.0.2 => 6.0.2 vite: 7.2.4 => 7.2.4Used Package Manager
npm
Validations