Incorrect generation of selector :not in JIT mode

[pkruczynski]

What version of Tailwind CSS are you using?
tailwindcss@2.2.17, @tailwindcss/jit@0.1.18

What build tool (or framework if it abstracts the build tool) are you using?
laravel-mix@6.0.31, webpack@5.38.1, postcss@8.3.11

What version of Node.js are you using?
v14.18.0

What browser are you using?
Firefox 93.0, Chromium 95.0.4638.54

What operating system are you using?
Linux Mint 20.1 Ulyssa

Reproduction URL
https://play.tailwindcss.com/PT2jCzNXyi

Describe your issue

The problem is with not properly generating selector :NOT for my, custom component. When I used the specification in CSS file:

@layer components {
    #menu:not(.open) {
        > * { 
          ...
        }
    }
}

In the resulting CSS, it was generated as:

#menu:not(.\!open) > * { ... }

Due to this, it naturally doesn't work as it should. It is a false logic assumption that when I want to exclude class :not(A) - just in case, also add a reinforced class :not(B).
:not(B) -> A - and that was not my expectation. Even when two selectors are generated, they do not complement each other - but are mutually exclusive.

UPDATE:

This problem seems to only occur in JIT mode (Try to change it in the Config Tailwind Play)

A possible workaround is to use a different exclusion declaration:

@layer components {
    #menu:not([class~="open"]) {
        > * { 
          ...
        }
    }
}

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

It looks like there are multiple things going on and that the playground example doesn't match the snippets you posted.

For example, your snippet shows the generation of #menu:not(.\!open) > * { ... } which I don't see in the playground or locally. What I do see is that the rule is not generated at all, because it couldn't find .open.

JIT works by scanning your files and generate what is used. If you want to keep the div#menu1:not(.open) > span {}, then there are a few things you can do:

1. Don't use the @layer components. This means that you can't apply variants anymore and that it will generate everything you provided outside of the @layer. If this is not an issue for your use case then this is a valid option.
2. Safelist open. This way open exists in the codebase and will be generated.

I'm still interested in how you got to generate the #menu:not(.\!open) > * { ... } though. Do you know how that happened?
Edit: I know how to reproduce it. Seems like you have a !open somewhere in your codebase.

[pkruczynski]

Seems like you have a !open somewhere in your codebase

@RobinMalfait:

I don't have the negated !open class directly in the code, although I use alpinejs and conditional classes like this:
<menu :class="{open:open}" />

However, I have a alpinejs conditional state in the code, but I don't know if it matters in this case:
<sometag @click="open=!open" />

[adamwathan]

Try rewriting your code to this so Tailwind actually sees the "open" class:

<menu :class="{ open: open }" />

Notice the spaces around open:, should do the trick.

[pkruczynski]

I've made a lot of code and configuration changes since reporting a bug, and it's too confusing now. Due to your advice and the workaround I have suggested, I think this can close this issue. It is already known that it concerns the JIT purge mechanism and if someone has a similar problem, these tips will be helpful. Thank you