Using both screen directive and breakpoint prefix throws error in v3.0.24

What version of Tailwind CSS are you using?

v3.0.24

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

postcss-cli v9.1.0

What version of Node.js are you using?

v16.14.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/yshrsmz/tailwindcss-issue-8160

Describe your issue

when used in conjunction with @tailwindcss/nesting, the following postcss

@tailwind base;
@tailwind components;
@tailwind utilities;

.page-title {
  @apply text-gray-700 text-center py-5 border-b border-gray-200;
  @apply sm:mx-auto sm:py-10;

  @screen sm {
    width: auto;
  }
}

throws error below.

TypeError: Cannot set properties of undefined (setting 'parent')
    at Proxy.removeChild (/Users/yshrsmz/repos/github.com/yshrsmz/tailwind-issue/node_modules/postcss/lib/container.js:219:38)
    at AtRule.normalize (/Users/yshrsmz/repos/github.com/yshrsmz/tailwind-issue/node_modules/postcss/lib/container.js:292:32)
    at AtRule.append (/Users/yshrsmz/repos/github.com/yshrsmz/tailwind-issue/node_modules/postcss/lib/container.js:147:24)
    at AtRule.append (/Users/yshrsmz/repos/github.com/yshrsmz/tailwind-issue/node_modules/postcss/lib/at-rule.js:13:18)
    at /Users/yshrsmz/repos/github.com/yshrsmz/tailwind-issue/node_modules/tailwindcss/lib/lib/collapseAdjacentRules.js:24:29
    at Root.each (/Users/yshrsmz/repos/github.com/yshrsmz/tailwind-issue/node_modules/postcss/lib/container.js:41:16)
    at collapseRulesIn (/Users/yshrsmz/repos/github.com/yshrsmz/tailwind-issue/node_modules/tailwindcss/lib/lib/collapseAdjacentRules.js:9:14)
    at /Users/yshrsmz/repos/github.com/yshrsmz/tailwind-issue/node_modules/tailwindcss/lib/lib/collapseAdjacentRules.js:42:9
    at /Users/yshrsmz/repos/github.com/yshrsmz/tailwind-issue/node_modules/tailwindcss/lib/processTailwindFeatures.js:51:53
    at plugins (/Users/yshrsmz/repos/github.com/yshrsmz/tailwind-issue/node_modules/tailwindcss/lib/index.js:33:58)
error Command failed with exit code 1.

If I remove

@apply sm:mx-auto sm:py-10;

or

@screen sm {
  width: auto;
}

then it compiles fine.

Also, it compiles fine in v3.0.23.

[thecrypticace]

Alright our insiders build includes an updated postcss version integrated into the CLI. Thanks again for opening this issue and helping us figure this out! 🙌

[thecrypticace]

We’re definitely hitting a postcss bug here that’s caused by an interaction between the user css cache we build for @apply and our collapsing/merging of duplicate declarations.

I’ve opened an issue there: https://github.com/postcss/postcss/issues/1738