Custom Utility Classes beginning with "-" break TailwindCSS when used in Pseudo Modifiers/Elements

[matthiasbalota]

What version of Tailwind CSS are you using?

v3.3.5

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

vite v4.5.0, postcss v8.4.31

What version of Node.js are you using?

v18.18.0

What browser are you using?

Chrome, Firefox, Safari

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/qrYKzCyyms

Describe your issue

After bravely upgrading to the latest and supposedly greatest version of TailwindCSS (leaping from v3.3.3 to v3.3.5), our project decided to throw a dramatic tantrum and completely collapsed, prompting a less-than-glamorous retreat back to the older version. The root of our comedy of errors? Our custom responsive utility classes, which apparently have a sense of humor too, especially the negative ones. Several coffee cups and a few hours of head-scratching later, I stumbled upon the culprit.

It appears that TailwindCSS struggles with utility classes that begin with a "-" (minus sign) when combined with pseudo-class modifiers. While I understand that our use of responsive utilities may not align perfectly with TailwindCSS's intended use, this issue seems to be more broadly related to any custom utility class starting with a "-" throwing the error: "Cannot read properties of undefined (reading 'raws')".

Whilst digging around in the source code I managed to create a quick fix. It seems that the variants / screenNodes extracted from the context.stylesheetCache generate an undefined PostCSS Node. (I really tried to understand all of this and how it comes to be - but it just got too complicated at this point to debug it ^^ - hope it helps tho)

// lib/expandTailwindAtRules.js

...

    // We do post-filtering to not alter the emitted order of the variants
    const variantNodes = Array.from(screenNodes).filter((node) => {
      if (typeof node === 'undefined') return false // <- this line "fixes" it

      const parentLayer = node.raws.tailwind?.parentLayer

      if (parentLayer === 'components') {
        return layerNodes.components !== null
      }

      if (parentLayer === 'utilities') {
        return layerNodes.utilities !== null
      }

      return true
    })

...

[thecrypticace]

Hey I've merged the fix for this in #12514 and it'll be available in our next release.

It'll also be available via our insiders build in about 15 minutes:

npm install tailwindcss@insiders

[matthiasbalota]

@thecrypticace Thanks! Seems you fixed it 😄