3.3.1 not handling pseudo-elements properly

[codepic]

What version of Tailwind CSS are you using?

3.3.1

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

tailwindcss

What version of Node.js are you using?

v18.14.0

Steps to Repro

mkdir repro
cd repro
yarn global add tailwindcss@3.3.1
tailwindcss init

Create repro.css with the following content:

@config 'tailwind.config.js';
::deep [a] {
    @apply bg-white;
}

Run tailwindcss --input .\repro.css --output .\result.css

/* result.css / Incorrect */
[a]::deep {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

You can fix this by downgrading tailwindcss to 3.3.0:

yarn global add tailwindcss@3.3.0
tailwindcss --input .\repro.css --output .\result.css

And the CORRECT output

/* Correct! */
::deep [a] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

[thecrypticace]

Hey! We encountered a similar problem with ::ng-deep in Angular — while we had a bit of a patch fix for that we ended up rewriting our selector handling to handle unknown pseudo-elements better in #10962.

This will be in the next release — and in our insiders build if you want to test it before we tag a new one: npm install tailwindcss@insiders.

Thanks for reporting this! ✨