Problem with tag nesting

[therealgilles]

I am using postcss-nested-ancestors and postcss-nested (as long as postcss-import / postcss-preset-env / stylint / tailwindcss ). I am encountering the following issue and I'm not sure which plugin is at fault or if I'm doing something wrong.

Here is my "css":

body .wp-block-embed,
body .wp-block-video {
    @apply m-0;

    figcaption {
        @apply mt-4 mb-0;
        @apply uppercase;
        @apply tracking-caption;
        @apply text-caption;
    }
}

Here is what I get during a production build:

body .wp-block-embed,body .wp-block-video {
  margin: 0;
  margin-bottom: 0;
  margin-top: 1rem;
  text-transform: uppercase;
  letter-spacing: .075rem;
  font-size: 12px;
  line-height: 16px
}

Somehow the figcaption part has been taken out completely. This does not happen with the development build:

body .wp-block-embed, body .wp-block-video {
  margin: 0px;
}

body .wp-block-embed figcaption, body .wp-block-video figcaption {
    margin-bottom: 0px;
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.075rem;
    font-size: 12px;
    line-height: 16px;
  }

How do I go about finding out where the problem lies?

PS: I am using the laravel mix.

[ai]

Try PostCSS 8.3.3. We fixed a very strange bug which could cause something like this.

[ai]

Can you try 5.0.6 release. The bug may be fixed by @bsak-shell in https://github.com/postcss/postcss-nested/pull/137

[therealgilles]

Thank you for the update!

I have switched to using the tailwindcss/nesting package as the TailwindCSS team says it wraps postcss-(nested|nesting) and fixes a number of issues with nesting and their package.