Pseudo-element dropped from a selector

[thewilkybarkid]

Bug description

Moving to postcss-preset-env 10.2.2 (which is an update to postcss-is-pseudo-class) sees a selector start to break, as a pseudo-element is removed (its properties being applied to the parent).

Source CSS

[aria-expanded] {
  > span {
    :is([aria-expanded='false']) > & {
      &::before {
        color: var(--mainColor);
      }
    }
  }
}

Expected CSS

postcss-preset-env 10.2.1:

[aria-expanded='false'] > :is([aria-expanded] > span)::before {
        color: var(--mainColor);
      }

expected:

[aria-expanded='false'][aria-expanded] > span::before {
        color: var(--mainColor);
      }

even better:

[aria-expanded='false'] > span::before {
        color: var(--mainColor);
      }

Actual CSS

postcss-preset-env 10.2.2:

[aria-expanded='false'][aria-expanded] > span {
        color: var(--mainColor);
      }

Playgound example

https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyJTVDbiU1QmFyaWEtZXhwYW5kZWQlNUQlMjAlN0IlNUNuJTNFJTIwc3BhbiUyMCU3QiU1Q24lMjAlMjAlM0FpcyglNUJhcmlhLWV4cGFuZGVkJTNEJ2ZhbHNlJyU1RCklMjAlM0UlMjAlMjYlMjAlN0IlNUNuJTIwJTIwJTIwJTIwJTI2JTNBJTNBYmVmb3JlJTIwJTdCJTVDbiU1Q3Rjb2xvciUzQSUyMHZhcigtLW1haW5Db2xvciklM0IlNUNuJTIwJTIwJTIwJTIwJTdEJTVDbiUyMCUyMCU3RCU1Q24lN0QlNUNuJTdEJTVDbiUyMiUyQyUyMmNvbmZpZyUyMiUzQSU3QiUyMmJyb3dzZXJzJTIyJTNBJTVCJTIyJTNFJTIwMC4yJTI1JTIwYW5kJTIwbm90JTIwZGVhZCUyMiU1RCUyQyUyMm1pbmltdW1WZW5kb3JJbXBsZW1lbnRhdGlvbnMlMjIlM0EwJTJDJTIyc3RhZ2UlMjIlM0EyJTJDJTIybG9naWNhbCUyMiUzQSU3QiUyMmlubGluZURpcmVjdGlvbiUyMiUzQSUyMmxlZnQtdG8tcmlnaHQlMjIlMkMlMjJibG9ja0RpcmVjdGlvbiUyMiUzQSUyMnRvcC10by1ib3R0b20lMjIlN0QlN0QlN0Q=

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

None

Debug output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Preset Env

Plugin version

10.2.2

What OS are you experiencing this on?

No response

Node Version

22.15.0

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[romainmenke]

Thank you for reporting this @thewilkybarkid,

I can reproduce this with slightly simpler selectors:

https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyLmElMjAlN0IlNUNuJTIwJTIwJTNFJTIwLmIlMjAlN0IlNUNuJTIwJTIwJTIwJTIwJTNBaXMoLmMpJTIwJTNFJTIwJTI2JTIwJTdCJTVDbiUyMCUyMCUyMCUyMCUyMCUyMC5kJTNBJTNBYmVmb3JlJTIwJTdCJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGNvbG9yJTNBJTIwdmFyKC0tbWFpbkNvbG9yKSUzQiU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlN0QlNUNuJTIwJTIwJTIwJTIwJTdEJTVDbiUyMCUyMCU3RCU1Q24lN0QlNUNuJTVDbi5hJTIwJTdCJTVDbiUyMCUyMC5iJTNBJTNBYmVmb3JlJTIwJTdCJTVDbiUyMCUyMCUyMCUyMGNvbG9yJTNBJTIwdmFyKC0tbWFpbkNvbG9yKSUzQiU1Q24lMjAlMjAlN0QlNUNuJTdEJTVDbiUyMiUyQyUyMmNvbmZpZyUyMiUzQSU3QiUyMmJyb3dzZXJzJTIyJTNBJTVCJTIyJTNFJTIwMC4yJTI1JTIwYW5kJTIwbm90JTIwZGVhZCUyMiU1RCUyQyUyMm1pbmltdW1WZW5kb3JJbXBsZW1lbnRhdGlvbnMlMjIlM0EwJTJDJTIyc3RhZ2UlMjIlM0EyJTJDJTIybG9naWNhbCUyMiUzQSU3QiUyMmlubGluZURpcmVjdGlvbiUyMiUzQSUyMmxlZnQtdG8tcmlnaHQlMjIlMkMlMjJibG9ja0RpcmVjdGlvbiUyMiUzQSUyMnRvcC10by1ib3R0b20lMjIlN0QlN0QlN0Q=

.a {
  > .b {
    :is(.c) > & {
      .d::before {
        color: var(--mainColor);
      }
    }
  }
}

.a {
  .b::before {
    color: var(--mainColor);
  }
}

Or without nesting:

:is(:is(.c) > :is(.a > .b)) .d::before {
  color: var(--mainColor);
}

https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyJTNBaXMoJTNBaXMoLmMpJTIwJTNFJTIwJTNBaXMoLmElMjAlM0UlMjAuYikpJTIwLmQlM0ElM0FiZWZvcmUlMjAlN0IlNUNuJTIwJTIwY29sb3IlM0ElMjB2YXIoLS1tYWluQ29sb3IpJTNCJTVDbiU3RCUyMiUyQyUyMmNvbmZpZyUyMiUzQSU3QiUyMmJyb3dzZXJzJTIyJTNBJTVCJTIyJTNFJTIwMC4yJTI1JTIwYW5kJTIwbm90JTIwZGVhZCUyMiU1RCUyQyUyMm1pbmltdW1WZW5kb3JJbXBsZW1lbnRhdGlvbnMlMjIlM0EwJTJDJTIyc3RhZ2UlMjIlM0EyJTJDJTIybG9naWNhbCUyMiUzQSU3QiUyMmlubGluZURpcmVjdGlvbiUyMiUzQSUyMmxlZnQtdG8tcmlnaHQlMjIlMkMlMjJibG9ja0RpcmVjdGlvbiUyMiUzQSUyMnRvcC10by1ib3R0b20lMjIlN0QlN0QlN0Q=

[romainmenke]

This has been fixed:

https://preset-env.cssdb.org/playground/#JTdCJTIyc291cmNlJTIyJTNBJTIyJTVCYXJpYS1leHBhbmRlZCU1RCUyMCU3QiU1Q24lMjAlMjAlM0UlMjBzcGFuJTIwJTdCJTVDbiUyMCUyMCUyMCUyMCUzQWlzKCU1QmFyaWEtZXhwYW5kZWQlM0QnZmFsc2UnJTVEKSUyMCUzRSUyMCUyNiUyMCU3QiU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjYlM0ElM0FiZWZvcmUlMjAlN0IlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwY29sb3IlM0ElMjB2YXIoLS1tYWluQ29sb3IpJTNCJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCU3RCU1Q24lMjAlMjAlMjAlMjAlN0QlNUNuJTIwJTIwJTdEJTVDbiU3RCUyMiUyQyUyMmNvbmZpZyUyMiUzQSU3QiUyMmJyb3dzZXJzJTIyJTNBJTVCJTIyJTNFJTIwMC4yJTI1JTIwYW5kJTIwbm90JTIwZGVhZCUyMiU1RCUyQyUyMm1pbmltdW1WZW5kb3JJbXBsZW1lbnRhdGlvbnMlMjIlM0EwJTJDJTIyc3RhZ2UlMjIlM0EyJTJDJTIybG9naWNhbCUyMiUzQSU3QiUyMmlubGluZURpcmVjdGlvbiUyMiUzQSUyMmxlZnQtdG8tcmlnaHQlMjIlMkMlMjJibG9ja0RpcmVjdGlvbiUyMiUzQSUyMnRvcC10by1ib3R0b20lMjIlN0QlN0QlN0Q=

[aria-expanded] {
  > span {
    :is([aria-expanded='false']) > & {
      &::before {
        color: var(--mainColor);
      }
    }
  }
}

/* becomes: */


[aria-expanded='false'][aria-expanded] > span::before {
  color: var(--mainColor);
}

Thank you again for reporting this!