cssinjs/jss

Wrong CSS specificity

Open

#1 045 ouverte le 25 févr. 2019

Voir sur GitHub
 (6 commentaires) (2 réactions) (1 assigné)JavaScript (434 forks)batch import
bugcomplexity:moderatehelp wanted

Métriques du dépôt

Stars
 (7 000 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

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

Guide contributeur