Unwanted stacking behavior on any variant named "dark" since 1.8 even if not the experimental darkModeVariant

[JNavith]

Describe the problem:

If you create dark and anything variants through plugins like this:

plugins: [
    plugin(function ({ addVariant, e }) {
        // Will get (potentially unwanted) stacking behavior
        addVariant('dark', ({ modifySelectors, separator }) => {
            modifySelectors(({ className }) => {
                return `.custom-dark .${e(`dark${separator}${className}`)}`
            })
        });

        // Will NOT get stacking behavior
        addVariant('anything', ({ modifySelectors, separator }) => {
            modifySelectors(({ className }) => {
                return `.anything .${e(`anything${separator}${className}`)}`
            })
        });
    }),
],

and have a variants list like this:

variants: {
    textColor: ["dark", "anything", "hover"]
},

The current (Tailwind CSS 1.8.9) resulting CSS is:

.text-red {
  color: #FF0000
}

.anything .anything\:text-red {
  color: #FF0000
}

.hover\:text-red:hover {
  color: #FF0000
}

.custom-dark .dark\:text-red {
  color: #FF0000
}

.custom-dark .dark\:anything\:text-red {
  color: #FF0000
}

.custom-dark .dark\:hover\:text-red {
  color: #FF0000
}

Notice that dark is stacking with the other variants, and because of this it's been pushed to the end of the CSS. This is despite being listed first in the list of variants for textColor. The only reason dark is doing this but anything is not is because of the name dark, which is taking on the stacking behavior of the upcoming (experimental) darkModeVariant.

The CSS I would expect (same as 1.7 and probably many versions earlier):

.text-red {
  color: #FF0000
}

.custom-dark .dark\:text-red {
  color: #FF0000
}

.anything .anything\:text-red {
  color: #FF0000
}

.hover\:text-red:hover {
  color: #FF0000
}

I think this should be classified as a bug because what was supposed to be contained under the experimental darkModeVariant flag has leaked out and become a breaking change.

Link to a minimal reproduction:

See the tailwindcss-dark-variant-repro repository I've created here. The README restates some of the above and includes my possible diagnosis / solution (which are omitted from this issue because it won't fit the issue template).

Edit: Pull request #2380 will solve this.

🙏 Thank you.

[adamwathan]

Published a new release that prevents user-defined dark variants from inheriting the stacking behavior, thanks for your help!