Skip to content

css && selector is not working properly during build #18843

@aeharding

Description

@aeharding

Describe the bug

When I write the following css module:

.hi {
  && {
    color: blue;
  }

  color: red;
}

I expect

._hi_ffrjt_1._hi_ffrjt_1{color:#00f}
._hi_ffrjt_1 {color:red;}

But I get:

._hi_ffrjt_1{color:red;color:#00f}

This is not the specificity I was expecting and is causing bugs for me, specifically when using CSS modules composes property. I think the minifier is trying to be smart(?) but it doesn't work with CSS modules

Reproduction

https://stackblitz.com/edit/vue3-vite-typescript-starter-klkv2k?file=src%2Fhi.module.css

Steps to reproduce

Run pnpm build and inspect output css

System Info

Stackblitz environment

Used Package Manager

npm

Logs

Please see stackblitz after running prod build.

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug: upstreamBug in a dependency of Vitehas workaroundp2-edge-caseBug, but has workaround or limited in scope (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions