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

[yshrsmz]

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.

[dwightwatson]

I started receiving a similar compilation error after upgrading from Tailwind 3.0.23 to 3.0.24 but have yet to narrow down the specific code in my app that is triggering it.

TypeError: Cannot set properties of undefined (setting 'parent')
    at Proxy.removeChild (/Users/dwight/Sites/my-rent/node_modules/postcss/lib/container.js:219:38)
    at Rule.remove (/Users/dwight/Sites/my-rent/node_modules/postcss/lib/node.js:78:19)
    at processApply (/Users/dwight/Sites/my-rent/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:427:31)
    at /Users/dwight/Sites/my-rent/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:16:9
    at /Users/dwight/Sites/my-rent/node_modules/tailwindcss/lib/processTailwindFeatures.js:47:50
    at plugins (/Users/dwight/Sites/my-rent/node_modules/tailwindcss/lib/index.js:33:58)
    at LazyResult.runOnRoot (/Users/dwight/Sites/my-rent/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/Users/dwight/Sites/my-rent/node_modules/postcss/lib/lazy-result.js:393:26)
    at async Promise.all (index 0)
error Command failed with exit code 1.

[ximus]

same here, seems to happen when nesting a @screen block under any standard css rule. sticking to 3.0.23

using: sveltekit, @tailwindcss/forms, poscss, tailwindcss/nesting, postcss-extend-rule

[ThibodeauJF]

Same issue when upgrading using Tailwind, postcss & StencilJS

[belkin]

I'm experiencing same issue with Tailwind on 3.0.24 version. On 3.0.23 compiling works fine for now.

[thecrypticace]

@dwightwatson Can you provide a reproduction for for error please? I'm trying to track down the source of the problem (which might be a bug in a dependency that we've inadvertently to but I'm not yet certain)

[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

[dwightwatson]

I narrowed down these culprits in our app, which appear to be same issue as OP - using @screen nested breaks the build.

Using @screen md under an element:

dialog {
  @apply top-8 bg-transparent;

  @screen md {
    @apply mt-12;
  }
}

.footer {
  @apply bg-gray-200 py-10;

  &--small {
    @apply bg-gray-300 py-5 shadow;
  }

  &__subtext {
    @apply mb-3 text-sm text-gray-700;

    @screen md {
      @apply mb-0;
    }
  }
}

[thecrypticace]

PostCSS 8.4.13 was released with this fix. I'll leave this open until we update the built-in version in the CLI as well.

Please run npm upgrade (or similar for your package manager) to upgrade PostCSS.

[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! 🙌