Skip to content

Vue scoped styles trigger "CSS modules cannot be tree shaken when imported with a default specifier" #10353

Description

@skoniks

🐛 Bug report

When building a Vue 3 SFC with regular scoped styles, Parcel emits a CSS Modules tree-shaking warning even though CSS Modules are not used.

Reproduction

// ./App.vue

<template>
  <div class="foo">test</div>
</template>

<style scoped lang="scss">
.foo {
  color: red;
}
</style>

Build with:

parcel build --no-cache

Current behavior

Parcel emits:

@parcel/optimizer-css: CSS modules cannot be tree shaken when imported with a default specifier

Instead do: import * as style from "style:./App.vue";

The build itself succeeds.

The project does not use <style module>, only <style scoped>.

There is also no user-written import like:

import style from "style:./App.vue";

so the suggested fix cannot be applied in application code.

Expected behavior

Regular Vue <style scoped> blocks should not trigger a CSS Modules tree-shaking warning.

Environment

  • Parcel: 2.16.4
  • Vue: 3.5.41
  • @parcel/transformer-vue: 2.16.4
  • Node.js: v24.13.1
  • OS: macOS

Additional information

The warning only appears during the optimized production build.
Using --no-optimize avoids the warning, but disabling optimization is not a desirable workaround.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions