Duplicate styles in nested at-rules are not merged

[michaelabrahamian]

Describe the bug
When there are duplicate styles used in nested at-rules, they are not merged.

This is unexpected and not quite obvious to developers, and results in additional CSS code being generated. Nesting at-rules like this is valid CSS: https://css-tricks.com/can-you-nest-media-and-support-queries/

There is also a comment about this Compiled limitation in the mergeDuplicateAtRules function:

 * Plugin to remove duplicate children found in at-rules.
 * Currently does not handle nested at-rules.

To Reproduce
Steps to reproduce the behavior:

Add and run the unit test to the file merge-duplicate-at-rules.test.ts:

it('should remove duplicate children when nested at-rules', () => {
  const actual = transform`
    @supports not (height: 1lh) {
      @media (min-width:500px) {
        color: red;
        color: green;
      }
    }

    @supports not (height: 1lh) {
      @media (min-width:500px){
        color: red;
        color: blue;
      }
    }
  `;

  expect(actual).toMatchInlineSnapshot(`
    "
          @supports not (height: 1lh) {
            @media (min-width:500px) {
              color: red;
              color: green;
            }
            @media (min-width:500px){
              color: red;
              color: blue;
            }
          }
        "
  `);
});

Expected behavior
Duplicate styles should be merged. In the above example, it should end up with:

@supports not (height: 1lh) {
    @media (min-width:500px) {
      color: red;
      color: green;
      color: blue;
    }
  }

At a minimum, some improved guidance and lint rules to make people aware would be really helpful.

Additional context

• Not quite the same, but I found a related issue from 5 years ago: Merge same nested media queries #316
• Related issue about not sorting nested media queries: Nested at-rules are not sorted #1846