cssinjs/jss

Wrong CSS specificity

Open

#1045 aperta il 25 feb 2019

Vedi su GitHub
 (6 commenti) (2 reazioni) (1 assegnatario)JavaScript (434 fork)batch import
bugcomplexity:moderatehelp wanted

Metriche repository

Star
 (7000 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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

Guida contributor