Using `:where(.anything)` in a plugin and having `!anything` inside HTML, creates invalid CSS

[saadeghi]

What version of Tailwind CSS are you using?

3.2.6

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

Tailwind Play (or any tool)

Reproduction URL

https://play.tailwindcss.com/Oy7NHRkftL?file=config

Describe your issue

If there is string with ! prefix with the same class from a plugin that has a :where() selector, Tailwind creates invalid CSS

HTML:

!btn

tailwind.config.js:

const plugin = require('tailwindcss/plugin')
module.exports = {
  plugins: [
    plugin(function({ addComponents }) {
      addComponents({
        '.btn': {
          backgroundColor: 'red',
        },
        ':where(.btn)': {
          backgroundColor: 'blue',
        },
      })
    })
  ]
}

Generated CSS:

.\!btn {
  background-color: red !important
}

 {
  background-color: blue !important
}

As you can see it can't apply important to the :where() selector and it generates an empty selector.

[adamwathan]

Thanks for reporting! Here's a slightly simplified reproduction for our own reference:

https://play.tailwindcss.com/4MqOxcleAv?file=config

[thecrypticace]

Hey, I've merged the fix for in in #10601. The fix will be be in our next tagged release as well as our insiders build which you can test with npm install tailwindcss@insiders