Skip to content

[v5.2.2 regression] Scoped CSS completely missing from named exports in Options API components #708

@kjeksfjes

Description

@kjeksfjes

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

  1. Create component with export const X = defineComponent({...}) + <style scoped>
  2. Import via import { X } from './Component.vue'
  3. Run vite build with plugin-vue v5.2.2+
  4. 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

  1. 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
    
  2. Build the project (bug occurs during production build):
    npm run build

  3. Check if CSS is present in the output:
    grep "TestComponent.\*background" dist/assets/\*.css

  4. Expected: CSS found with scoped selectors
    Actual: No results - CSS is completely missing

  5. (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

Metadata

Metadata

Assignees

No one assigned

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions