Some arbitrary pseudo-elements are moved inside :is() when using important config option, breaking the selector

[brandonmcconnell]

Tailwind CSS/browser/device version information

What version of Tailwind CSS are you using?

v3.3.2

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

Tailwind Play

What version of Node.js are you using?

N/A

What browser are you using?

Chrome v114.0.5735.90

What operating system are you using?

macOS v13.1 (22C65)

Reproduction URL

• ✅ Works when not using important (w/o :is()): https://play.tailwindcss.com/yOqpv2N25J
• ❌ Breaks when using important (w/ :is()): https://play.tailwindcss.com/gVUTg4DLNK

Describe your issue

This code:

Config

module.exports = { important: 'body' }

Markup

<progress value="5" max="10" class="
  bg-gray-300
  [&::-webkit-progress-bar]:bg-gray-300
  [&::-moz-progress-bar]:bg-blue-500
  [&::-webkit-progress-value]:bg-blue-500"
/>

Generated CSS (invalid)

body :is(.\[\&\:\:-webkit-progress-value\]\:bg-blue-500::-webkit-progress-value) {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

Instead of including the pseudo-element on the inside of :is(), it should remain on the outside, where it is valid.

For example, the rendered output of [&::-moz-progress-bar]:[&:hover]:font-bold should be…

body :is(.\[\&\:\:-moz-progress-bar\]\:\[\&\:hover\]\:font-bold:hover)::-moz-progress-bar {
  font-weight: 700;
}

but is currently…

body :is(.\[\&\:\:-moz-progress-bar\]\:\[\&\:hover\]\:font-bold:hover::-moz-progress-bar) {
  font-weight: 700;
}

This is unique to pseudo-elements and does not apply to pseudo-classes. Pseudo-classes should remain on the inside of :is(). This already works for most pseudo-elements in TailwindCSS, so maybe it's just keeping an index of all of them. Could TailwindCSS be set up such that any time a double :: appears, it instructs the compiler to display it after the :is()?

I considered maybe it's the case that it keeps them all inside unless on a specific list since some devs write :before vs. ::before, and trying to determine that intelligently for some like that is fine, but could the double ::—when used—be set to always indicate a pseudo-element (vs. a pseudo-class)?

[hixuanxuan]

I meet the same problem..Even using the @csstools/postcss-is-pseudo-class plugin can't convert successfully invalid:is()

[thecrypticace]

Hey! This was an intentional decision originally but it has definitely resulted in a bit too much churn so I've updated the behavior for unknown pseudo-elements.

I've merged in the fix via #11345 and it'll be available when we do our next patch release. In the meantime you can test it using our insiders build:

npm install tailwindcss@insiders

The build will take a few minutes to build, test, and publish but should be out soon.

[brandonmcconnell]

@thecrypticace Thanks, I appreciate it! There didn't appear to be any workaround in tailwind, so this helps a lot.