Wrong CSS specificity

[oliviertassinari]

Take the following style as an input:

const style = {
  root: {
    "&:hover": {
      "& .icon": {
        color: "red"
      }
    },
    "&.active": {
      "& .icon": {
        color: "blue"
      }
    }
  },
};

Expected behavior:
I would expect the following CSS injected into the page:

.root-0-0-1:hover .icon {
  color: red;
}
.root-0-0-1.active .icon {
  color: blue;
}

Describe the bug:
The following CSS is injected in the page:

.root-0-0-1.active .icon {
  color: blue;
}
.root-0-0-1:hover .icon {
  color: red;
}

Codesandbox link:

https://codesandbox.io/s/yjyqmo4vqv

Versions (please complete the following information):

• jss: 10.0.0-alpha.11

[kof]

Do you know if its a new bug in v10 or has been there in v9 too?

[oliviertassinari]

It has probably been here for a long time: same with v9: https://codesandbox.io/s/qo00j8549.

[oliviertassinari]

The workaround:

const style = {
  root: {
    "&:hover": {
      "& .icon": {
        color: "red"
      }
    },
    "&.active": {
-     "& .icon": {
+     "&& .icon": {
        color: "blue"
      }
    }
  },
};

Featured in mui/material-ui#14650.

[kof]

Just reproduced it with a test, it's weird that this workaround helps

[kof]

Ah it's not weird, workaround works because you increase specificity there

[vlazh]

Are there any updates?