Invalid css selector generated

[RobinMalfait]

Discussed in https://github.com/tailwindlabs/tailwindcss/discussions/14901

^{Originally posted by kdy1 November 7, 2024} What version of Tailwind CSS are you using?

v3.4.14

What build tool (or framework if it abstracts the build tool) are you using?

Next.js + turbopack, but reproducible on playground.

What version of Node.js are you using?

Playground

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/obgZakKyiO?file=css

Describe your issue

Generated CSS file is

p.my-4 {
  margin: 0px;
}
.\[\&_\:is\(p\)\]\:my-4 :is(p)p {
  margin: 0px;
}

where :is(p)p is invalid

---

Originally opened here, but converted it too soon: https://github.com/tailwindlabs/tailwindcss/issues/14900

[rose21wiley]

Thanks for making my work a lot easier, partner hours login your post are appreciated.

[RobinMalfait]

Overwriting an existing my-4 based on whether it was used with a p tag or not is not something that should be encouraged. So this will only cause problems sooner rather than later:

@layer components {
  p.my-4 {
    @apply m-0;
  }
}

While the bug technically still exists in v3, if you want to do something similar in v4 then it should work as expected:

@utility my-4 {
  &p {
    @apply m-0;
  }
}

Given this input:

<div class="[&_:is(p)]:my-4"></div>

It will now generate the following CSS:

.\[\&_\:is\(p\)\]\:my-4 {
  & :is(p) {
    &p {
      margin: calc(var(--spacing) * 0);
    }
  }
}
.\[\&_\:is\(p\)\]\:my-4 {
  & :is(p) {
    margin-block: calc(var(--spacing) * 4);
  }
}

Which can be optimized to:

p:is(.\[\&_\:is\(p\)\]\:my-4 :is(p)) {
  margin: calc(var(--spacing) * 0);
}

.\[\&_\:is\(p\)\]\:my-4 :is(p) {
  margin-block: calc(var(--spacing) * 4);
}

You will still see strange behavior because you essentially added an additional implementation of my-4. And honestly I'm not even sure what the actual goal is here. But at least the generated CSS is not invalid.

Going to close this.