[Bug]: A `:hover` in a nested rule is reported as useless

Author: regsebCreated Sep 4, 2023Updated Jan 31, 2025

Labelsbug

Describe the bug

A :hover in a nested rule is reported as useless.

To Reproduce

package.json

json

{
  "name": "testcase",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "purgecss": "5.0.0"
  }
}

index.html

xml

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Test case</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <a href="https://github.com/">GitHub</a>
  </body>
</html>

style.css

css

a:hover {
  background-color: green;
}

a {
  &:hover {
    color: red;
  }
}

npm install
npx purgecss --css style.css --content index.html --rejected

json

[{
  "css": "a:hover {\n    background-color: green;\n}\n",
  "file": "style.css",
  "rejected": ["&:hover"]
}]

Expected Behavior

json

[{
  "css": "a:hover {\n    background-color: green;\n}\n\na {\n    &:hover {\n        color: red;\n    }\n}\n",
  "file": "style.css",
  "rejected": []
}]

Environment

Ubuntu: 22.04.3 LTS
Node.js: v18.17.1
npm: 9.8.1
purgecss: 5.0.0

Add any other context about the problem here

No response

Code of Conduct

I agree to follow this project's Code of Conduct

Source: FullHuman/purgecss

View original on GitHub View discussion on GitHub