before:first-of-type: ordering behavior changed in 3.0

[david-crespo]

What version of Tailwind CSS are you using?

For example: v3.0-alpha.2

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

Vite and PostCSS for work, but I have a repro using the playground

What version of Node.js are you using?

v16

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

Change the version between 2.2 and 3.0 to see the different behavior

https://play.tailwindcss.com/dwCf2InE54

Describe your issue

The order of ::first-of-type and ::before in the output is flipped in 3.0. I don't really have any opinion about which order is correct, but the change should at least be documented in the release notes (or fixed if unintentional).

// input
first-of-type:before:content-none

// output 2.2
.first-of-type\:before\:content-none:first-of-type::before {
    content: none;
}

// output 3.0-alpha.2
.first-of-type\:before\:content-none::before:first-of-type {
  --tw-content: none;
  content: var(--tw-content);
}

You have to switch the order to get the desired output in 3.0:

// input
before:first-of-type:content-none

// output 2.2
.before\:first-of-type\:content-none::before:first-of-type {
  content: none;
}

// output 3.0-alpha.2
.before\:first-of-type\:content-none:first-of-type::before {
    --tw-content: none;
    content: var(--tw-content);
}

Also the linter whines when you do it the second way:

Variants are not in the recommended order, which may cause unexpected CSS output.(recommendedVariantOrder)

[david-crespo]

Never mind! I see now this is a dupe of #6016, and you fixed it in #6018, which will presumably be in the next alpha.