Skip to content

Using generateScopedName with vite.css.modules breaks CSS, even if classes are correctly outputted #5097

@JulianCataldo

Description

@JulianCataldo

What version of astro are you using?

latest (stackblitz starter)

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

macOS

Describe the Bug

Adding this to the stackblitz starter:

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  vite: {
    css: {
      modules: {
        generateScopedName: 'custom__[hash:base64:5]',
      },
    },
  },
});

We get the new classes:

<h1 class="custom__TuMzL astro-JCQVOAF3">
	HELLO, this should be red

...
</h1>

But CSS isn't correctly associated anymore, it looks like it is just not inserted in the <head/> at all.

remove generateScopedName, and everything get back to normal, the text is red.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-wdlcyk-khanxf?file=src/components/Card.astro

Participation

  • I am willing to submit a pull request for this issue.

Metadata

Metadata

Assignees

Labels

- P3: minor bugAn edge case that only affects very specific usage (priority)

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions