cssinjs/jss

Wrong CSS specificity

Open

#1.045 geöffnet am 25. Feb. 2019

Auf GitHub ansehen
 (6 Kommentare) (2 Reaktionen) (1 zugewiesene Person)JavaScript (434 Forks)batch import
bugcomplexity:moderatehelp wanted

Repository-Metriken

Stars
 (7.000 Stars)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

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

Contributor Guide